Project-05-Wallpaper – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 5: Wallpaper

//Elise Chapman
//ejchapma
//Section D

function setup() {
    createCanvas(200,600);
    background(158,98,64);
    rectMode(CENTER);
}

//light brown: 222,164,126
//red: 205,70,49
//cream: 248,242,220
//blue: 129,173,200
//dark blue: 118,148,159
//wine: 65,11,19

function draw() {
    for (var snowNum=0; snowNum<=50; snowNum+=1) {
        var xPos=random(0,width);
        var yPos=random(0,height);
        interest(xPos,yPos);
    }
    for (var x=0; x<=width; x+=100){
        for (var y=0; y<=height; y+=180) {
            flower(x,y);
        }
    }
    for (var x=50; x<=width; x+=100) {
        for (var y=90; y<=height; y+=180) {
            star(x,y);
        }
    }
    noLoop();
}

function interest(x,y) {
    push();
    translate(x,y);
    noStroke();
    fill(144,82,45);
    ellipse(0,0,20);
    pop();
}

function diamond(x,y) {
    push();
    translate(x,y);
    strokeWeight(8);
    stroke(222,164,126);
    line(0,90,50,0);
    line(50,0,0,-90);
    line(0,-90,-50,0);
    line(-50,0,0,90);
    /*starPiece(60,100);
    rotate(radians(90));
    starPiece(100,60);
    rotate(radians(90));
    starPiece(60,100);
    rotate(radians(90));
    starPiece(100,60);*/
    pop();
}

function star(x,y) {
    push();
    translate(x,y);
    strokeWeight(4);
    stroke(106,146,161); //dark blue
    fill(129,173,200); //light blue
    ellipse(0,0,70);
    ellipse(0,0,50);
    ellipse(0,0,30);
    strokeWeight(2);
    push();
    rotate(radians(45));
    triangle(-9,9,0,30,9,9);
    triangle(-9,-9,0,-30,9,-9);
    triangle(-9,-9,-30,0,-9,9);
    triangle(9,-9,30,0,9,9);
    pop();
    triangle(-9,9,0,35,9,9);
    triangle(-9,-9,0,-35,9,-9);
    triangle(-9,-9,-35,0,-9,9);
    triangle(9,-9,35,0,9,9);
    fill(106,146,161);
    rect(0,0,15,15);
    pop();
}

function flower(x,y) {
    push();
    translate(x,y);
    strokeWeight(2);
    stroke(91,26,36);
    fill(91,26,36); //wine
    ellipse(0,0,70);
    fill(205,70,49); //red
    push();
    rotate(radians(45));
    rect(0,-15,25,40,80,80,80,80);
    rect(-15,0,40,25,80,80,80,80);
    rect(0,15,25,40,80,80,80,80);
    rect(15,0,40,25,80,80,80,80);
    rect(0,-15,4,20,80,80,80,80);
    rect(-15,0,20,4,80,80,80,80);
    rect(0,15,4,20,80,80,80,80);
    rect(15,0,20,4,80,80,80,80);
    pop();
    rect(0,-15,25,40,80,80,80,80);
    rect(-15,0,40,25,80,80,80,80);
    rect(0,15,25,40,80,80,80,80);
    rect(15,0,40,25,80,80,80,80);
    rect(0,-15,6,20,80,80,80,80);
    rect(-15,0,20,6,80,80,80,80);
    rect(0,15,6,20,80,80,80,80);
    rect(15,0,20,6,80,80,80,80);
    ellipse(0,0,30);
    push();
    rotate(radians(45));
    ellipse(0,10,7);
    ellipse(0,-10,7);
    ellipse(10,0,7);
    ellipse(-10,0,7);
    pop();
    ellipse(0,10,7);
    ellipse(0,-10,7);
    ellipse(10,0,7);
    ellipse(-10,0,7);
    ellipse(0,0,10);
    diamond(0,0);
    pop();
}

I love Japanese paper wallpapers from the 1920’s and 1930’s, so I chose them as my particular inspiration for this work. I love the inspiration from nature while keeping with a more geometric feel, consistent with traditional Japanese art. Something about them feels timeless and elegant, but not boring. In particular, these two wallpapers inspired me:

Panel wallpaper with floating circular designs

Panel wallpaper alternating between ornate rectangular strips and simple floating circular designs

The sketch I drew out before approaching the code was as follows:

Simple sketch of overall layout, as well as potential circle fills

