MIAUMIAU LABS

This is our tech playground. Lately we are tinkering with the GPU.

Delaunay for fun

15, Apr 2010/ By /Categories 3D, AS3, Sound Spectrum/6 Comments

delaunay

En este experimento he querido probar lo que podía hacer utilizando el algoritmo de triangulación Delaunay y las cosas han salido de un modo diferente a como yo esperaba aunque el resultado ha sido curioso.

Buscando por la red información sobre el tema, me he encontrado con un post en el blog de Nicolas Barradeau que ya había portado a as3 el código de la triangulación. La idea era dibujar una forma con el ratón, guardar las coordenadas en un Vector y triangularlo, con el modelo de datos resultante y creando un mapeado UV para una imagen deberíamos tener un generador de formas texturizadas en tiempo real, primero probé añadiendo algo de ruido a cada vertice para conseguir darle un movimiento orgánico aunque el resultado era muy brusco por lo que en cada ‘enterframe’ filtré todos los vertices con una funcion que agrega un patrón de movimiento usando seno y coseno jugando con un valor que se incrementaba con el paso del tiempo para simular la phase y dar así un efecto de bandera ondeando al viento. Al tener todos estos valores metidos dentro de un Vector y estar dibujandolos con la instrucción drawTriangles del API de dibujo de flash 10 no debía ser muy dificil añadir el valor del movimiento sinusoidal en una dimensión más (la Z) y así, mediante projectVectors y Matrix3D, conseguí renderizar el modelo de datos tridimensionales sin mayor problema.

Para darle un valor añadido decidí ponerle sonido y utilizar computeSpectrum para recoger los valores de la música en tiempo real y así poder deformar los triangulos al ritmo de la canción. El movimiento no me terminaba de convencer ya que igualar los valores FFT tal cual, hace que el movimiento no sea del todo agradable así que debía añadir un suavizado al mover las propiedades de los vertices, posición de la matriz3D etc… Usando la antigua fórmula de easing de toda la vida el resultado fué bastante bueno.

Al final decidí colocar letras en la textura y para ello creé un simple sistema de pintado de un TextField a un BitmapData y usarlo como textura en los triangulos. En el ejemplo se puede escribir y borrar la palabra que hay en el objeto 3d, rotar el objeto según la posición del ratón (se recomienda mantener el ratón en el centro de la animación), añadir filtros Glow [UP] o DropShadow [DOWN] o filtrar el bitmap de la textura (CPU intensivo) para mostrar tan solo los bordes de la imágen [LEFT] .

Espero que os guste.

6 Comments

  1. nicoptere

    April 15, 2010 at 14:00

    lo siento, mis lecciones de espanol estan demasiado viejas
    gracias por el feedback :)

    very elegant & creative use of the algo.
    I’ve tried to merge the points of the triangles once the triangulation is performed. it is quite an fastidious process but the result is much lighter (no more redundant points ) and the shape is homogenous (no more gaps between the triangles)
    anyway, I’m a fresh reader of yours and like very much what you do. keep up your outstanding work!

    Reply
  2. Siroko

    April 15, 2010 at 14:43

    @nicoptere thanks to you for Delaunay’s code, was very fast to implement it and for the optimization thing, i was thinking the same and also give an indexes output in order to make it drawTriangles friendly. Glad you enjoyed our blog, we will try to keep it updated.

    Reply
  3. esedeerre

    April 15, 2010 at 9:55

    Grandes!!!

    Reply
  4. Fabien

    April 15, 2010 at 15:42

    GREAT! but sadly, the keys entries don’t work under firefox mac, and nothing shows under safari mac. I’ll try to test it elsewhere.

    Reply
  5. Siroko

    April 15, 2010 at 17:58

    @Fabien it works, the only thing, you must click on the stage to set the focus properly and then you can use the keys entries.
    Cheers.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

miaumiau interactive studio © 2011. All rights reserved