{"assets":[{"original":"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/snowman3.gif","local":"\/data\/posts\/2014\/12\/4d9588956910b16c979295b68ca7471b.gif"},{"original":"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/tuto_2.png","local":"\/data\/posts\/2014\/12\/d69e3ce7e9513622813296b47b6f74ad.png"}],"author_link":"author\/benjamin-soule\/","author_name":"Benjamin","cat":"LD #31","categories":["LD #31"],"comments":[],"epoch":1418925360,"event":"LD31","likes":26,"metadata":{"p_key":"83242","p_author":"Benjamin","p_authorkey":"0","p_urlkey":"293980","p_title":"Timelapse + Snowman Face Tutorial","p_cat":"LD #31","p_event":"LD31","p_time":"1418925360","p_likes":"26","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1417737600","event_key":"26","event_name":"LD31"},"source_url":"2014\/12\/18\/timelapse-snowman-face-tutorial\/","text":"<p>I made a timelapse for <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-31\/?action=preview&amp;uid=2952\" target=\"_blank\">Snowball Juggling Olympio<\/a> my LD31 Entry :<\/p>\n<p><iframe allowfullscreen=\"\" frameborder=\"0\" height=\"375\" src=\"http:\/\/www.youtube.com\/embed\/x-34X4j7uac?feature=oembed\" width=\"500\"><\/iframe><\/p>\n<p>I had to reboot my project 6h after the start. My initial idea was some sort of shooter arena with a very small ship and a very big arena \ud83d\ude00<br\/>\nThe black screen sequences are my actual sleep time, it was pretty short on this jam\u2026 Not sure if it was a good thing or not.<\/p>\n<h2>Snowman face animation<\/h2>\n<p><img alt=\"snowman\" class=\"alignleft size-full wp-image-428580\" height=\"233\" src=\"\/data\/posts\/2014\/12\/4d9588956910b16c979295b68ca7471b.gif\" width=\"171\"\/>Because some people asked me to, I also made a small tutorial to explain the snowman face animation. I\u2019m not very good at making tutorial, but I\u2019ll try.<\/p>\n<p>The syntax\u00a0used is haxe.<\/p>\n<p><em> In this exemple the face will follow the mouse position in the screen.<\/em><\/p>\n<p><strong>WIDTH<\/strong> and <strong>HEIGHT<\/strong> are the game size.<br\/>\n<strong>RAY<\/strong> is the head ray.<br\/>\n<strong>mx<\/strong> and <strong>my\u00a0<\/strong>are the mouse screen position transformed into a value from -1 to 1.<br\/>\n<strong>elements<\/strong> is a list of the face elements such as the eyes, nose, mouth etc. They all have a <strong>dx<\/strong> &amp; <strong>dy<\/strong> offset between -1 and 1 to represent their position on the face.<\/p>\n<p><code><br\/>\nvar mx = (mouseX \/ WIDTH) * 2 - 1;<br\/>\nvar my = (mouseY \/ HEIGHT) * 2 - 1;<\/code><\/p>\n<p>for ( e in elements ) {<br\/>\nvar cx = mx + e.dx;<br\/>\nvar cy = my + e.dy;<br\/>\nvar ddx = Math.cos( 1.57 * cx - 1.57 );<br\/>\nvar ddy = Math.cos( 1.57 * cy - 1.57 );<br\/>\ne.x = ddx * RAY;<br\/>\ne.y = ddy * RAY;<br\/>\n}<\/p>\n<p>var angle = Math.atan2(my, mx);<br\/>\nvar dist = Math.sqrt(mx * mx + my * my);<br\/>\nnose.rotation = angle \/ 0.0174;<br\/>\nnose.scaleX = dist;<br\/>\n<\/p>\n<p><img alt=\"tuto_2\" class=\"alignleft size-full wp-image-428610\" height=\"112\" src=\"\/data\/posts\/2014\/12\/d69e3ce7e9513622813296b47b6f74ad.png\" width=\"64\"\/>The <strong>nose<\/strong> element have a specific code to change his shape depending on the angle and the distance of the mouse to the center of the screen.<br\/>\nOn the image you can see the nose also have a base element with no transformation so it can keep a round shape at the base. this element also add a small shadow using the <i>DARKEN<\/i> flash blendmode.<\/p>\n<p>The use of the cosinus function make the linear values of <strong>mx<\/strong> and <strong>my<\/strong> become curved values. <strong>ddx<\/strong> and <strong>ddy<\/strong> are still between -1 and 1 but their value tends to stick to -1 and 1 more quickly. This is where the fake round face feeling happen.<\/p>\n<p>This is not a 3D projection and, therefore, far from accurate especially with diagonals. In my case I had to mask my face elements so they dont <em>leave<\/em> the face area. You can see more details in the <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-31\/?action=preview&amp;uid=2952\" target=\"_blank\">source code<\/a> of my game.<\/p>","time":"December 18th, 2014 5:56 pm","title":"Timelapse + Snowman Face Tutorial","title_was_empty":false}