{"id":430,"date":"2022-10-06T11:17:44","date_gmt":"2022-10-06T09:17:44","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=430"},"modified":"2022-10-06T11:17:44","modified_gmt":"2022-10-06T09:17:44","slug":"7-5-movimiento-aleatorio","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/7-5-movimiento-aleatorio\/","title":{"rendered":"7.5. Movimiento aleatorio"},"content":{"rendered":"

En temas anteriores hemos utilizado el m\u00e9todo random()<\/span> para obtener valores aleatorios. Podemos usar estos valores para cambiar en cada frame<\/em> las coordenadas en las que dibujamos alguna de nuestras figuras. Veamos un ejemplo:<\/p>\n

\"\"
Figura 92. Aplicando random()<\/span> a la posici\u00f3n de un c\u00edrculo
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Como se observa en la figura anterior, el cambio de un frame <\/em>al siguiente es demasiado brusco. El m\u00e9todo random()<\/span> nos devuelve en este caso un n\u00famero entre 0 y 400 cada vez que lo invocamos. Podemos imprimir estos valores en la consola utilizando console.log()<\/span> y observaremos que efectivamente el salto de una posici\u00f3n a otra es demasiado brusco.<\/p>\n

\"\"
Figura 93. Monitorizando los valores de random()<\/span> en la consola
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Utilizando random()<\/span> de esta manera no podremos crear una sensaci\u00f3n de movimiento convincente, deberemos explorar otras t\u00e9cnicas.<\/p>\n

Random walk<\/em><\/h3>\n

Una de estas t\u00e9cnicas es el random walk<\/em>: paseo aleatorio. En esta, en lugar de utilizar los valores de random()<\/span> directamente para establecer la posici\u00f3n de la figura que queremos mover, tendremos una posici\u00f3n inicial a la que sumaremos un peque\u00f1o valor aleatorio en cada frame<\/em>. Ve\u00e1moslo en acci\u00f3n:<\/p>\n

\"\"
Figura 94. Random walk<\/em>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Partiendo desde el centro del canvas<\/em>, en cada frame<\/em> sumamos una peque\u00f1a cantidad, definida en este caso con la variable offset<\/span>, a la posici\u00f3n del c\u00edrculo tanto en el eje x<\/em> como en el y<\/em>. De esta manera, nuestro c\u00edrculo se mover\u00e1 entre \u20132 y 2 p\u00edxeles en ambas direcciones cada vez que se ejecuta el draw()<\/span>.<\/p>\n

Noise<\/em><\/h3>\n

Otra de las t\u00e9cnicas para obtener un movimiento aleatorio m\u00e1s org\u00e1nico es utilizando el m\u00e9todo de P5 noise()<\/span>. Este m\u00e9todo nos devuelve valores pseudoaleatorios entre 0 y 1 utilizando una funci\u00f3n de ruido Perlin (Perlin noise<\/em>). Esta funci\u00f3n, creada por Ken Perlin para generar las texturas de la pel\u00edcula Tron de 1982, es ampliamente utilizada en muchos \u00e1mbitos de la creaci\u00f3n gr\u00e1fica digital, desde para la creaci\u00f3n de efectos de humo o fuego hasta para la distribuci\u00f3n de los distintos paisajes del videojuego Minecraft. La ventaja que noise()<\/span> nos ofrece respecto a random()<\/span> es que nos otorga una aleatoriedad con continuidad, sin saltos bruscos. A continuaci\u00f3n, podemos ver un ejemplo de funci\u00f3n de ruido.<\/p>\n

\"\"
Figura 95. Funci\u00f3n de ruido
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

A noise()<\/span> le pasamos un par\u00e1metro que equivale a la coordenada x<\/em> de la funci\u00f3n de ruido y nos devuelve el valor de la coordenada y<\/em> (entre 0 y 1). En el ejemplo de la figura anterior, si le pasamos el valor noise(3)<\/span>, nos devolver\u00e1 un valor cercano a 0,75. Si le vamos pasando a noise()<\/span> valores cercanos, los que nos devuelva lo ser\u00e1n tambi\u00e9n. Veamos c\u00f3mo podemos utilizarlo en P5.<\/p>\n

\"\"
Figura 96. Usando noise()<\/span> en P5
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Como se puede observar, los valores que nos va devolviendo noise()<\/span> son relativamente cercanos entre s\u00ed, por lo que ahora s\u00ed que podremos utilizarlos para crear un movimiento aleatorio fluido:<\/p>\n

\"\"
Figura 97. Aplicando noise()<\/span> a la posici\u00f3n de un c\u00edrculo
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En este caso utilizamos dos ruidos distintos, uno para la posici\u00f3n en x del c\u00edrculo y otro para la posici\u00f3n en y. Antes de calcular cada uno de los ruidos, especificamos un noiseSeed()<\/span> distinto para cada uno; si no lo hacemos, los valores que obtendremos ser\u00e1n iguales, ya que ambos m\u00e9todos noise()<\/span> estar\u00e1n usando la misma curva de ruido. Otra manera de obtener valores diferentes es establecer distintos puntos de partida en la misma curva. Para ello, podr\u00edamos cambiar los valores de offX<\/span> y offY<\/span> que hemos definido al principio del c\u00f3digo con el fin de que est\u00e9n m\u00e1s separados entre s\u00ed en la curva. Variando el incremento de offX<\/span> y offY<\/span> podemos controlar la velocidad a la que nos movemos en la curva de valores pseudoaleatorios: a valores m\u00e1s peque\u00f1os le corresponden movimientos m\u00e1s suaves, mientras que si aumentamos mucho el incremento, los valores que noise()<\/span> nos devolver\u00e1 ser\u00e1n cada vez m\u00e1s similares a los que nos devolver\u00eda random()<\/span>, ya que los saltos en la curva pseudoaleatoria ser\u00e1n mayores.<\/p>\n

De la misma manera como anteriormente hemos utilizado los valores animados no \u00fanicamente para la posici\u00f3n de las figuras en el canvas<\/em> sino tambi\u00e9n para su tama\u00f1o, color u otros par\u00e1metros, podemos tambi\u00e9n utilizar las animaciones aleatorias para el prop\u00f3sito que consideremos oportuno. Creemos un par de ruidos m\u00e1s para aplicarlos al tama\u00f1o y al color del c\u00edrculo:<\/p>\n

\"\"
Figura 98. Utilizando noise<\/span> para el tama\u00f1o y el color
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En la figura anterior vemos que se han creado un par de variables m\u00e1s para almacenar la posici\u00f3n en la curva de ruido para el tama\u00f1o y el color, con distintos valores para que estos valores no est\u00e9n asociados entre s\u00ed. A continuaci\u00f3n, se han utilizado estos valores para pasarlos como par\u00e1metro a distintos noise()<\/span> que se usan para definir la posici\u00f3n, el tama\u00f1o y el color del c\u00edrculo, de modo que todos estos par\u00e1metros var\u00edan aleatoriamente de manera fluida a lo largo del tiempo.<\/p>\n","protected":false},"excerpt":{"rendered":"

En temas anteriores hemos utilizado el m\u00e9todo para obtener valores aleatorios. Podemos usar estos valores para cambiar en cada frame las coordenadas en las que dibujamos alguna de nuestras figuras. Veamos un ejemplo: Como se observa en la figura anterior, el cambio de un frame al siguiente es demasiado brusco. El m\u00e9todo nos devuelve en […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/430"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/430\/revisions"}],"predecessor-version":[{"id":431,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/430\/revisions\/431"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}