Project 5: Wallpaper

wpf-wallpaper
var size = 40; //variable that determines the size of the indvidiual flowers
var ypos = size;
var xpos = size;
var oDist = size * 1.4 //distance between two origins for the rings
var storedY; //variable to store previous ypos

function setup() {
    createCanvas(600, 600);
    background(231,227,210);
}

function draw() {
    for(ypos = size; ypos <= height; ypos +=(2*size)+oDist) { //loop that increases the ypos and repeats the x loops

        for(var xpos = size; xpos <= width + size; xpos += 2*size){ //loop to draw the line of flowers
            storedY = ypos; //stores ypos
            fill(0);
            push();
            translate(xpos,ypos);
            flower(0,0);
            pop();
        }
        ypos += oDist + (7*size/24);

        for(var xpos = oDist/2; xpos <= width + size; xpos += oDist){ //loop to draw the line of rings
            push();
            fill(230,192,71);
            translate(xpos,ypos);
            criss(0,0);
            pop();
        }
        ypos = storedY; //sets ypos back to what it was when the loop began so the loop iteration works properly and fills the screen
    }
    noLoop();
}

function criss(x,y){ //function that draws the ring shaps by drawing rotated flowers
    push();
    rotate(radians(45));
    flower(x,y);
    pop();
}

function flower(a,b){ //function that draws the flower by drawing a petal and then rotating 90 degrees and repeating
    petal(a,b);
    push();
    rotate(radians(90));
    petal(a,b);
    pop();
    push();
    rotate(radians(180));
    petal(a,b);
    pop();
    push();
    rotate(radians(270));
    petal(a,b);
    pop();
}

function petal(x,y) { //function that draws an idvidual petal composed of two triangles and a square
    noStroke();
    var side = size/(1+sqrt(3)); //variable that determins the length of the side of the square and equilateral triangle
    var triHigh = side*(sqrt(3)/2); //variable that determins the height of the triangle based on the length of the side
    triangle(x,y,x-(side/2),y+triHigh,x+(side/2),y+triHigh);
    square(x-(side/2),y+triHigh,side);
    triangle(x,y+size,x-(side/2),y+size-triHigh,x+(side/2),y+size-triHigh);
}

I loved this project. I had a really great time breaking down the steps of drawing into individual functions to make the process easier. Additionally, it was very satisfying to get the loops working properly because I had to iterate on that a few times. The patterns would either be too far apart or on top of one another.

Leave a Reply