Sierpinski Triangle

by Tyler Hogsett

HTML

<div>
    <b>Sierpinski Triangle</b>
    <br/>Press "space" to zoom.
</div>
<canvas id="canvas"></canvas>

CSS

* { margin:0; padding:0; }

html, body { width:100%; height:100%; }

canvas { display:block; }

div {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: helvetica;
}

JavaScript

var SIDE_LENGTH_THRESHOLD = 1;
var PADDING = 20;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

resizeCanvas();
var settings = initialSettings();
var initialSideLength = settings.sideLength;
drawArt();

var settings = initialSettings();
var initialSideLength = settings.sideLength;
function animate() {
    drawArt();
    settings.sideLength *= 1.01;
    if(settings.sideLength / 4 > initialSideLength) {
        settings.sideLength = settings.sideLength / 2;
    }
}
$(window).keypress(startAnimation);
var animating = false;
function startAnimation(event) {
    if(event.keyCode != 32)
        return;
    
    if(animating)
        return;
    
    animating = true;
    window.setInterval(animate, 1000 / 30);
}

function initialSettings() {
    var x = canvas.width / 2;
    var sideLength = Math.min(canvas.width - PADDING * 2, (canvas.height - PADDING * 2) / Math.sin(Math.PI / 3));
    var y = canvas.height / 2 - Math.sin(Math.PI / 3) * sideLength / 2;
    
    return {
        topPoint: { x: x, y: y},
        sideLength: sideLength
    };
}

function drawArt() {
    canvas.width = canvas.width;
    context.strokeStyle = "#000000";
    sierpinskiTriangle(settings.topPoint, settings.sideLength);
    context.stroke();
}

function sierpinskiTriangle(topPoint, sideLength) {
    context.moveTo(topPoint.x, topPoint.y);
    
    var xOffset = Math.cos(Math.PI / 3) * sideLength;
    var yOffset = Math.sin(Math.PI / 3) * sideLength;
    
    context.lineTo(topPoint.x + xOffset, topPoint.y + yOffset);
    context.lineTo(topPoint.x - xOffset, topPoint.y + yOffset);
    context.lineTo(topPoint.x, topPoint.y);
    
    sierpinskiTriangle_aux({x: topPoint.x, y: topPoint.y + yOffset}, sideLength / 2);
}

function sierpinskiTriangle_aux(bottomPoint, sideLength) {
   ...