Project-05-Wallpaper

Project 5: Wallpaper

function setup() {
    createCanvas(600, 600);
    noLoop();
}

function draw() {
    background(249, 220, 180);

    //grid pattern background
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y <= height; y += 20) {
        push();
        translate(x, y);
        grid();
        pop();
        }
    }

    //columns of 4 eggs
    for (var x = 56; x <= 560; x += 164) {
        for (var y = 72; y <= 522; y += 150) {
        push();
        translate(x, y);
        rotate(radians(-20));
        egg();
        pop();
        }
    }

    //columns of 3 eggs
    for (var x = 140; x <= 470; x += 164) {
        for (var y = 150; y <= 450; y += 150) {
        push();
        translate(x, y);
        rotate(radians(30));
        scale(.85);
        egg();
        pop();
        }
    }

    //columns of 3 bacons
    for (var x = 50; x <= 546; x += 164) {
        for (var y = 144; y <= 450; y += 150) {
        push();
        translate(x, y);
        rotate(radians(20));
        scale(.5);
        bacon();
        pop();
        }
    }

    //columns of 4 bacons
    for (var x = 140; x <= 472; x += 162) {
        for (var y = 70; y <= 538; y += 152) {
        push();
        translate(x, y);
        rotate(radians(-280));
        scale(.7);
        bacon();
        pop();
        }
    }
}

function egg() {
    fill(255);  //white
    noStroke();
    ellipse(-11, -14, 40, 42);
    ellipse(-7, 21, 50, 48);
    beginShape();
    curveVertex(4, -28);
    curveVertex(4, -28);
    curveVertex(23, 10);
    curveVertex(9, 40);
    curveVertex(9, 40);
    endShape();
    beginShape();
    curveVertex(-27, -10);
    curveVertex(-27, -10);
    curveVertex(-10, -10);
    curveVertex(-27, 10);
    curveVertex(-27, 10);
    endShape();

    fill(255, 200, 100);  //yolk
    ellipse(-2, 5, 30);
    noFill();
    stroke(255);
    strokeWeight(3);
    arc(-2, 5, 20, 20, HALF_PI, PI);
}

function bacon() {
    noFill();
    strokeWeight(8);
    strokeCap(SQUARE);
    stroke(147, 73, 0);
    bezier(35, -25, -40, -40, 40, 40, -35, 35);
    push();
    translate(13, 13);
    bezier(35, -25, -40, -40, 40, 40, -35, 35);
    pop();
}

function grid() {
    rectMode(CENTER);
    noStroke();
    fill(255, 175, 148, 150);
    rect(0, 0, 17, 17);
}

For this project, I was inspired by my water bottle, which has an eggs and bacon design on it. I decided to make my own pattern and have included some of my initial sketches below. I wanted to play with custom shapes, specifically curveVertex and bezier curves, as well as arcs. To add visual interest, I experimented with shifts in scale and rotation in creating an alternating pattern of eggs and bacon.

sketch

//Jae Son, Section C, hyunjaes@andrew.cmu.edu,Project-05-Wallpaper

function setup() {
    createCanvas(600, 400);
    background(220);
}

function draw() {
  background(247,242,210); //beige background
  
  //columns of yellow square that have 2 squares
  for(y = 100; y <= 300 ; y += 200){
    for(x=0; x <= 600 ; x += 200){
      push();
      yellowbox(x,y);
      pop();
    }
  }
  
  //columns of yellow square that have 3 squares
  for (y = 0 ; y <= 400; y+=200){
    for (x=100; x < 600 ; x +=200) {
      push();
      yellowbox(x,y);
      pop();
    }
  }

  //green line that is rotated 7*PI/4
  for (y = 80; y >= -165; y -= 75){
    for (x = 142; x <= 568; x +=142){
      push();
      greenline(x,y);
      pop();
    }
  }
  
  //green line that is rotated PI/4
  for (x = -142; x <= 284; x +=142){
    push();
    greenline2(x,340);
    pop();
  }
  
  //columns of yellow square that have 2 squares
  for (y = 95; y <= 295; y += 200){
    for (x = -12; x <= 588; x +=200){
      push();
      heart(x,y);
      pop();
      }
    }
 
  //columns of heart shapes that have 3 heart shapes
  for (y = -5; y <= 395; y +=200 ){
    for(x=88; x<=488; x +=200){
      push();
      heart(x,y);
      pop();
    }
  }
  
}
  

