Project -05: Wallpaper

I wanted my wallpaper to look 3D and look like if the light was shining from the top left side!

sketch
function setup() {
    createCanvas(400, 390);
    background(0);
}

function draw() {
    rotateGrid(-50,0); //rotate's final grid
}

function drawTriangleOne(x,y) { //draws Triangle 1
    strokeWeight(0.1);
    fill(150); //Triangle 1
    triangle(x, y, x + 50, y, x + 25, y + (sqrt(1875))/2);
    fill(80)
    triangle(x + 50, y, x + 25, y + sqrt(1875), x + 25, y + (sqrt(1875))/2);
    fill(230)
    triangle(0, 0, x + 25, y + (sqrt(1875))/2, x + 25, y + sqrt(1875));
}

function drawTriangleTwo(x,y) { //draws Triangle 2
    fill(200); //Triangle 2
    triangle(x + 50, y, x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))/2); 
    fill(150);
    triangle(x + 50, y, x + 50, y + (sqrt(1875))/2, x + 75, y + sqrt(1875));
    fill(80);
    triangle(x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))/2, x + 75, y + sqrt(1875));
}

function drawFlipTriangleOne(x,y) { //Draws Triangle 3 
    push();
    translate(-25, sqrt(1875));
    drawTriangleTwo(x,y);
    pop();
}

function drawFlipTriangleTwo(x,y) { //Draws Triangle 4
    push();
    translate(25, sqrt(1875));
    drawTriangleOne(x,y);
    pop();
}

function drawSingleRowTriangles(x,y) { //Draws First Row of Triangles
    for (var i = 0; i < 8; i++) {
        drawTriangleOne(x,y);
        drawTriangleTwo(x,y);
        translate(50,0);
    }
    
}

function drawFourStartingTriangles(x,y) { //Groups First Four Starting Triangles
    for (var i = 0; i < 9; i++) {
        drawTriangleOne(x,y);
        drawTriangleTwo(x,y);
        drawFlipTriangleOne(x,y);
        drawFlipTriangleTwo(x,y);
    }
}

function drawTwoRowTriangles(x,y) { //Draws First 2 Rows of Triangles
    push();
    for (var i = 0; i < 11; i++) {
        drawFourStartingTriangles(x,y);
        translate(50,0);
    }
    drawTriangleOne(x,y);
    drawFlipTriangleOne(x,y);
    pop();
}

function drawTriangleGrid(x,y) { //Uses for loops to create entire Triangle Grid
    push();
    for (var i = 0; i < 6; i++) {
        drawTwoRowTriangles(x,y);
        translate(0, 2*sqrt(1875));
    }
    drawSingleRowTriangles(x,y);
    drawTriangleOne(x,y);
    drawTriangleTwo(x,y);
    pop();
}

function rotateGrid(x,y) {
    angleMode(DEGREES);
    rotate(30);
    translate(0,-200);
    drawTriangleGrid(x,y);
}


Leave a Reply