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.
u amaze me
You amaze me too