{"id":410,"date":"2010-06-15T15:25:47","date_gmt":"2010-06-15T13:25:47","guid":{"rendered":"http:\/\/labs.miaumiau.cat\/?p=410"},"modified":"2011-07-29T14:35:36","modified_gmt":"2011-07-29T14:35:36","slug":"elastic-triangles","status":"publish","type":"post","link":"https:\/\/www.miaumiau.cat\/?p=410","title":{"rendered":"Elastic triangles"},"content":{"rendered":"

\"delaunay\"<\/a><\/p>\n

DrawTriangles es una herramienta potente, nos permite no solo pintar una serie de l\u00edneas o rellenos planos en pantalla, sino que adem\u00e1s podemos mapear im\u00e1genes en las mallas de tri\u00e1ngulos que generemos, cosa que puede aprovecharse para manipular la forma de las im\u00e1genes de manera interactiva.<\/p>\n

Imaginemos que tenemos un campo de puntos distribuidos equitativamente a modo de ret\u00edcula. No resulta complicado calcular en todo momento la distancia de cada punto o nodo de la reticula con respecto al rat\u00f3n.<\/p>\n

Por otro lado tambi\u00e9n podr\u00edamos usar los eventos de rat\u00f3n mouseDown y mouseUp, para calcular el n\u00famero de pixeles que hemos arrastrado el rat\u00f3n mientras apret\u00e1bamos el bot\u00f3n. Ese resultado es el n\u00famero de pixeles que debemos mover cada nodo de la ret\u00edcula, en positivo o negativo, tanto en x como en y, con respecto a su posici\u00f3n actual. Si a ese movimiento le aplicamos una ecuaci\u00f3n de movimiento oscilatorio y los valores de velocidad y elasticidad se asignasen en funci\u00f3n de la dist\u00e1ncia que separa al puntero del rat\u00f3n con respecto a cada nodo, tendr\u00edamos una malla de puntos que se puede arrastrar de forma interactiva y que adem\u00e1s responde con mayor celeridad en el \u00e1rea mas pr\u00f3xima al rat\u00f3n que en zonas alejadas.<\/p>\n

Hay que tener cuidado ya que los n\u00fameros se pueden disparar a valores muy elevados en funci\u00f3n del tama\u00f1o que tenga el objeto a mover y la velocidad con que se mueva el rat\u00f3n. En este caso lo que se ha implementado es un sistema de control para que la velocidad aumente de manera c\u00fabica dependiendo de la dist\u00e1ncia, pero solo hasta cierta constante apartir de la cual, la multiplicaci\u00f3n se hace sobre esa constante. Con esto conseguimos que apartir de esa distancia, la velocidad crezca de manera lineal y no exponencial.<\/p>\n

Esto nos lleva a la siguiente fase que es el pintado de tri\u00e1ngulos. B\u00e1sicamente se ha de generar un mapa UV para la imagen dada, es decir que tenemos que guardar en un vector, valores normalizados de 0 a 1 para cada v\u00e9rtice de cada tri\u00e1ngulo que se va a tejer, tomando como base el grid original.<\/p>\n

Para concluir debemos activar un enterFrame y en cada fotograma tendremos que redibujar la malla completa usando el mapa UV y usando los valores de posici\u00f3n de cada paso en el movimiento de los nodos.
\nAs\u00ed conseguimos tener una imagen arrastrable que se deforma con el movimiento del rat\u00f3n.<\/p>\n

Jugando con este concepto y con m\u00e1s tiempo se podr\u00edan llegar a hacer experiencias tan gustosas como el MORISAWA FONT PARK<\/a> de Tha.jp<\/a><\/p>\n

Pod\u00e9is descargar la clase para jugar con ella aqu\u00ed.<\/a><\/p>\n

Un saludo.<\/p>\n","protected":false},"excerpt":{"rendered":"

DrawTriangles es una herramienta potente, nos permite no solo pintar una serie de l\u00edneas o rellenos planos en pantalla, sino que adem\u00e1s podemos mapear im\u00e1genes en las mallas de tri\u00e1ngulos que generemos, cosa que puede aprovecharse para manipular la forma de las im\u00e1genes de manera interactiva. Imaginemos que tenemos un campo de puntos distribuidos equitativamente […]<\/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-410","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/410","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=410"}],"version-history":[{"count":3,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/410\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/410\/revisions\/664"}],"wp:attachment":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}