//yellow sqaure  
function yellowbox(x,y) {
  noStroke();
  rectMode(CENTER);
  translate(x,y);
  rotate(PI/4);
  fill(248,228,87);
  rect(0,0,90,90);
}

//green line 
function greenline(x,y){
  noStroke();
  rectMode(CENTER);
  rotate(PI/4);
  translate(x,y);
  fill(180,223,90);
  rect(0,0,16,680);
}

//green line
function greenline2(x,y){
  noStroke();
  rectMode(CENTER);
  rotate(7*PI/4);
  translate(x,y);
  fill(180,223,90);
  rect(0,0,16,750);
}

//heart shape
function heart(x,y){
  noStroke();
  translate(x,y);
  fill(237,132,103);
  ellipse(0,0,34,34);
  ellipse(25,0,34,34);
  triangle(-14,10,12,37,38.5,10);
}

Project 05-Wallpaper

My process for this project was to create a wallpaper or textile design I would like to see on my wall, the shapes follow this but the colors were picked to have a cool and relaxing sunset feel.

sketch Download

var w=50;    //squares width
var ww=20;    //rectangle variable
var m=30;    //rectangle variable

function setup() {
    createCanvas(600, 600);
    noStroke();
    noLoop();
}

function draw() {
    background(0);
    drawGrid();
}

function drawGrid() {
  var size=2*w+ww;
  for (var y = 0; y < height + size; y += size) {
        for (var x = 0; x < width + size; x += size) {
          fill(49,39,255);
          square(x,y,w);    //4 medium blue squares
          square(x+w+ww,y,w);
          square(x,y+w+ww,w);
          square(x+w+ww,y+w+ww,w);
          fill(114,192,254);
          rect(x+w,y,ww,m);    //4 light blue rectangles
          rect(x,y+w,m,ww);
          rect(x+w+2*ww,y+w,m,ww);
          rect(x+w,y+w+2*ww,ww,m);
          fill(247,98,255);
          rect(x+w,y+m,ww,2*m);    //pink plus sign rectangles
          rect(x+m,y+w,2*m,ww);
          fill(22,5,57);
          arc(x,y, 35,35,0,2*PI);    //dark blue ring
          fill(49,39,255);
          arc(x,y,30,30,0,2*PI);    //medium blue in ring
          fill(22,5,57);
           arc(x,y, 25,25,0,2*PI);    //middle dark circle in ring
          fill(254,175,98);
          arc(x+w+ww/2,y+w+ww/2,10,10,0,2*PI);    //yellow circle
        }
    }
}

Project – 05 – Wallpaper

Since the loop is not difficult, I spend a lot of time figuring the individual shape to make them look interesting together. Especially for the polygon shape. I learned the cos() and sin() and vertex() to draw that shape. Also, I consider the color to be consistent with the visual.

sketch Download

    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-05-wall paper

var a=20;
var l=50;

function setup() {
    createCanvas(550, 550); 
    noLoop();

}



function draw(){
    
    background(221,209,183);
    
    //background
    var sparkle = {
        locationX: random(width),
        locationY: random(height),
        size: random(1, 5)
    }
    fill (0);
    noStroke();
    ellipse(sparkle.locationX, sparkle.locationY, sparkle.size, sparkle.size);
   
    // flower
    for (var x1=50; x1 < 600; x1+=150) {
      for (var y1=50 ; y1 < 600 ; y1+=150){
        flower(x1,y1);
      }
    }

    // eye
    for (var x2=60; x2 < 250; x2+=75) {
      for (var y2=25 ; y2 < 400 ; y2+=75){
        eye(x2,y2);
      }
    }

    // shape1
    for (var x3=120; x3 < 500; x3+=150) {
        for (var y3=120 ; y3 < 500 ; y3+=150){
        shape1(x3,y3);
      }
    }

}


