Philip Gates – Project 05 – Wallpaper

sketch

var xSpacing = 125; //horizontal distance between elements
var ySpacing = 100; //vertical distance between elements

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

function draw() {

    var stripeHeight = height/5; //set height of horizontal stripes

    //draw black stripes
    fill(0); 
    rect(0, 0, width, stripeHeight);
    rect(0, 2 * stripeHeight, width, stripeHeight);
    rect(0, 4 * stripeHeight, width, stripeHeight);

    //draw blue stripes
    fill("deepskyblue");
    rect(0, stripeHeight, width, stripeHeight);
    rect(0, 3 * stripeHeight, width, stripeHeight);

    for (var y=0; y<5; y++) { //create 5 rows

        //even rows: draw moon & stars
        if (isEven(y)) {   
        for (var x=0; x<4; x++) {   //draw 4 columns
            var i = (x * xSpacing) + 50;  
            var j = (y * ySpacing) + 50;  
            moon(i, j);   //draw 
            starCluster(i + 25, j - 25);
        }
        
        //odd rows: draw sun
        } else {  
            for (var x=0; x<4; x++) {
                var a = (x * xSpacing) + 75;
                var b = (y * ySpacing) + 50;
                sun (a, b);
            }
        }
    }
}


//creates moon
function moon (x,y) {
noStroke();
fill("lemonchiffon");
arc (x,y,50,50,HALF_PI,(PI * 3/2));
fill(0);
arc (x,y,25,50,HALF_PI,(PI * 3/2))
}

//creates three stars
function starCluster (x,y) {
fill(255);
text ("*",x,y);
text ("*",x+10,y+10);
text ("*",x-5,y+18);
}

//creates sun
function sun (x,y) {
    noStroke();
    fill("yellow");
    ellipse(x,y,30,30);
    for (var angle=0; angle < 360; angle +=45) {
        stroke("yellow");
        strokeWeight(2);
        line(x, y, x + cos(radians(angle)) * 30, y - sin(radians(angle)) * 30);
        }
}

//tests for odd/even
function isEven (value) {
    return value % 2 == 0;
}

I am not a visual artist/designer and not the best at drawing, so I skipped straight to brainstorming shapes in code. I knew I wanted to work with some curved shapes since I didn’t entirely master the arc() function earlier in the semester. Playing around with arcs in p5.js led me to the moon shape, which gave me the idea of alternating day/night sky patterns. This week’s lessons on cos() and sin() came in handy when I was trying to draw the sun’s rays, as I was able to use these functions to create a simpler way of creating the circular lines than drawing each individually.