{"id":293,"date":"2010-04-15T12:38:47","date_gmt":"2010-04-15T10:38:47","guid":{"rendered":"http:\/\/labs.miaumiau.cat\/?p=293"},"modified":"2011-07-29T14:36:52","modified_gmt":"2011-07-29T14:36:52","slug":"delaunay-for-fun","status":"publish","type":"post","link":"https:\/\/www.miaumiau.cat\/?p=293","title":{"rendered":"Delaunay for fun"},"content":{"rendered":"<p><a title=\"Delaunay for fun\" href=\"http:\/\/miaumiau.cat\/examples\/delaunay\/Main.swf\" rel=\"shadowbox;width=1000;height=600\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-294\" title=\"delaunay\" src=\"http:\/\/www.miaumiau.cat\/wp-content\/uploads\/2010\/04\/delaunay.jpg\" alt=\"delaunay\" width=\"515\" height=\"320\" \/><\/a><\/p>\n<p>En este experimento he querido probar lo que pod\u00eda hacer utilizando el algoritmo de triangulaci\u00f3n Delaunay y las cosas han salido de un modo diferente a como yo esperaba aunque el resultado ha sido curioso.<\/p>\n<p>Buscando por la red informaci\u00f3n sobre el tema, me he encontrado con un <a href=\"http:\/\/en.nicoptere.net\/?p=10\">post<\/a> en el blog de Nicolas Barradeau que ya hab\u00eda portado a as3 el c\u00f3digo de la triangulaci\u00f3n. La idea era dibujar una forma con el rat\u00f3n, guardar las coordenadas en un Vector y triangularlo, con el modelo de datos resultante y creando un mapeado UV para una imagen deber\u00edamos tener un generador de formas texturizadas en tiempo real, primero prob\u00e9 a\u00f1adiendo algo de ruido a cada vertice para conseguir darle un movimiento org\u00e1nico aunque el resultado era muy brusco por lo que en cada &#8216;enterframe&#8217; filtr\u00e9 todos los vertices con una funcion que agrega un patr\u00f3n 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\u00ed un efecto de bandera ondeando al viento. Al tener todos estos valores metidos dentro de un Vector y estar dibujandolos con la instrucci\u00f3n drawTriangles del API de dibujo de flash 10 no deb\u00eda ser muy dificil a\u00f1adir el valor del movimiento sinusoidal en una dimensi\u00f3n m\u00e1s (la Z) y as\u00ed, mediante projectVectors y Matrix3D, consegu\u00ed renderizar el modelo de datos tridimensionales sin mayor problema.<\/p>\n<p>Para darle un valor a\u00f1adido decid\u00ed ponerle sonido y utilizar computeSpectrum para recoger los valores de la m\u00fasica en tiempo real y as\u00ed poder deformar los triangulos al ritmo de la canci\u00f3n. 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\u00ed que deb\u00eda a\u00f1adir un suavizado al mover las propiedades de los vertices, posici\u00f3n de la matriz3D etc&#8230; Usando la antigua f\u00f3rmula de easing de toda la vida el resultado fu\u00e9 bastante bueno.<\/p>\n<p>Al final decid\u00ed colocar letras en la textura y para ello cre\u00e9 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\u00fan la posici\u00f3n del rat\u00f3n (se recomienda mantener el rat\u00f3n en el centro de la animaci\u00f3n), a\u00f1adir filtros Glow [UP] o DropShadow [DOWN] o filtrar el bitmap de la textura (CPU intensivo) para mostrar tan solo los bordes de la im\u00e1gen [LEFT] .<\/p>\n<p>Espero que os guste.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este experimento he querido probar lo que pod\u00eda hacer utilizando el algoritmo de triangulaci\u00f3n 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\u00f3n sobre el tema, me he encontrado con un post en el blog de Nicolas Barradeau [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-293","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=293"}],"version-history":[{"count":2,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":666,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/293\/revisions\/666"}],"wp:attachment":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}