Hola y bienvenidos a otro
desafio de codificacion
en este desafio de codificacion
voy a programar
una visualizacion
que se justo asi
eso fue para el Thumbnail
y lo voy a hacer en
p5.js usando
javascript en el navegador
lo que se esta reproduciendo
aqui es un ejemplo que hice
anteriormente en Processing
el cual les daria un mayor rendimiento
al final de este video tambien
vamos a mirar eso brevemente
entonces, no voy a empezar de cero
este video sera desarrolado en la
idea de el Sonido de Perlin en 2D
si el Sonido de Perlin en 2D no les suena
familiar, para aqui, ve a la descripcion del
video y ve y busca my serie de
Sonido de Perlin y luego vuelve
ok. Hola! ya regresaste
excelente, ok vamos a empezar
voy a empezar desde esta pieza de codigo
en particular que genera este
algoritmo en particular
entonces este ya es un ejemplo del
Sonido de Perlin en 2D y cada
pixel obtiene un valor a escala
de acuerdo a el Sonido de Perlin
pero voy a hacer algo diferente
lo que voy a hacer es en un tipo
de cuadricula de pixeles
ok este es mi cuadricula de pixeles
de muy baja resolucion
en vez de tener a valor en la escala
de grises para cada pixel
por decirlo asi lo que quiero tener
es un vector, quiero tener una flecha
apuntando en una direccion y quiero
que esa direccion, sea una direccion
fijada de acuerdo a el Sonido de Perlin
porque ultimamente lo que voy a hacer es que voy a derramar un monton
de particulas dentro de esta area conocido como un campo de flujo cuando
derramo la particulas adentro y van a seguir las flechas
ok entonces lo primero que hay que hacer es empezar a revizar el codigo
para hacer vectores en vez de pixeles entonces veamos como eso puede funcionar
entonces voy a trabajar con un lienzo de baja resolucion, solo de 200x200
solo para empezar las cosas y una cosa que tambien necesito es pensar en
una variable principal aqui, es que
necesito pensar en, cual es la razon de celula a ancho, entonces no quiero tener
una flecha para cada pixel, sera poco razonable tener 200 vectores en vez
de tener un vector cada 10 pixeles o cada 20 pixeles, entonces llamemos una variable
como scale y la voy a llamar scl corto de Scale y voy a decir que es 20
y luego lo que tambien necesito tener son columnas y filas, entonces voy a tener las
columnas que sean el ancho dividido por por la escala y lo voy a llevar a piso eso