Alec Albright – Project 05 – Wallpaper

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 5 - Wallpaper

var diamondH = 10; // height of the diamonds
var diamondW = 10; // width of the diamonds
var diaMargin = 5; // space between a diamond and its outline
var thickStripe = 20; // stroke weight of the thick stripe
var thinStripe = 3; // stroke weight of the thin stripe

function setup(){
    createCanvas(500, 500);
    angleMode(DEGREES);
}

function draw(){
    background("skyblue");

    // drawing the diamonds
    // controling rows
    for(x = 0; x < 550; x += 25){
        // controlling number of diagonal lines
        for(y = -500; y < 500; y += 175){
            drawDiamond(x + y , x);
        }
    }

    // drawing the stripes
    for(x = -100; x < 550; x += 175){
        for(y = 0; y < 500; y += 175){
            drawStripes(x, y);
        }
    }
    noLoop();
}

// draws one diamond and its outline
function drawDiamond(x, y){
    strokeWeight(1);
    stroke("black")
    push();
    translate(x, y);

    rotate(135);
    // diamond
    fill("orange");
    rect(diaMargin, diaMargin, diamondW, diamondH);

    // outline
    // makes the rectangle transparent
    fill(0, 0, 0, 0);
    rect(0, 0, diamondW, diamondH);

    pop();
}

// draws big and little stripes to fill gaps of the diamonds
function drawStripes(x, y){
    // drawing first big stripe
    stroke("white");
    strokeWeight(thickStripe);
    line(x, y, x + 500, y + 500);

    // little stripe
    stroke("orange");
    strokeWeight(thinStripe);
    line(x + 30, y, x + 530, y + 500)

    // other big stripe
    stroke("white");
    strokeWeight(thickStripe);
    line(x + 60, y, x + 560, y + 500);
}

I originally sketched this to include less frequent diagonals of the diamonds, but upon creation I really liked the contrast between the horizontal positioning of the diamonds and the diagonal positioning of the stripes. I also wanted to implement a vibrant color palette, which manifested itself as light blue, orange, and white. My biggest difficulty in creating this wallpaper was dealing with replicating the diagonals. Particularly, the diamonds were difficult because I rotated them upon drawing them, so their coordinate system became harder to keep track of.

Below is my original sketch: