Project 05: Wallpaper

My first idea when trying to create a wallpaper was using Penrose tiling, but I couldn’t find a good algorithm without directly copying code, which wouldn’t make for a very good learning exercise. My second idea, using a theme of symmetry, came in the form of recursion. I decided to loosely base a recursive wallpaper off of a Koch snowflake. I think that the resolution is a little too low for it to be properly viewed, but it is still interesting. I’d like to imagine this pattern looped across my wall, each recursive segment being repeated.

sketch

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0);
    // just the rainbow
    let colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', 
                    '#0000FF', '#4B0082', '#9400D3'];

    // move center for ease of programming
    translate(width / 2, height / 2);
    recursiveSnowflake(360, colors);

    noLoop();
}

// use default parameters for recursive depth
function recursiveSnowflake(initSize, colors, depth=0) {
    if (depth === 7) { // base case
        // do nothing
    } else { // recursive case
        fill(colors[depth]);
        drawTriCenter([0, 0], initSize, 0);
        drawTriCenter([0, 0], initSize, 180);
        
        var dAngle = 60;
        for (var i = 0; i < 6; i++) {
            push();
            rotate(radians((dAngle * i)));
            translate(0, Math.sqrt(3) * initSize / 2);
            recursiveSnowflake(initSize / 3, colors, depth+1);
            pop();
        }
    }
}

// draws an equilateral triangle, point facing up
function drawTriCenter(c, sideLength, rot) {
    // math to get tri points from center
    var distance = sideLength / Math.sqrt(3);
    let p1 = [c[0] - distance * cos(radians(90 + rot)), 
                c[1] - distance * sin(radians(90 + rot))];
    let p2 = [c[0] - distance * cos(radians(210 + rot)), 
                c[1] - distance * sin(radians(210 + rot))];
    let p3 = [c[0] - distance * cos(radians(330 + rot)), 
                c[1] - distance * sin(radians(330 + rot))];

    strokeWeight(0);
    
    triangle(p1[0], p1[1], p2[0], p2[1], p3[0], p3[1]); 
}