function flower(x,y){
      push();
      fill(229, 148, 183);
      circle(x-a/2, y-a/2, a);
      circle(x+a/2, y-a/2, a);
      circle(x-a/2, y+a/2, a);
      circle(x+a/2, y+a/2, a);
      fill(27, 85, 155);
      circle(x, y, a);
      pop();
}


function eye(x,y) {
    push();
    translate(x, y);
    fill(255);
    arc(x, y-l/4.5, l, l, 0.5, PI-0.5);
    arc(x, y+l/4.5, l, l, PI+0.5, -0.5);
    //fill(22,125,88);
    fill(random(22),125,random(225));
    ellipse(x, y, l/2, l/2); 
    pop();

}

function shape1(x,y){
    push();
    translate(x, y);
    var spacing = 360 / 7;
    beginShape();
    fill(0);
    for(let i = 0; i <= 7; i++) {
        var angle = i * spacing;
        var b = cos(radians(angle)) * 10;
        var c = sin(radians(angle)) * 10;
        if (i==0) {
            vertex(b,c);
    }
         else {
             var cAngle = angle - spacing/2;
             var cX = cos(radians(cAngle)) * 40;
             var cY = sin(radians(cAngle)) * 40;
             quadraticVertex(cX, cY, b, c)
      }
    }
    endShape();
    pop();
}

