Rachel Shin – Project 05 – Wallpaper

reshin-project05

/*Rachel Shin
	reshin@andrew.cmu.edu
	15-104 Section B
	Project 05- Wallpaper
*/

var spacing;

function setup(){
    createCanvas(400, 400);
    background(235, 234, 223);
    spacing = 50;
}


function draw(){
    for (var y = 0; y < height - (spacing/2); y += spacing/2) { //dotted background, adjusted to fit entire circle, avoid cut offs
    	for (var x = 0; x < width-(spacing/2); x += spacing/2){
    		noStroke();
    		fill(255);
    		ellipse(x+(spacing/2), y+(spacing/2), spacing/5, spacing/5);
    	}
    }

    for (var y = 0; y < height; y += spacing){ //burgundy rounded rectangles
    	for (var x = 0; x < width; x += spacing) {
    		stroke(112, 107, 105);
    		noFill();
    		square (x + (spacing/5), y + (spacing/5), spacing/3, 2);
    	}
    }

    for (var y = 0; y < height; y += spacing) { //sky blue trapezoids across canvas
        for (var x = 0; x < width; x += 70) {
        	noStroke();
        	fill(167, 200, 212);
            quad(x + (spacing/5), y + (spacing/5), x + spacing, y + spacing, x + spacing, y + (spacing+10), x + (spacing/5), y + spacing);
        }}

        noLoop();
}

While thinking of ways to code and design this project, I decided to layer various geometric shapes to create a cohesive visual of repeated patterns of circles, trapezoids, and rounded rectangles. I found it interesting how I was able to recreate this sketch by figuring out how layers of shapes interacted to create this pattern.