I also decided to include color in my design. I’m personally attracted to a lot of primary color schemes, but didn’t want to play too far into that for fear of my wallpaper looking too discordant from my Japanese inspiration. So, I settled on a dark red and a warm blue.

Project 05: Wallpaper

project 5 sketch copy


function setup() {
    createCanvas(400, 400);
    background(204, 229, 255);
}

function draw() {
  //criss cross line background
  for (y = 0; y < height + 25; y += 50) {
        for (x = 0; x < width + 25; x += 50) {
            var llength = 25;
            strokeWeight(4);
            stroke(102, 178, 255);
            line(x - llength, y - llength, x + llength, y + llength);
            line(x - llength, y + llength, x + llength, y - llength);
        }
    }
    //ice cream cones
    noStroke();
    for(var a = 25; a < width; a += 50) {
        for(var b = 25; b < width; b += 100) {
            drawcone(a, b);
        }
    }
    //rasberry ice cream scoops
    for(var c = 25; c < width; c += 50) {
        for(var d = 30; d < height; d += 100) {
            rasberryscoop(c,d);
        }
    //chocolate ice cream scoops
     for(var e = 75; e < width; e += 100) {
        for(var f = 30; f < height; f += 100) {
            chocolatescoop(e,f);
        }
     }
     
    //white dots 
      for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 6; x++) {
            fill(255);
            circle(x * 100 + 50, y *100 + 50, 7);
            noLoop();
      }
    }
  }
}

function drawcone(a, b) {
    fill(255, 204, 153);
    triangle(a - 7, b + 10, a, b + 30, a + 7, b + 10);
}

function rasberryscoop(c, d) {
    fill(255, 102, 178);
    circle(c, d, 18);
}

function chocolatescoop(e, f) {
    fill(102, 51, 0);
    circle(e, f, 18);
}

When I began thinking of a design to create, I was pretty hungry so naturally I had my main pattern be a dessert. Originally my background was going to be vertical straight lines but I ended up making them diagonal to create a criss-cross look. I knew I wanted to incorporate alternating color scoops, and since we have had a good amount of practice with this it wasn’t hard to code. I thought having dots at some of the intersections of the blue lines would be nice, so I added that.

Project 05: Wallpaper

sketch

//Catherine Liu
//jianingl
//Section D

var catList = [1, 2, 3]; //keeps track of cat for genration of wallpaper

function setup() {
    createCanvas(600, 600);
    background(230,230,250);
}

function draw() {
    for (var y = 30; y <= 600; y += 100) {
        for (var x = 50; x <= 550; x += 150) {
            var cat = random(catList); //randomly generates a cat at that position
            if (cat == 1) {
                CatStand(x,y);
            } else if (cat == 2) {
                CatFront(x,y);
            } else if (cat == 3) {
                CatSit(x,y);
            }
        }
    }
    noLoop()
}

function CatStand (x, y) {
    strokeWeight(2);
    push();
    noFill();
    strokeWeight(5);
    stroke(233,150,122);
    arc(x + 60, y-20, 50, 50, 0, HALF_PI); //tail
    pop();

    stroke(139,69,19)
    fill(233,150,122);
    ellipse(x+60, y + 40, 5, 20); // back left leg
    ellipse(x+10, y + 40, 5, 20); // left front leg
    ellipse(x + 40, y + 20, 80, 50); //body
    triangle(x + 15, y - 15, x + 30, y - 25, x + 25, y - 5); // right ear
    triangle(x - 15, y - 15, x - 30, y - 25, x - 25, y - 5); // left ear
    ellipse(x, y, 50, 40); //head
    ellipse(x+70, y + 42, 5, 20); //back right leg
    ellipse(x+18, y + 43, 5, 20); // right front leg

    fill(100,107,47);
    ellipse(x-15, y, 10, 5); //left eye
    ellipse(x+5, y, 10, 5); //right eye
    fill(205,92,92);
    ellipse(x-7, y+5, 5, 3); //nose

    stroke(0,100,0);
    fill(50,205,50);
    circle(x-20, y+50, 10);
    push();
    noFill();
    arc(x -65, y+45, 50, 50, 0, HALF_PI);
    pop();
    circle(x-35, y +50, 15);
    push();
    noFill();
    arc(x + 83, y-20, 50, 50, 0, HALF_PI);
    pop();
    circle(x+ 85, y+3, 8);

}