Project 5: Wallpaper

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
function setup() {
    createCanvas(600, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background(146, 214, 255);
}

function draw() {
    // odd columns
    for(var i=50; i<=600;i+=200){
        for(var j=50; j<=600;j+=100){
            push();
            translate(i,j);
            carpattern();
            pop();
        }
    }
  // even columns
    for(var k=150; k<=600;k+=200){
        for(var l=0; l<=600;l+=100){
            push();
            translate(k,l);
            carpattern();
            pop();
        }
    }
}
function carpattern(){
    noStroke();
    // front window
    fill(195, 244, 266);
    quad(-15, -1, -17, -2, -6, -9, -5, -8);
    // car body
    fill(248, 95, 120);
    rect(-36, 2, 78, 4);
    fill(237, 67, 80);
    rect(-36, 6, 78, 5);
    fill(255, 33, 49);
    rect(29, 5, 13, 4);
    quad(42, 5, 42, 9, 44, 8, 44, 5);
    quad(-38, 6, -39, 9, -30, 9, -30, 6);
    quad(-30, 9, -30, 11, -36, 11, -38, 9);
    fill(248, 95, 102);
    rect(-15, -2, 57, 8);
    quad(-14, 6, -36, 6, -37, -2, -15, -4);
    rect(-15, 2, 57, 8);
    quad(-18, 1, -5, -9, 20, -10, 33, -1);
    // windows
    fill(195, 244, 266);
    quad(-12, 0, -3, -9, 19, -9, 26, 0);
    // black line separating the window
    fill(0);
    quad(6, 0, 8, -9, 10, -9, 10, 0);
    fill(120, 0, 3);
    rect(-20, 10, 40, 2);
    // tires
    fill(0);
    ellipse(-25, 10, 12, 12);
    ellipse(25, 10, 12, 12);
    fill(151, 162, 168);
    ellipse(-25, 10, 8, 8);
    ellipse(25, 10, 8, 8);
    // lights
    fill(247, 109, 49);
    rect(41, 1, 1, 2);
    quad(-37, 4, -38, 2, -36, 2, -36, 4);
}

I started by sketching my car in illustrator before calculating the coordinates for the geometric shapes in my canvas.

This is the reference of the car:

Project 05: Wallpaper

This wallpaper was inspired by a phone case I recently purchased online. Watermelons are one of my favorite fruits and green is my favorite color so I thought it’d be fun to code this design. To make it more dynamic, I decided to make the positions of the watermelons somewhat random and the placement of the seeds random inside so that each slice is unique.

sketch

function setup() {
    createCanvas(600, 400);
    background(101, 173, 119); // green background
    for(var x = 0; x <= width; x += 20){ // vertical stripes
    	stroke(136, 213, 156);
    	strokeWeight(5);
    	line(x, 0, x, height);
    }
    for(var y = 0; y <= height; y += 20){ // horizontal stripes
    	stroke(136, 213, 156);
    	strokeWeight(5);
    	line(0, y, width, y);
    }

}

function watermelonHalf() { // draw watermelon halves
	//semicircle
	rotate(radians(random(-30, 30))); // random position
	noStroke();
	fill(38, 144, 65);
	arc(0, 0, 60, 60, 0, PI); // green part
	fill(255);
	arc(0, 0, 55, 55, 0, PI); // white part
	fill(236, 80, 102);
	arc(0, 0, 50, 50, 0, PI); // red part
	for(var seeds = 0; seeds <= 5; seeds += 1){ // random seed positions
		fill(0);
		ellipse(random(-20, 20), random(5, 15), 2, 3);
	}
	noLoop();
}

function watermelonSlice() { // draw watermelon slices
	//triangular slice
	rotate(radians(random(60, 90))); // random position
	noStroke();
	fill(38, 144, 65);
	arc(0, 0, 70, 70, 0, PI/3); // green
	fill(255);
	arc(0, 0, 65, 65, 0, PI/3); // white
	fill(236, 80, 102);
	arc(0, 0, 60, 60, 0, PI/3); // red 
	for(var seeds = 0; seeds <= 2; seeds += 1){ // seeds
		fill(0);
		ellipse(random(15, 20), random(5, 20), 2, 3);
	}
	noLoop();
}

var column = 0; // column counter to alternate 
function draw() {
	for(var x = 30; x <= width; x += 80){
		if(column%2 == 0){ // if odd number columns
			for(var y = 0; y <= height; y += 120){ // first slice
				push();
				translate(x, y);
				watermelonSlice();
				pop();
			}
			for(var y = 60; y <= height; y += 120){ // second half
				push();
				translate(x, y);
				watermelonHalf();
				pop();
			}
			column += 1; // add to column counter
		}
		else{ // if even number columns
			for(var y = 0; y <= height; y += 120){ // first half
				push();
				translate(x, y);
				watermelonHalf();
				pop();
			}
			for(var y = 60; y <= height; y += 120){ // second slice
				push();
				translate(x, y);
				watermelonSlice();
				pop();
			}
			column += 1; // add to counter
		}
	}
}

Project-05: Wallpaper

zimmy wallpaper



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.

Project 5: Wallpaper

sketch

//Jessie Chen
//D
//Project 05
//Floral Wallpaper


function setup() {
    createCanvas(600, 600);
    background(255, 247, 224);
    noLoop();
}

function draw() {
    //background white dots
    for (var x = 0; x <= width; x += 10) {
        for (var y = 0; y<= height; y += 10) {
            dots(x,y);
            print(dots);
        }
    }
    push();
    //rows of red flowers
    translate(-200, -85);
    for (x = 0; x <= width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(25));
            flower(0, 0, 220, 50, 20);
            pop();
        }
    }
    //rows of brown flowers
    translate(100, 100);
    for (x = 0; x <= width * 2; x += 200) {
        for (y = 0; y < height* 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(55));
            flower(0, 0, 112, 66, 36);
            pop();
        }
    }
    //rows of green flowers
    translate(-100, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height* 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(25));
            flower(0, 0, 130, 186, 114);
            pop();
        }
    }
    //rows of orange flowers
    translate(100, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(55));
            flower(0, 0, 255, 133, 2);
            pop();
        }
    }
    pop();
    //rows of small pink flowers
    translate(-95, -45);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 255, 163, 163);
            pop();
        }
    }
    //rows of small brown flowers
    translate(50, 95);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 156, 116, 65);
            pop();
        }
    }
    //row of small green flowers
    translate(145, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 161, 214, 157);
            pop();
        }
    }
    //rows of small orange flowers
    translate(55, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 255, 167, 89);
            pop();
        }
    }
}

