Project 5: Wallpaper

luca wallpaper

var xp = 50;//startingx
var yp = 50;//startingy


function setup() {
    createCanvas(600, 600);
    angleMode(DEGREES);//using degrees instead of radians
}

function draw(){
    background(237, 224, 212);
    noStroke();
    for (var row = 0; row <= 10; row++){
        for (var col = 0; col <= 10; col++){
            drawCougar(row*90, col*90);//loop drawing
        }

    function drawCougar(x, y){
            push();
            translate(x-20, y-20);
            fill(221, 184, 146);
            ellipse(xp-20,yp-15,20,30);
            ellipse(xp+20,yp-15,20,30);
            
            fill(127, 85, 57);
            ellipse(xp,yp+20,35,30);//front mouth
            ellipse(xp-20,yp-15,20,30);
            ellipse(xp+20,yp-15,20,30);


            fill(176, 137, 104);
            ellipse(xp,yp,60,60);//head
            
            push();
            translate(10,10);
            rotate(7);
            fill(221, 184, 146);
            ellipse(xp-10,yp+5,20,27);//left mouth
            pop();

            push();
            rotate(353);
            fill(221, 184, 146);
            ellipse(xp,yp+25,20,27);//right mouth
            pop();

            fill(0);
            ellipse(xp-20,yp,5,10);//left eye
            ellipse(xp+20,yp,5,10);//right eye
            ellipse(xp,yp+5,20,10);//nose
            pop();
    }

 }   

}

I started the project by sketching out ideas. Then, I moved to p5.js and created one drawing, and embedded a loop to make it repeat, creating the pattern and effect. I think figuring out how to employ a for loop was the most challenging for me. However, I really liked how my wallpaper turned out in the end. The project provided me with a better understanding of loops and functions.