function CatFront (x, y) {
    strokeWeight(2);
    push();
    noFill();
    strokeWeight(5);
    stroke(139,69,19);
    arc(x + 45, y-20, 50, 50, 0, HALF_PI); //tail
    pop();

    stroke(139,69,19)
    fill(255,218,185);
    ellipse(x+10, y+10, 90, 70); //body
    triangle(x + 15, y - 15, x + 30, y - 25, x + 25, y - 5); // right ear
    triangle(x - 15, y - 15, x - 30, y - 25, x - 25, y - 5); // left ear
    ellipse(x, y, 50, 40); //head
    fill(119,136,153);
    ellipse(x-15, y, 10, 5); //left eye
    ellipse(x+5, y, 10, 5); //right eye
    fill(244,164,96);
    ellipse(x-7, y+5, 5, 3); //nose


    fill(255,218,185);
    ellipse(x + 35, y + 40, 20, 10); // right leg
    ellipse(x - 10, y + 40, 20, 10); // left leg

    stroke(70,130,180);
    push();
    noFill();
    arc(x -60, y+45, 50, 50, 0, HALF_PI);
    arc(x + 80, y+15, 50, 50, 0, HALF_PI)
    pop();
    fill(135,206,235);
    circle(x-30, y+45, 10);
    circle(x+80, y+45, 15);
}

function CatSit (x, y) {
    strokeWeight(2);
    push();
    noFill();
    strokeWeight(5);
    stroke(119,136,153);
    arc(x + 60, y-10, 50, 50, 0, HALF_PI); //tail
    pop();

    stroke(139,69,19);
    fill(119,136,153);
    ellipse(x+5, y+50, 10, 20); //front right leg
    ellipse(x+30, y+30, 70, 60); //body
    ellipse(x+45, y+50, 30, 20); //back leg
    ellipse(x+15, y+50, 10, 20); //front left leg
    triangle(x + 15, y - 15, x + 30, y - 25, x + 25, y - 5); // right ear
    triangle(x - 15, y - 15, x - 30, y - 25, x - 25, y - 5); // left ear
    ellipse(x, y, 50, 40); //head
    fill(0,100,0)
    ellipse(x, y, 10, 5); //left eye
    ellipse(x-15, y, 10, 5); //right eye
    fill(40,26,13)
    ellipse(x-7, y+5, 5, 3); //nose

    stroke(75,0,130);
    fill(147,112,219);
    circle(x+60, y-15, 15);
    circle(x+75, y-15, 15);
    ellipse(x+75, y-5, 10, 5);
    ellipse(x+60, y-5, 10, 5);

    push();
    strokeWeight(3)
    line(x+67, y-15,x+67, y-5);
    pop();

    push();
    noFill();
    arc(x -65, y+45, 50, 50, 0, HALF_PI);
    pop();
    circle(x-35, y +50, 15);
}

Before creating this wallpaper, one of my friends from home called me and showed me pictures of her cats. In the spur of the moment, I thought that it’d be cute to create a wallpaper full of cats. I also thought it would be cool if the wallpaper could generate different versions of itself. For this, I created 3 different cats and had the draw function choose a random cat to draw each time it ran through the 2 for loops. For each cat, I drew up a quick sketch of what I wanted each cat to look like and added some decorative yarn and butterflies to make them look more like wallpaper:

quick sketches of different cat positions

Project 5: Wallpaper

sketch Download

// Yash Mittal
// Section D

var x = 95;
var y = 95;

function setup() {
    createCanvas(600, 600);
    background (232, 217, 203);

    noLoop();
}

function draw() { 

    for (var col = 0.95; col <= 10; col = col + 2) {

        for (var row = 1.3; row <= 9; row = row + 2) {

           lion (x * 0.8 * col, y * row); 
        }
    }

}


