Currently I’m trying to get a bit more JavaScript and HTML5 exposure (no use denying it I guess – it’s here to stay) and found the Paper.js framework which seems to be really nice.
An easy way to test a vector-based framework often are fractals where you can get visual pleasing images that are easy to generate and are often very taxing on the frameworks and render-engines.
The fractal’s construction
The easiest one I can think of is Sierpinski’s triangle:
It’s really easy to generate:
given 3 Points (of a triangle) A, B, C just create the midpoints on AB, AC and BC and create 3 new triangles (A, AB, AC), (AB, B, BC) and (AC, BC, C) from it – repeat recursively for each of those and you’ve got your fractal:
Implementing this using Paper.js
After all this is very straight-forward, as Paper.js is capable of performing basic vector.operations – so all there is to do is including the paper.js script into your page, adding a canvas-element in the body and doing the drawing in a special “text/paperscript” script:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Fractal with Paper.Js</title> <script type="text/javascript" src="Assets/paper.js"></script> <script type="text/paperscript" src="Fractal.js" canvas="myCanvas"></script> </head> <body> <canvas id="myCanvas" resize="true"></canvas> </body> </html>
Here is the code for the fractals-drawing (fractal.js):
function genFractal (a, b, c, depth) { if (depth == 0) drawTriangle(a, b, c); else { var ab = (a + b) / 2; var ac = (a + c) / 2; var bc = (b + c) / 2; genFractal(a, ab, ac, depth - 1); genFractal(ab, b, bc, depth - 1); genFractal(ac, bc, c, depth - 1); } } function drawTriangle(a, b, c) { var path = new Path(); path.strokeColor = 'red'; path.moveTo(a); path.lineTo(b); path.lineTo(c); path.lineTo(a); } genFractal(new Point(10, 610), new Point(610, 610), new Point(310, 10), 7);
As you can see it’s very easy – just create the new points, generate another iteration of triangles and draw them on the final recursion depth – this will produce the red triangle you see above.