Matthew Erlebacher Project-05

Wallpaper

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-05

function setup() {
    createCanvas(450, 450);
    noStroke();
}

function draw() {
    background(0);
    for (var centerX1 = 25; centerX1 < width; centerX1 += 100) {
        for (var centerY1 = 25; centerY1 < height; centerY1 += 100) {
            // Creates pattern for upper left area
            fill(0, 0, 255);
            ellipse(centerX1, centerY1, 40, 40);
            // Creates blue circle

            fill(255, 0, 0);
            rectMode(CENTER);
            rect(centerX1, centerY1, 22.5, 22.5);
            // Creates red square

            fill(0, 255, 0);
            push();
            translate(centerX1, centerY1);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 20, 20);
            pop();
            // Creates green rotated square

            fill(0);
            ellipse(centerX1, centerY1, 10, 10);
            // Creates black circle
        }
    }

    for (var centerX2 = 75; centerX2 < width; centerX2 += 100) {
        for (var centerY2 = 75; centerY2 < height; centerY2 += 100) {
            // Creates pattern for lower right area
            fill(0, 0, 255);
            ellipse(centerX2, centerY2, 40, 40);
            // Creates blue circle

            fill(255, 0, 0);
            rectMode(CENTER);
            rect(centerX2, centerY2, 22.5, 22.5);
            // Creates red square

            fill(0, 255, 0);
            push();
            translate(centerX2, centerY2);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 20, 20);
            pop();
            // Creates rotated green sqare

            fill(0);
            ellipse(centerX2, centerY2, 10, 10);
            // Creates black circle
        }
    }

    for (var centerX3 = 75; centerX3 < width; centerX3 += 100) {
        for (var centerY3 = 25; centerY3 < height; centerY3 += 100) {
            // Creates pattern for upper right area
            fill(125);
            push();
            translate(centerX3, centerY3);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 30, 30);
            pop();
            // Creates rotated gray square

            fill(0);
            rectMode(CENTER);
            rect(centerX3, centerY3, 20, 20);
            // Creates black square

            fill(255);
            ellipse(centerX3, centerY3, 15, 15);
            // Creates white circle
        }
    }

    for (var centerX3 = 25; centerX3 < width; centerX3 += 100) {
        for (var centerY3 = 75; centerY3 < height; centerY3 += 100) {
            // Creates pattern for lower left area
            fill(125);
            push();
            translate(centerX3, centerY3);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 30, 30);
            pop();
            // Creates rotated gray square

            fill(0);
            rectMode(CENTER);
            rect(centerX3, centerY3, 20, 20);
            // Creates black square

            fill(255);
            ellipse(centerX3, centerY3, 15, 15);
            // Creates white circle
        }
    }

    noLoop();
}

Doing this was a bit tricky for me. I don’t have a very good taste in decoration. In addition, I am bad at coming up with patterns. However, in the end I think that I did alright. I thought it would be interesting to give the background a chess board formation, as I find it to be aesthetically appealing. The coding itself wasn’t very difficult. I only needed to set the coordinates as variables in the for loops, and the rest of the assignment practically did itself. I didn’t have much of a sketching phase, mainly because it just feels more natural for me to start coding right away.