function lion (x, y) {

    noStroke();

    fill (250, 68, 9);
    ellipse (x - 35, y + 35, 50, 50); // mane circle 1
    ellipse (x - 55, y + 2, 43, 45); // mane circle 2
    ellipse (x - 43, y - 39, 55, 50); // mane circle 3
    ellipse (x - 10, y - 63, 53, 53); // mane circle 4
    ellipse (x + 32, y - 50, 53, 53); // mane circle 5
    ellipse (x + 52, y - 10, 50, 50); // mane cirlce 6
    ellipse (x + 40, y + 30, 50, 50); // mane circle  7
    ellipse (x + 5, y + 50, 55, 55); // mane circle 8

    fill (254, 146, 9); // orange face 
    ellipse (x, y, 96, 90); // background of face  

    fill (59, 23, 9); // dark brown  
    ellipse (x - 25, y, 8, 12); // left eye
    ellipse (x + 25, y, 8, 12); // right eye

    fill (255, 209, 53); 
    ellipse (x, y + 5, 16, 35); // nose highlight 

    fill (255);
    ellipse (x, y + 20, 33, 22); // mouse background 

    fill (53, 22, 3);
    ellipse (x, y + 13, 20, 8); // nose

    rect (x - 1, y + 13, 1, 9); // line from nose to mouth

    strokeWeight (1);
    stroke (53, 22, 3);
    line (x - 6, y + 23, x + 6, y + 21); // mouth smile

    fill (255);
    noStroke ();
    ellipse (x - 26.5, y - 3, 3, 5); // left eye highlight
    ellipse (x + 23.5, y - 3, 3, 5); // right eye highlight

    fill (255, 170, 187); 
    ellipse (x - 25, y + 15, 12, 12); // left cheek highlights
    ellipse (x + 25, y + 15, 12, 12); // right cheek highlights

    fill (254, 146, 9);
    ellipse (x - 30, y - 40, 18, 18); // left ear base 
    ellipse (x + 30, y - 40, 18, 18); // right ear base

    fill (255, 209, 53);
    ellipse (x - 30, y - 40, 10, 10); // left ear highlight
    ellipse (x + 30, y - 40, 10, 10); // right ear highlight

     
}

I made a lion wallpaper for this project. I started off with drawing my ideas out and then I started making the different elements of the face. Next, I created the loops to repeat the pattern, which took a little bit of time because I got confused with the numbers.

Project 5: Wallpaper

sketch



//i was inspired by beaches and shells that found there cause i am from Socal

var wValue= []; 
var e = 100;
var j = e;

function setup() {
  var canvas = createCanvas(600, 220);  
 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      var object = {};
      
      //colors
      object.r = random(0, 255);
      object.g = random(0,255);
      object.b = random(0, 255);
      //sizes
      object.s = random(40, 50);
      
            wValue.push(object);
    }
  }
}

function draw() {
  pattern();
}

function pattern() {

  background(0, 0, 0);


  var counter = 0; 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      //colors
      let val = wValue[counter];
      counter++; // count to next object for next loop
      
      let r = val.r;
      let g = val.g;
      let b = val.b

      //sizes
      let s = val.s;

      push();
      scale(0.4);
      translate(x, y + 80);
      stroke(r, g, b);
      strokeWeight(5);
      noFill();
      for (let i = 0; i < 10; i++) {
        fill(255);
        ellipse(9, 20, s, s); //shell
        rotate(PI / 4);
      }
      pop();
      
       
    }
  }
}

Project 05 – Wallpaper

sketch

//gnmarino
//Gia Marino
//Section D

var sizeChange = .1; //makes everything 1/10th the original size

function setup() {
    createCanvas(600, 600);
    background(121, 181, 177); //cyan

}

function draw() {

    fill(250, 250, 236); //cream
    stroke(169, 96, 0); //dark orange

    scale(sizeChange);

    // makes the 1st row of mandalas and alternates every other row 
    // continues till it reaches border of canvas
    for (var xSpacing = 0; xSpacing < 10000; xSpacing += 900){
        for (var ySpacing = 0; ySpacing < 10000; ySpacing += 1800){
            //push and pop makes it so spacing doesn't compound
            push();
            mandala(xSpacing, ySpacing);
            pop();
            
        }
    }

    // makes 2nd row of mandalas and alternates every other row 
    //continues till it reaches the point where it will not be on the page
    for (var xSpacing = -450; xSpacing < 9000; xSpacing += 900){
        for (var ySpacing = 900; ySpacing < 10000; ySpacing += 1800){
            //push and pop makes it so spacing doesn't compound
            push();
            mandala(xSpacing, ySpacing);
            pop();
        }
    }
    //draws diamond pattern
    for (var dxSpacing = 450; dxSpacing < 9000; dxSpacing += 900){
       for (var dySpacing = 450; dySpacing < 10000; dySpacing += 900) {
           //push and pop makes it so spacing doesn't compound
           push();
           diamond(dxSpacing, dySpacing);
           pop();
        }
    }

    noLoop();
}

