\nyou can see it here http:\/\/barradeau.com\/2013\/hydra\/<\/a><\/p>\n
I had the idea of doing this for a long time and being unemployed due to\u00a0Flash’s death<\/em>, it turned out to be both a good way to learn HTML and the right time to do so.<\/p>\n this article is about how it works, the problems I faced and how I solved them.<\/p>\n here are some outputs of the engine<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n the algorithm<\/p><\/blockquote>\n I wanted to keep things as simple as possible ; ideally a child should be able to figure out how it works and get an interesting result. or…\u00a0well…\u00a0something.<\/p>\n the algorithm is therefore fairly simple<\/p>\n 1\u00a0select a random polygon from a library<\/p><\/blockquote>\n the first step was probably the easiest, I used the Flash IDE to turn Fonts outline into vector shapes. I used a rather unsophisticated JSFL by Eric Lin<\/a> this is a list of the fonts I used:<\/p>\n additionally, I’ve used le monde de Victor<\/a>\u00a0to perform tests, this is the one used in the videos below. the final library contains 101 shapes.<\/p>\n once we have the path of each polygon, drawing them to the Canvas is trivial so I won’t cover this but you can refer to the\u00a0W3C specification<\/a>\u00a0and ask internet for tutorials.<\/p>\n one key concept here is the interpolation (<\/em>aka lerp <\/em>or lrp)\u00a0<\/em>; the fact of going from a value A to a value B over time. it is used later to inflate\/deflate the shapes, it is the most widely used animation technique. the minimal example would go like<\/p>\n this should log a value that oscillates between 0 and 1.<\/p>\n here is a graphic extension of the above on the X and Y axes:<\/p>\n this is an essential concept to understand for anyone willing to animate something on a screen. in the above example, the X coordinate is bound to a lerp and the the Y coordinate as well as the radius of the disc is bound to another lerp (another time value).<\/p>\n 2 start a stroke on mouseDown<\/p><\/blockquote>\n I was wondering how to create a dashed stroke and found this a<\/a>rticle.\u00a0as it’s not supported in all browsers, the trick is to create a fallback method on the context like so:<\/p>\n then to get it to move, we’ll need to store a “dashOffset” value somewhere and say<\/p>\n the rest of the article<\/a> is pretty clear, it’s worth mentioning that the method is now properly supported by Chrome, FF, IE and Opera. as I used rounded coordinates\u00a0(read below), I needed to inflate<\/em> the slice axis a bit before the clipping operation so\u00a0here’s an implementation of the dashed line & a line extrusion:<\/p>\n 3 slice up the polygon on mouseUp<\/p><\/blockquote>\n I knew this would be the hardest part,\u00a0mostly because it’s impossible to foresee where the polygon will be cut so it would have to work in all sorts of degenerate cases.\u00a0it means that we might end up dealing with concave polygons, complex polygons and self-intersecting polygons which are tricky cases to deal with.<\/p>\n after failing badly at handling simple polygons & degenerate cases, I saw this DEMO<\/a>\u00a0and started a prototype using the POLYK lib<\/a>. unfortunately the\u00a0lib only <\/em>handles simple polygons. still, it’s handy &\u00a0I would recommend it for smaller projects that don’t require intense polygon action.<\/p>\n then I searched a bit more and found\u00a0Javascript Clipper<\/a>\u00a0a port of a C++ library.\u00a0it is extremely robust, rather fast (even in JS) & apart for the use of capital .X \/ .Y, I found nothing to frown upon so I ended up using it. here’s a live DEMO<\/a>\u00a0to see for yourself.<\/p>\n technically, I’m using IntPoints to spare some computations. when the user slices a polygon, the segment is extruded to create a Quad and I perform an XOR operation with Clipper where the subject is the current polygon and the clip is the newly created Quad.<\/p>\n after some time, this part was working pretty nicely but the mayhem was far from over.<\/span><\/p>\n 4 pick one of the slices on mouseDown<\/p><\/blockquote>\n to know which polygon is clicked, I needed a contains<\/em> method. there are different approaches to solve this, the one I used so far was the one described by Paul Bourke here<\/a> ( code here<\/a> ). it appeared to be rather slow & after some research I found another one here<\/a> that’s way more compact and worked just as fine:<\/p>\n where poly<\/em> is an array of points & C<\/em> is a Boolean indicating whether or not the mouse is inside the polygon. it’s quite cryptic yet it works with convex<\/em>, concave<\/em> & (self-) intersecting<\/em> polygons. in my case there was non need to handle complex polygons<\/em> so I went with it. when the user clicks on a polygon, I test every shape and if one of them contains the mouse Position, it shrinks.\u00a0later I’ve added the double click to reset the original polygon, this doesn’t use the contains test.<\/p>\n here’s an example of this in action<\/p>\n additionally I had to build a graph of the sliced up pieces ; if 2 pieces share a collinear edge, they’re connected. only the pieces that have exactly one connection are candidates for a click. 5 shrink the selected slice<\/p><\/blockquote>\n I had some very <\/span>organic<\/em> – as in<\/span> organic matter<\/em> – yet very <\/span>mechanic<\/em> motion\u00a0in mind. the best example would be the insects’ motion as they stand somewhere between the animal and the machine. on a side note, insects have developed incredibly sophisticated mechanisms to accomplish all kinds of tasks ; if you’re interested in this, I’d recommend searching about <\/span>Biomimicry<\/a>.<\/span><\/p>\n for the sake of documenting , here’s what I usually go through when I’m after an animation principle\u00a0(grow\/shrink in this case).\u00a0I tried them all but none of them made it to the final app.<\/p>\n <\/p>\n I tried to collapse all the shape’s points to the polygon’s centroid.\u00a0<\/span>then I tried to use a set of “springs” that would shorten progressively ; after a while, any shape would turn into a straight line (the slice axis) from which I would grow a new shape.\u00a0I also tried to get the points to follow the shape’s path, fail.\u00a0then I thought about using the polygon’s convex hull and projecting points onto it…<\/span><\/p>\n in practice, everything caused the shape to look ugly because it overlooked the morphology<\/em><\/strong> of the polygon ; it was too mechanical. here’s where failing is good ; after all this, I could put a name on what\u00a0<\/span>I wanted and this name was a\u00a0morphological skeleton.<\/strong><\/em><\/p>\n it appears that I did this Binary Skeletonization<\/a> algorithm some years ago. it retrieves a structure (the medial axis) that gives a rough “skeleton” of a binary (black and white) image.\u00a0First I tried to compute a geometric medial axis and failed miserably, I took a series of snapshots, never to forget<\/p>\n this was a good start, finding the bisectors was relatively easy but then… so I ported my AS class to Javascript and added a brute force vectorization which gave me this. this was a debug view,\u00a0the final version has connected components.<\/p>\n here’s a demo for you to play with (computationally intensive).<\/span><\/p>\n![\"out_1\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/out_1.png\")
<\/p>\n![\"out_2\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/out_2.png\")
<\/p>\n![\"out_3\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/out_3.png\")
<\/p>\n![\"principe\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/principe.png\")
<\/p>\n\n
\nanother option is to create a custom font and use the typeface.js<\/a>\u00a0generator to convert it to a JSON file describing each character as a series of vectors.<\/p>\n\n
\/\/the linear interpolation method\r\nfunction lerp( time, a, b )\r\n{\r\n return a + ( b - a ) * time;\r\n}\r\n\/\/print the result of a linear interpolation between 0 and 1 in the console\r\nsetInterval( function()\r\n{\r\n console.clear();\r\n var time = .5 + ( Math.sin( Date.now() * 0.001 ) * .5 );\r\n console.log( lerp( time, 0, 1 ) ); \r\n}, 1000 \/ 60 );<\/pre>\nif (!context.setLineDash) {\r\n context.setLineDash = function () {}\r\n}<\/pre>\ncontext.lineDashOffset = dashOffset;\r\ndashOffset += speed;\/\/ : int<\/pre>\n
\non a side note, I tried using Hammer.js<\/a>\u00a0to handle gestures and it caused some spectacular crashes on iPad so I simply bound the touch events<\/a>\u00a0to the mouse events handlers and it did the thing.<\/p>\nfunction contains( poly, x, y )\r\n{\r\n var c = false,\r\n l = poly.length,\r\n j = l - 1;\r\n\r\n for( var i = -1; ++i < l; j = i)\r\n {\r\n ( ( poly[ i ].y <= y && y < poly[ j ].y ) \r\n || ( poly[ j ].y <= y && y < poly[ i ].y ) )\r\n && ( x < ( poly[ j ].x - poly[ i ].x ) * ( y - poly[ i ].y ) \/ ( poly[ j ].y - poly[ i ].y ) + poly[ i ].x )\r\n && ( c = !c);\r\n }\r\n return c;\r\n}<\/pre>\n
\nimagine a “U” shape and slice it horizontally, the 2 upper legs are valid candidates but the bottom piece can’t be selected.<\/p>\n![\"expand_0\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/expand_0.png\")
<\/a>![\"expand_1\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/expand_1.png\")
<\/p>\n![\"mat_0\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/mat_0.png\")
<\/p>\n![\"mat_1\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/mat_1.png\")
extruding the edges went![\"mat_2\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/mat_2.png\")
\n<\/a>really
\n![\"mat_3\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/mat_3.png\")
wrong.
\n<\/a><\/p>\n
\n![\"mat_4\"](\"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2014\/03\/mat_4.png\")
<\/p>\n