by Carsten König

a simple fractal using Paper.js

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:

PaperJsSierpinski

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:

SierpinskiKonstruction

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.