Project-05: Wallpaper

My Work

//cbtruong;
//Section B;

function setup() {
    createCanvas(600, 600);
    //cream background color that goes with the wallpaper-esque idea;
    background(248, 241, 196);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(248, 241, 196);
    //two for loops to draw repeated versions of pattern 1;
    //inner loop is the x coordinate while the outer is the y coordinate;
    //both i and j are initialized as width/height /4 to allow for centering;
    for (var j = height/4; j < height*2; j += 300){
        for (var i = width/4; i < width*2; i += 300){
            pattern1(i, j);
        }
    }
    //two for loops to draw repeated versions of pattern 2;
    //inner loop is the x coordinate while the outer is the y coordinate;
    //both l and m are intialized as width/height /2 to allow for centering;
    //between pattern 1;
    for (var m = height/2; m < height*2; m += 300){
        for (var l = width/2; l < width*2; l += 300){
            pattern2(l, m);
        }

    }
}


function pattern1 (x, y) {
    //scaled it down by 0.5 by encasing;
    //the entire pattern in a push/pop;
    push();

    scale(0.5);
    strokeWeight(1);
    noFill();
    //connecting lines;
    line(x, y, x - 50, y);
    line(x, y, x + 50, y);
    curve(x + 50, y, x - 50, y, x - 50, y - 50, x + 50 , y);
    curve(x - 50, y, x + 50, y, x + 50, y + 50, x - 50, y);
    //white circle;
    fill(255);
    circle(x, y, 15);
    //muted blue color rectangle;
    fill(92, 143, 191);
    rect(x - 50, y - 70, 20, 40);
    //muted red color rectangle;
    fill(182, 30, 40);
    rect(x + 30, y + 30, 20, 40);
    //reddish lines;
    fill(196, 59, 62);
    strokeWeight(4);
    line(x - 40, y - 10, x - 5, y - 40);
    line(x - 35, y - 5, x, y - 35);
    line(x + 5, y + 40, x + 40, y + 10);
    line(x, y + 35, x + 35, y + 5);
    //muted green triangles;
    strokeWeight(1);
    fill(62, 167, 32);
    triangle(x + 45, y + 50, x + 25, y + 70, x - 15, y + 60);
    triangle(x - 45, y - 50, x - 25, y - 70, x + 15, y - 60);
    //second set of connecting lines;
    line(x, y, y - 40, y + 40);
    line(x, y, y + 40, y - 40);
    noFill();
    curve(x, y, x - 40, y + 40, x - 50, y, x, y);
    curve(x, y, x + 40, y - 40, x + 50, y, x, y);
    //yellow ellipse tilted using push/pop;
    push();
    translate(x - 30, y + 50);
    rotate(radians(45));
    fill(217, 227, 10);
    ellipse(0, 0, 20, 50);
    pop();
    //orange ellipse tilted using push/pop;
    push();
    translate(x + 30, y - 50);
    rotate(radians(45));
    fill(226, 160, 29);
    ellipse(0, 0, 20, 50);
    pop();

    pop();
    noLoop();
}

function pattern2 (x, y){
    //scaled it down by 0.5 as well;
    //also encased it in a push/pop to allow scaling;
    push();
    scale(0.5);

    //draws aquamarine rectangle;
    fill(69, 166, 159);
    rectMode(CENTER);
    rect(x, y, 30, 30);
    //draws connecting lines;
    line(x - 20, y + 15, x - 35, y + 35);
    line(x + 20, y - 15, x + 35, y - 35);
    line(x + 35, y - 35, x - 15, y - 35);
    line(x - 35, y + 35, x + 15, y + 35);
    line(x - 20, y + 15, x - 20, y - 15);
    line(x + 20, y - 15, x + 20, y + 15);
    //draws muted pink circles;
    fill(153, 139, 102);
    circle(x - 35, y - 35, 40);
    circle(x + 35, y + 35, 40);
    //draws muted reddish triangles;
    fill(196, 59, 62);
    triangle(x - 20, y - 15, x - 30, y + 20, x - 60, y);
    triangle(x + 20, y + 15, x + 30, y - 20, x + 60, y);
    //draws tilted muted yellow rectangles;
    fill(187, 164, 91);
    push();
    translate(x - 10, y + 40);
    rotate(radians(315));
    rect(0, 0, 20, 30);
    pop();
    push();
    translate(x + 10, y - 40);
    rotate(radians(315));
    rect(0, 0, 20, 30);
    pop();

    pop();
}

I based it off of the early 20th Century Russian Art Movement known as Suprematism. I had the most fun so far creating this Program. Overall, it is very simple in terms of its creation. I just used pre-defined shapes and muted colors. I also used push/pop transformations to angle somethings and to make the main two patterns fit better on the 600×600 canvas.