function diamond (x2, y2) {
    // translate with parameters allows the loop functions in draw to move the whole design easily
    translate(x2, y2);

    //push and pop to avoid settings effecting other functions
    push();
    translate (300, 300);
    noStroke();
    fill(169, 96, 0); //dark orange
    triangle (-30, 0, 30, 0, 0, 30);
    triangle(-30, 0, 30, 0, 0, -30);

    pop();
}

function mandala(x, y) {
    // translate with parameters allows the loop functions in draw to move the whole design easily
    translate (x, y);

    //whole shape is roughly 500 X 600 pixels before scaling
    threeLeafShape();
    circleBorder();
    flowerAndCircle();
}

function threeLeafShape() {
 
    //push pop makes it so the settings in this function doesn't effect other functions
    push();
   
    //moves top leaf to the middle of the mandala
    translate(200, 0);
    strokeWeight(5);

    //draws top leaf
    beginShape();
    vertex(100, 200);
    quadraticVertex(70, 125, 0, 100);
    quadraticVertex(60, 90, 85, 115);
    quadraticVertex(90, 40, 50, 20);
    quadraticVertex(115, 40, 115, 115);
    quadraticVertex(135, 85, 175, 80);
    quadraticVertex(120, 125, 100, 200);
    endShape();

    //push pop makes it so the translation and rotation for the bottom leaf does not effect top leaf
    push();
    //translate and rotate moves bottom leaf so it's mirrored directly undernenth top leaf
    translate(200, 600);
    rotate(radians(180));

    //draws bottom leaf
    beginShape();
    vertex(100, 200);
    quadraticVertex(70, 125, 0, 100);
    quadraticVertex(60, 90, 85, 115);
    quadraticVertex(90, 40, 50, 20);
    quadraticVertex(115, 40, 115, 115);
    quadraticVertex(135, 85, 175, 80);
    quadraticVertex(120, 125, 100, 200);
    endShape();

    pop ();

    pop();

}

function circleBorder () {

    //push pop makes it so the settings in this function doesn't effect other functions
    push();
    
    //translate to center of canvas to make it easier to make a border in a circular formation
    translate(300, 300);
    strokeWeight(4);

    //radius of basline circle for the tiny circles to follow and make a border along 
    var r = 250;
    
    //makes tiny circle border on right side
    //constrained from theta -55 to theta 55 so circles do not collide with the 2 leaf shapes
    for (var theta = -55; theta < 55; theta += 15) {
        cx = r * cos(radians(theta));
        cy = r * sin(radians(theta));
        circle(cx, cy, 40);
        
    }
    //makes tiny circle border on left side
    //constrained from theta 125 to theta 235 so circles do not collide with the 2 leaf shapes
    for (var theta = 125; theta < 235; theta += 15) {
        cx = r * cos(radians(theta));
        cy = r * sin(radians(theta));
        circle(cx, cy, 40);
        
    }

    pop();
}

function flowerAndCircle () {

    //(push pop 1)push and pop make it so translated origin does not effect next function
    push();
    

    //puts origin in center so it is easier to draw in a circular formation
    translate (300, 300);

    //circle around flower
    //push and pop so nofill doesn't effect flower
    push(); 
    noFill();
    strokeWeight(5);
    circle(0, 0, 200);
    pop();

    //flower center
    strokeWeight(5);
    circle (0, 0, 35); 

    //draws 8 flower petals that rotates around the center origin
    for (theta = 30; theta <= 360; theta += 45){
    //(push pop 2) 
    //the push and pop in this loop makes it so it rotates only 45 each time and not 45 + theta
    push(); 
    rotate(radians(theta));
    ellipse( 55, 0, 45, 20);
    //pop uses push 2
    pop();
    }
    //this pop uses push 1
    pop();
}

I started off with deciding a design that I could then repeat over and over. Then after I decided, I made the design in a 500×600 pixels dimensions. Then I scaled it down and looped it. Then I felt like the pattern needed something in-between the mandala I created so I made a diamond and made a separate nested loop to repeat it so it went in the empty spaces. I had to make two nested loops for the mandala so the columns were staggered and not lined up perfectly. For the circle border I used polar coordinates so I could space it out and also not have to complete the circle. But for the flower I had to use rotation so the ellipse turned and went in a circle.

Project-05

sketch

//Nami Numoto
//Section A
//mnumoto

var x = 0;
var y = 0;

function setup() {
    createCanvas(600, 300);
    background(191, 231, 242); //pastel blue
}

