Ver ejemplo en movimiento

Este ejemplo consiste en generar un terreno en 3 dimensiones con ThreeJS a partir de una imagen generada con Perlin Noise. El Perlin Noise es una función matemática que utiliza gradientes precalculados para generar valores pseudoaleatorios que pueden generar a su vez (por ejemplo) imágenes. Por ejemplo, un par de imágenes generadas a partir de Perlin Noise:

Como se puede ver en la imagen, el Perlin Noise genera imágenes con apariencia aleatoria, pero con cambios de color progresivos entre pixel. Es decir, no vemos un pixel negro junto a uno blanco, sino que los pixels aparecen "difuminados", sin cambios de color bruscos entre ellos.

En este ejemplo he utilizado la libería ToxicLibsJS, que tiene un módulo para generar imágenes con Perlin Noise. Al crear la imagen, almaceno el valor de color de cada pixel generado en una matriz para utilizarlo posteriormente. Después creo un plano con tantos vértices como pixels tiene la imagen. Como la imagen es de 200x200 pixels, necesito un plano de 200x200 vértices. Viendo la estructura de un plano:

Vemos que por ejemplo un plano de 3x3 segmentos tiene 4x4 vértices, es decir, un plano de nxn vértices tendrá (n-1)x(n-1) segmentos (el tercer y cuarto parámetro del constructor de un plano en ThreeJS son los segmentos de ancho y de alto), por lo que generamos nuestro plano con:

plano_suelo_general = new THREE.PlaneGeometry(1000,1000,lado-1,lado-1);

Hecho esto, recorremos la matriz de vértices y colocamos cada uno en una altura proporcional al color del pixel que le corresponde(en color hexadecimal, el blanco sería 0, y el negro 1)

for(var i = 0; i < puntos_noise.length; i++) { plano_suelo_general.vertices[i].z = Math.max(0,altura * puntos_noise[i]/20); }

Y ya está! a partir de aquí podemos hacer lo que queramos con el terreno generado. En este caso yo he dejado fija la cámara y giro el terreno para generar la sensación de movimiento, y he añadido unos sliders (con MinimalCompsJS) para hacer modificaciones sobre el terreno. El código del ejemplo está comentado, cualquier duda, comentario o propuesta la podéis hacer en los comentarios del post.

Esta semana me he vuelto a topar con este bug de la clase MovieMaterial en Papervision 2.0 GreatWhite.

Si utilizamos un MovieClip como material, utilizando MovieMaterial, y este vá a cambiar en algún momento, pero no queremos utilizar el atribute animated para conservar recursos, podemos llamar a la funcion updateBitmap() para actualizar el material solo cuando sea necesario. El problema es que en esta versión de Papervision, la función updateBitmap() definida en MaterialObject3D, está vacía (literalmente).

Para solucionar este inconveniente, podemos llamar a la función drawBitmap de la clase MovieMaterial. Por ejemplo:

Esta función sirve para comprobar si la diferencia en años entre dos fechas, es mayor o igual que cierto número, pasado como parámetro.Sirve para AS2 y AS3.

Por ejemplo, si tenemos que comprobar en un formulario si alguien tiene más de 18 años, tendremos que hacer lo siguiente:

La función comprobarMayor, consta de 3 lineas:

-En la primera, comprobamos si este año ya ha pasado la fecha metida en el formulario

-En la segunda, calculamos el número de años, que depende de si en el año en curso ha pasado la fecha o no.

-La tercera devuelve true si la persona tiene igual o mayor edad de la pasada como parámetro, y false si es menor.

La función es esta:

Esta fue mi primera clase en Actionscript 3.0. Sirve para saber a cuantos fotogramas por segundo(fps) se está ejecutando una película y la memoria consumida por el player. Aunque configuremos la velocidad de refresco a 25fps, puede que no se alcance esa velocidad si el ordenador donde se ejecuta la aplicación no es muy potente o la película tiene una programación muy compleja (por ejemplo utiliza algún motor de 3d o de físicas) o assets muy grandes. La clase es esta: