Wallpaper

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.

Leave a Reply