sketchDownload
function setup() {
createCanvas(400, 600);
background(182, 217, 214);
}
function draw() {
noStroke();
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 6; j++) {
fill(140, 110, 60);
square(20+(i*100), 60+(j*100), 30);
rect(20+(i*100), 20+(j*100), 5, 40);
triangle(20+(i*100), 60+(j*100), 50+(i*100), 60+(j*100), 50+(i*100), 40+(j*100));
circle(55+(i*100), 45+(j*100), 30);
triangle(40+(i*100), 45+(j*100), 50+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
triangle(70+(i*100), 45+(j*100), 60+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
fill(255, 222, 33);
ellipse(50+(i*100), 45+(j*100), 5, 10);
ellipse(60+(i*100), 45+(j*100), 5, 10);
fill(56, 83, 130);
ellipse(70+(i*100), 80+(j*100), 25, 10);
triangle(80+(i*100), 80+(j*100), 90+(i*100), 70+(j*100), 90+(i*100), 90+(j*100));
}
}
noLoop();
}
I knew immediately that I wanted to do a cat patterned wallpaper. First I tried to break down what shapes I needed to represent a cat. Everything went well and I was able to draw it with p5js. I felt like it was missing something, so I added a fish for the cat to snack on. Once I drew the first cat and fish combo, put it in a nested for loop and changed the coordinates for each iteration. This quickly drew all of my cats for the complete wallpaper.