dis9034-2024-1

# clase-12

• Estudio de referentes
  -Rune Madsen: se especializa en proyectos de diseño basados en códigos

  Tile Puzzle

  es una escultura interactiva en tamaño real de rompecabezas, dividido en 9 mosaicos, los cuales se proyectan aleatoriamente

-Pentagram: Gran estudio de diseño en New York

• A-Frame: creador de experiencias en realidad virtual, utilizando un HTML como proyecto independiente de código abierto

Perlin noise

-Lo primero que hice para poder comenzar con mi idea de proyecto Solemne 02, fue volver a los referentes estudiados en clase en busca de inspiración e ideas, donde el que más me llamó la atención fue el proyecto de Artes Visuales realizado por Ruth Jarman y Joe Gerhardt del Reino Unido , titulado Semiconductor, del año 2019. El cual tiene el objetivo de representar datos científicos, y transformarlo en una experiencia artística y sonora. Y de esta manera, poder captar la atención del usuario de una manera más inmersiva, utilizando el movimiento de formas/ ondas de manera continua. Donde las partículas se dejan caer, sobre el campo de flujo.

• Las referencias de p5, encontré las variantes necesaria, llamada Perlin Noise, el cual es un efecto generado por números aleatorios, que para ser utilizada en p5 necesita de dos funciones: noise() y random(), donde el primero de ellos se utiliza para que la textura, movimiento o forma creada, tenga gestos más ”suaves “ , y random() siendo el valor aleatorio para que aquella textura obtenga movimiento.

  Paso 01: Creamos figura

## Paso 02:agregamos un valor aleatorio a “x” para establecer el movimiento https://github.com/isabellagutierrezm/dis9034-2024-1/assets/163045412/a35a4b80-65a9-4891-8645-4ca60769b885

// los valores del ruido tienen que ser entre 0 y 1. la cual toma dos argumentos, el primero para controlar el número de octavas // el segundo argumento determinará la amplitud del ruido

Paso 04: agregamos ruido, junto con la función “xoffset” para tener una variable, para mover mi figura de forma más fluida

https://github.com/isabellagutierrezm/dis9034-2024-1/assets/163045412/4e04cf80-31ff-438b-90b8-e48f73a56c57

Paso 05: Ahora vamos a intensificar el movimiento del ruido, y graficar los valores aleatorios

![ruido (1)](https://github.com/isabellagutierrezm/dis9034-2024-1/assets/163045412/bb7c98e3-44bd-4afd-a81d-8516fb40835

• Comenzamos a establecer los valores de Perlin noise, para ello establecemos la variable ”y” , como segundo eje de coordenada, y cambiar el valor para que deje de ser aleatorio y que sea igual al valor del ruido

Paso 06: Pasamos el efecto de Perlin noise a dos dimensiones,

• calculando el índice de los píxeles y sus colores, para poder crear la visualización predeterminada de la versión bidimensional de perlin noise // inc es incremento de la mezcla de píxeles, y se desenfoca suaviza la aleatoriedad de cada píxel con una escala de grises

Paso 07:

-Pasamos de crear pixeles a vectores, para ello agregamos la variable escala, derivando columnas y filas

https://editor.p5js.org/isabellagutierrezm/sketches/b5r_AORpl

This site is open source. Improve this page.