dis9034-2024-1

clase-14

última solemne
Perlin noise

-Lo primero que hice para poder comenzar con mi idea de proyecto Exámen, fue buscar referencias visuales de una idea que me surgió en mi ramo de taller de diseño y de áreas silvestres, donde el tema de búsqueda de uno de los grupos, con respecto a un panel interpretativo era “El reino Fungi”, o mejor conocido como el mundo de los hongos, y me pregunté ¿Qué ocurre bajo tierra con estas especies?. Y gracias a la ayuda de mie hermana, quien es estudiante de agronomía descubrí los micelio.

Micelio

Es una red de filamentos que se va expandiendo hasta conformar el cuerpo del hongo, y que es escesial para la simbiosis del bosque
Con 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

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

grafico random (1)

perlin noise graficado (1)

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

desenfoque (1)

Paso 07:

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

cuadricula (1)

lineaas (1)

Paso 08:

Este paso es muy importate, ya que es necesario crear un nuevo archivo en js, para poder establecer, la posición, velocidad y aceleración de estas partículas. Creo que este fue el paso más difícil ya que a cada momento p5 me decía que “particle” no estaba definido y ya lo estaba dando todo por perdido, por eso es muy importante revisar el html!! y establecer la acción
- Además de establecer la función del mouse
Y cuando esto sucedió todo hizo sentido!