ssontag – Project – 05 – Wallpaper

For this project i wanted to be reminiscent about the striped blue and grey wallpaper i had in my childhood bedroom. I also decided i wanted to add some of the line work style that i have developed in architecture school.

sketch

;function setup() {
//variables to set up ordered spacing within the for loop
    var sY = 40;
    var sX = 20;

    var rX = 20;

    createCanvas(380, 380);
    background(210);
//a for loop that sets up the background bars of blue and grey iterating across the x axis
   for(var i = 0; i < 20; i++) {
        noStroke();
//modulus so there is an alternating pattern between even and odd
        if ((i % 2) == 0) {
            fill(70, 130, 180);
//an else statment that sets the fill as grey for every other
        } else {
            fill(210);
        }
        rect(i * rX, 0, rX, 400);
    }
//a for loop that wil set up the grid for th repeating pattern in the x direction 
    for(var x = 0; x < 20; x++) {
// an if statement and a for loop that makes the bezier curves and some ellipse's using modulus to
//make it occur every other row
        if ((x % 2) == 0) {
            for(var y = 0; y < 10; y++) {
                noFill();
                stroke(1);
                bezier(x * rX + sX, y * sY, x * rX, y * sY, x * rX + sX, y * sY + 20, 
                    x * rX + sX - 10, y * sY + 20);
                bezier(x * rX + sX - 10, y * sY + 20, x * rX, y * sY + 20, x * rX + sX,
                    y * sY + 40, x * rX, y * sY + 40);
                ellipse(x * rX + 10, y * sY + 20, 20, 20);
            }
        } else {
//an else statement that sest the lines and ellipses for the grey rows
            for(var y = 0; y < 10; y++) {
                line(x * rX + sX, y * sY, x * rX, y * sY);
                ellipse(x * rX + 10, y* sY, 35, 35);
            }
        }
    }
    noLoop();
//keeps the drawing from animating, it will draw itself once like a wallpaper
}

function draw() {

}

Leave a Reply