//background dot
function dots(x,y) {
    noStroke();
    fill(255);
    ellipse(x, y, 5, 5);
}

//one regular flower
function flower(x, y, r, b, g) {
    noStroke();
    fill(r, b, g);
    push();
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    pop();
    //yellow center
    fill(255, 215, 135);
    ellipse(43, 68, 30, 30);
}

//small flowers
function smallflower(x, y, r, b, g) {
    noStroke();
    fill(r, b, g);
    push();
    rect(3, 20, 15, 20, 15, 15, 10, 10);
    translate(40, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    pop();
    //yellow center
    fill(255, 215, 135);
    ellipse(10, 42, 13, 13);
}

this was inspired by my golf le fleur shoes 🙂

Project 5-Wallpaper

I was inspired by the floral wallpapers that were in the archive and I decided to go with something similar to that. I went with a daisy theme and added vines, leaves, and dots in the background to add a consistent pattern.

wallpaper Download

var x=50;
var y=50;
var angle=0;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(153, 205, 171);
    noStroke();
    //dot background
    for (var i=0; i<=600; i+=25){
        for (var n=0; n<=600; n+=25){
            fill(192, 213, 199);
            circle(i, n, 7);
        }
    }
    //vines
    for (var x=0; x<=600; x+=150){
        push();
        translate(x, 0);
        vines();
        pop();
    }
    //leaves
    for (var x=0; x<=600; x+=300){
        for (var y=0; y<=1500; y+=150){
            push();
            translate(x, y);
            leaves();
            angle+=180;
            pop();
        }
    }
    for (var x=150; x<=600; x+=300){
        for (var y=-50; y<=1500; y+=150){
            push();
            translate(x, y);
            leaves();
            angle+=180;
            pop();
        }
    }
    //daisies
    for (var x=50; x<=750; x+=300){
        for (var y=50; y<=1500; y+=150){
            push();
            daisy(x, y);
            pop();
        }
    }
    for (var x=200; x<=600; x+=300){
        for (var y=0; y<=1500; y+=150){
            push();
            daisy(x, y);
            pop();
        }
    }
    noLoop();
}

function daisy(x, y) {
    push();
    translate(x, y);
    scale(0.9);
    for (var angle=0; angle<360; angle+=15){ //petals
        stroke(210);
        strokeWeight(0.75);
        fill(241, 248, 243,);
        bezier(0, 0, 100, 10, 50, 90, 0, 0);
        rotate(radians(angle));
    }
    fill(233, 232, 51);
    circle(0, 0, 15); //center
}

function vines() {
    stroke(25, 84, 46);
    strokeWeight(12);
    noFill();
    for(var y=0; y<height; y=y+1){
        point(60-25*sin(radians(1.5*y)), y);
    }
}

function leaves() {
    push();
    scale(0.5);
    translate(100, 125);
    rotate(radians(angle+110));
    stroke(25, 84, 46, 150);
    strokeWeight(0.75);
    fill(149, 214, 33);
    bezier(1,0,-47,-80,-47,-120,0,-175);
    bezier(0,-175,47,-120,47,-80,-1,0);
    line(1, 0, 0, -175);
    pop();
}

During this project I offset the daisies to add some interest. I also had to work with bezier curves, which was difficult because I haven’t done that before. I used bezier curves with the petals and leaves. I initially wanted to use ellipses, but I saw someone make a flower in p5.js online using bezier curves, but with pointed tips. I realized that you can have the two anchor points in the same place and make a better looking flower petal.

I used the pointed tips method with two bezier curves next to each other to make the leaves and then played with the sizes of everything using scale(); until I was happy.

Project-05 Wallpaper

wallpaper

//Rishi Karthikeyan 
//rkarthik
//section B 
//HW 5 Project Floral Wallpaper  

var y = 0;
var x = 0;

function setup() {
    createCanvas(600, 600); 
    background(16, 18, 43);
    text("", 10, 15);

    rectMode(CENTER);

}