function kirby(x, y) {
    stroke(0); //black outline
    fill(224, 0, 91); //kirby feet pink! (feet come first because layers)
    ellipse(x + 20, y + 35, 40, 20);
    ellipse(x - 20, y + 35, 40, 20);
    fill(243, 165, 170); //kirby main body/face pink! + arms as well
    ellipse(x + 40, y + 10, 30, 25); //right arm ellipse
    ellipse(x - 40, y + 10, 30, 25); //left arm ellipse
    ellipse(x, y, 80, 80); //face ellipse
    fill(235, 104, 150); //kirby blush pink!
    ellipse(x - 20, y, 10, 5);
    ellipse(x + 20, y, 10, 5);
    //eyes going like ^^
    line(x + 8, y - 5, x + 12, y - 15); //right
    line(x + 12, y - 15, x + 16, y - 5);
    line(x - 8, y - 5, x - 12, y - 15); //left
    line(x - 12, y - 15, x - 16, y - 5);
    //i don't think i like the mouth actually, not with the ^^ eyes.. leave it off
}

function draw() {
    //set of loops for more-unit columns
    for(let i = 0; i <= 3; i += 1) {
        for(let column = 0; column <= 4; column += 1) {
            kirby(x + (200 * column), y + i * 100);
        }
    }
    //set of loops for less-unit columns
    for(let i = 0; i <= 2; i += 1) {
        for(let column = 0; column <= 3; column += 1) {
            kirby(x + (200 * column) + 100, y + i * 100 + 50);
        }
    }
}

I’ve made a Kirby wallpaper – I didn’t want to copy Kirby in his original form exactly, so I made him smiling with his eyes 🙂

This was a lot of fun, I hope to make more drawings like this.

Project 5: Wallpaper

sketch

// John Henley; jhenley; 15-104 section D

function setup() {
    createCanvas(590, 395);
    background(0);
}

function draw() {
    for (var x = 10; x <= 590; x+= 30) { // vertical lines
        linesVertical(x);
    }
    for (var y = 10; y <= 390; y += 30) { // horizontal lines
        linesHorizontal(y);
    }
    for (var y = 10; y <= 390; y += 15) { // circles columns
        for (var x = 10; x <= 590; x+= 15) { // circles rows
            circles(x, y);
        }
    }
noLoop();
}   

function circles(x, y) { //circle function
    stroke(0);
    fill(random(0, 255));
    circle(x,y,random(5, 15));
}

function linesVertical(x) { //vertical lines function (random lengths)
    stroke(255);
    line(x, random(0, 390), x, random(0,390));
}

function linesHorizontal(y) { //horizontal lines function (random lengths)
    line (random(0, 590), y, random(0,590), y)
}

For my wallpaper, I wanted to make a row of lit up circles, almost like an old-fashioned light-up sign. Each of the circles is like a bulb, and despite the pattern with the “for” loops, I made it so the diameter of the circles was chosen randomly to make the image’s picture seemingly change with each refresh. To add visual interest, I added perpendicular lines, chosen with random lengths, cutting through the circles.

Project 5

sketch


// Michelle Dang
// Section D
//mtdang@andrew.cmu.edu
//Assignment-05-A
var s = 30;

function setup() {
    createCanvas(600, 600);
    background(231, 194, 105);
}
function draw() {
    //shape 1 loop
        for (var y = 100; y<600; y+=100) {
            for (var x = 100; x< 600; x+=100) {
                shape1(x, y);
            }
        }
//shape 2 loop
      for (var y = 50; y<600; y+=100) {
            for (var x = 50; x< 600; x+=100) {
                shape2(x,y);
            }
        }
}
//shape with blue rectangle 
function shape1(x, y) {
    fill(245, 161, 97);
    ellipse(x, y,  s+50, s);
    ellipse(x, y, s, s+50);

    fill(232, 109, 78)
    ellipse(x, y, 50, 50)
    ellipse(x, y, 50, s);
    ellipse(x, y, s, 50);

    fill(150, 150, 86);
    ellipse(x, y, 10, 10);
}
//shape with salmon-colored middle
function shape2(x,y) {
    fill(39, 68, 86);
    rect(x-25, y-25, 50, 50);   

    fill(150, 100, 150);
    ellipse(x, y,  s+50, s);
    ellipse(x, y, s, s+50);

    noFill();
    ellipse(x, y, s, s);
    ellipse(x, y, s, 50);

    fill(100, 100, 255);
    ellipse(x, y, 10, 10);

}
noLoop();

I took inspiration from kaleidoscopes.

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.