Project-05: Wallpaper

zimmy wallpaper


function setup() {
    createCanvas(600, 600);
    background(254, 218, 187);
}

function draw() {

	for(var x = 0; x <= 600; x += 150){
	    for(var y = 0; y <= 650; y += 104){
		    shoe(x, y);
		}

    }
}

function shoe(x, y) {
    push();
    translate(x, y);
	noStroke();
	strokeWeight(1);
	fill(255, 187, 220);
	circle(85, -10, 63);
	fill(255);
	rect(0, 0, 80, 30); // lower body of shoe
	fill(207);
	arc(0, 30, 60, 60, -PI, 0); // grey toe
	fill(255);
	arc(10, 30, 60, 60, -PI, 0); // white toe
	rect(50, -30, 30, 60); // upper body
	// main body of shoe

	fill(54, 85, 165);
	arc(30, 14, 20, 20, radians(40), radians(220));
	triangle(28, 15, 36, 22, 75, -9);
	fill(255);
	circle(28, 8, 13);
	// nike check

	stroke(207);
	ellipse(32, -14, 47, 40);
	fill(254, 218, 187);
	noStroke();
	ellipse(23, -26, 56, 55);
	// lace section

	fill(240);
	rect(-30, 27, 110, 7);
	fill(207);
	triangle(-17, 27, -5, 20, 20, 27);
	arc(80, -30, 25, 28, PI/2, PI);
	// sole and heel patch

	stroke(240);
	strokeWeight(5);
	strokeCap(ROUND);
	noFill();
	/* line(50, -15, 60, 15);
	line(100, 0, 100, 50); */ 

	bezier(47, -20, 20, -45, -20, 10, -35, -52);
	bezier(50, -10, 60, 15, 100, 0, 115, 52);
	// shoelaces

    pop();

}


For this wallpaper, I took inspiration from the shoes I was wearing that day and decided to turn them into a stylized illustration. The whole shoe is illustrated in one function, based on an initial illustration I made in Adobe Illustrator. The most difficult aspect of drawing the shoe was figuring out how to accurately recreate the nike check using the shapes and forms afforded by Javascript, as well as drawing the bezier curves that make up the laces. Afterward, I was able to use some of the hexagon assignment to inform the for loop, and adjusted the start/end points for the laces to make them meet.

2 thoughts on “Project-05: Wallpaper”

Leave a Reply