function draw() {
	background(16, 18, 43);
	
	push(); 

	translate(60,60);
	for (y = 0; y < 500; y += 120) {
		for (x = 0; x < 500; x +=120) {
			drawPattern(y);
			drawFlower(x, y);
		}
	}

	pop();
}

function drawPattern(y) {
	
	//lighter blue pattern outline 
	noFill();
	fill(16, 18, 43);
	strokeWeight(5);
	stroke(65, 68, 144);
	
	circle(x+26, y, 30);
	circle(x-26, y, 30);
	circle(x, y-26, 30);
	circle(x, y+26, 30);
	rect(x, y, 52, 52);
	circle(x+50, y, 18);
	circle(x-50, y, 18);
	circle(x, y+50, 18);
	circle(x, y-50, 18);

	//dark blue boxes 
	stroke(16, 18, 43);
	strokeWeight(5);
	rect(x, y, 20, 52);
	rect(x, y, 52, 20);

	//white ellipses for background
	fill(255);
	noStroke();

	//ellipses top left 
	circle(x-50, y-50, 9);
	circle(x-25, y-35, 7);
	circle(x-18, y-42, 7);
	circle(x-30, y-45, 9);
	circle(x-40, y-48, 6);
	circle(x-32, y-53, 6);
	circle(x-48, y-34, 6);
	circle(x-52, y-41, 6);
	circle(x-36, y-24, 10);
	ellipse(x-38, y-38, 8, 10);
	ellipse(x-50, y-20, 8, 14);
	ellipse(x-20, y-52, 12, 8);

	//ellipses top right 
	circle(x+50, y-50, 9);
	circle(x+25, y-35, 7);
	circle(x+18, y-42, 7);
	circle(x+30, y-45, 9);
	circle(x+40, y-48, 6);
	circle(x+32, y-53, 6);
	circle(x+48, y-34, 6);
	circle(x+52, y-41, 6);
	circle(x+36, y-24, 10);
	ellipse(x+38, y-38, 8, 10);
	ellipse(x+50, y-20, 8, 14);
	ellipse(x+20, y-52, 12, 8);

	//ellipses bottom left 
	circle(x-50, y+50, 9);
	circle(x-25, y+35, 7);
	circle(x-18, y+42, 7);
	circle(x-30, y+45, 9);
	circle(x-40, y+48, 6);
	circle(x-32, y+53, 6);
	circle(x-48, y+34, 6);
	circle(x-52, y+41, 6);
	circle(x-36, y+24, 10);
	ellipse(x-38, y+38, 8, 10);
	ellipse(x-50, y+20, 8, 14);
	ellipse(x-20, y+52, 12, 8);

	//ellipses bottom right 
	circle(x+50, y+50, 9);
	circle(x+25, y+35, 7);
	circle(x+18, y+42, 7);
	circle(x+30, y+45, 9);
	circle(x+40, y+48, 6);
	circle(x+32, y+53, 6);
	circle(x+48, y+34, 6);
	circle(x+52, y+41, 6);
	circle(x+36, y+24, 10);
	ellipse(x+38, y+38, 8, 10);
	ellipse(x+50, y+20, 8, 14);
	ellipse(x+20, y+52, 12, 8);

}

function drawFlower(x, y) {
	
	//green leaves
	fill(108, 117, 86);
	noStroke();
	ellipse(x, y+10, 10, 30);
	ellipse(x, y-10, 10, 30);
	ellipse(x+10, y, 30, 10);
	ellipse(x-10, y, 30, 10);
	
	//pink flowers 	
	fill(204, 153, 153);
	ellipse(x, y+10, 15, 20);
	ellipse(x, y-10, 15, 20);
	ellipse(x+10, y, 20, 15);
	ellipse(x-10, y, 20, 15);
	
	//blue center 
	fill(65, 68, 144);
	circle(x, y, 10);

}

For this project I was inspired by the style of kitchen tiles; I love the way the designs on these create so many different points of visual interest. I wanted to create my own version of it with a darker color scheme. This project was really fun and helped me better understand how to use loops.