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

Fallon Creech-Project-05-Wallpaper

//Fallon Creech
//Section B
//fcreech@andrew.cmu.edu
//Project-05

var x = 40;

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

function draw() {
	background(220);
	noStroke();
	for (var i = 0; i < 15; i++) {
		for (var j = 0; j < 15; j++) {
      //fill every other column with all orange ellipses
			if (j % 2 == 0) {
				r = 245;
				g = 125;
				b = 0;
      }

      //fill every other column with orange circles in every other row
      else if (i % 2 == 0) {
				r = 255;
				g = 165;
				b = 0;
			}

      //fill every other column with purple circles in every other row
      else if (j == j) {
				r = 50;
				g = 80;
				b = 220;
				fill(r, g, b);
				rect(x * j, x * i, x, x);
			}

			fill(r, g, b);
			ellipse(x * j, x * i, x, x);
		}
	}
}

I chose to approach this project as an extension of the assignments we worked on in lab, so I created a pattern of circles that used color to differentiate between row and column with one circle that adopted another quality.

Nawon Choi— Project 05 Wallpaper

nawon-05

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C

function setup() {
    createCanvas(440, 540);
    background("white");
    stroke("white");
    for (var y = 0; y < height + 20; y += 110) {
        for (var x = 0; x < width + 20; x += 110) {
            // background triangles
            fill(y/2, x/2, 200);
            triangle(x, y, x, y + 100, x + 50, y + 50);
            fill(y/2, x/2, 180);
            triangle(x, y, x + 100, y, x + 100, y + 100);
            // center circle
            fill(y/2, x/2, 250);
            ellipse(x + 50, y + 50, 25, 25);
            fill(y/2, x/2, 220);
            triangle(x, y + 100, x + 50, y + 50, x + 100, y + 100);
            fill("white");
            ellipse(x + 50, y + 25, 5, 5);
            // bottom triangles
            fill(y/2, x/2, 250);
            triangle(x + 50, y + 50, x, y + 100, x + 33, y + 100);
            fill(y / 3, x / 3, 150);
            triangle(x + 50, y + 50, x + 33, y + 100, x + 66, y + 100);
        }
    }
    noLoop();
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

For this project, I was inspired by geometric shapes, as well as the color gradient that we learned how to code during lab. I tried to create a small landscape image through the composition of my geometric elements. I like the way the that the gradient adds to the wallpaper by the way it alludes to a sunset or sunrise, and the way the colors of the sky change.

I sketched out a couple different ideas that I tested in p5.js, and ultimately decided on one that looked the best compositionally. I found that a lot of the other iterations had too many elements which was overwhelming to the eye.

Danny Cho – Project 5 – Wallpaper

Wallpaper

// Danny Cho
// changjuc
// Section: A
// Project: Wallpaper
var waveHeight = 4/5;
var move = 0;
var speed = 0;
var evenOdd = 0;
var tailSize = 20;
var tailHeight = 20;
var fishSize = 10;
function setup(){
  createCanvas(600, 600);
}
//creating waves
function waves(R, G, B, size, y, offset){
    fill(R, G, B);
    strokeWeight(0);
    stroke(255);
    //was trying to make the waves move, but not enough time & confusion
    for (j = 0; j < (width + 1000) / size; j++){
      var cirlceX = j * size * waveHeight + offset;
      if (cirlceX > width + 500){
        cirlceX = size * waveHeight + offset;
        ellipse(cirlceX, y, size, size);
      }
      else {
        ellipse(cirlceX, y, size, size);
      }
      

    }
    
  
}
//drawing fish out of two triangles
function fish(a){
    fill(231, 239, 233);
    var v = height / 200;
    var h = width / 200;
    //tail
    var t1x = a * h * 15;
    var t1y = a * v * 15 + 10;
    var t2x = a * h * 15 + tailSize;
    var t2y = a * v * 15 + tailSize;
    var t3x = t1x;
    var t3y = a * v * 15 + 2 * tailHeight - 10;
    print("t1x is" + t1x);
    print("t1y is" + t1y);
    //head
    triangle(t1x, t1y, t2x, t2y, t3x, t3y);
    var h1x = t2x;
    var h1y = t2y - fishSize;
    var h2x = t2x + 3 * fishSize;
    var h2y = t2y;
    var h3x = t2x;
    var h3y = t2y + fishSize;
    triangle(h1x, h1y, h2x, h2y, h3x, h3y);
  }


function draw(){

  for (i = 0; i <= 16; i++) {
    var count = (i % 2);
    if (count == 0) {

      waves(15, 146, 167, 100, 600 - (40 * i), -50);

    //every other waves are different color  
    }
    else if (count == 1) {
      waves(20, 188, 199, 100, 600 - (40 * i), 0);
    }
  }
  for (row = 0; row <= 10; row ++){
    push()
    translate(row * 100 - 500, 0);
    for (k = 0; k <= 12; k++){
    fish(k);
  }
  pop()
  }

  noLoop();

}

I originally wanted to make the waves move and have a ship or fish moving in between them, but I realized the way that I created the waves and how they overlap on top of each other didn’t allow it. So I decided to just overlay fish on top of the waves.

CJ Walsh – Project 05 – Wallpaper

sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project 05 - Wallpaper

function setup() {
    createCanvas(500, 500);
    background('#83D4F3');
    noStroke(); // i dont like the stroke on objects!
}

function draw() {
	// loop used to create variety of circles 
	for (var y = 62.5; y < height + 62.5; y += 125) {
		for (var x = 62.5; x < width + 62.5; x += 125) {
			fill('#64AEFF');
			ellipse(x, y, 125, 125);
			fill('#8ACAFF');
			ellipse(x, y, 99, 99);
			fill('#8BEFA7');
			ellipse(x - 25, y - 10, 37, 37);
			fill('#609FA0');
			ellipse(x - 20, y - 20, 21, 21);
			fill('#2D4949');
			ellipse(x + 20, y + 15, 43, 43);
			fill('#FFC5FE');
			ellipse(x + 25, y - 2, 29, 29);
		}
	}
	// background set of rectangles 
	fill('#7F7FEF');
	for (var y = 114; y < height; y += 251) {
		for (var x = 30; x < width; x += 250) {
			rect(x, y, 190, 19);
		}
	}
	// foreground set of rectangles
	fill('#5756A5');
	for (var y = 29; y < height; y += 250) {
		for (var x = 115; x < width; x += 251) {
			rect(x, y, 19, 190);
		}
	}
}

This is the wallpaper that I created for this week’s assignment. After looking through some examples, I decided that I just wanted to experiment with what I knew about loops and shapes and see what I could make. I drew all of my shapes in Adobe Illustrator first to understand where I wanted everything to be placed, and to also choose colors. I found this project to be really fun, especially when I expand the canvas and get to see the design on a larger scale. I could definitely see myself doing something similar to this project again in the future to make fun patterns and textures.

Sydney Salamy: Project-05-Wallpaper

sketch-ssalamy

var dx = (500/4);//width divided by # of lilies per row
var dy = (500/4);//height divided by # of lilies per column

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

function draw() {
    //background(66, 85, 255);
    background(35, 57, 252);//blue
    noStroke();
    //for loops
    for(var w = 0; w < 4; w++){ //draws horizontal rows of lilies
        for(var h = 0; h < 4; h++){ //draws vertical columns of lilies
            //lily pads
            fill(101, 224, 150);//green
            arc((dx / 2) * (2 * w + 1),(dy / 2) * (2 * h + 1), dx / 1.3, dy / 1.3,
              -0.4, 1.4 * PI + QUARTER_PI, PIE);//main lily pads (largest)
            fill(58, 201, 168);//bluer green
            arc((dx / 2) * (2 * w + 1) + 30,(dy / 2) * (2 * h + 1) + 55, dx / 5, dy / 5,
              -0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 1 (largest of the side ones)
            fill(58, 201, 191);//bluer bluer green
            arc((dx / 2) * (2 * w + 1) + 48,(dy / 2) * (2 * h + 1) + 35, dx / 8, dy / 8,
              -0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 2
            fill(58, 196, 201);//light blue
            arc((dx / 2) * (2 * w + 1) + 56,(dy / 2) * (2 * h + 1) + 17, dx / 10, dy / 10,
              -0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 3
            fill(58, 175, 201);//blue
            arc((dx / 2) * (2 * w + 1) + 57,(dy / 2) * (2 * h + 1) + 0, dx / 12, dy / 12,
              -0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 4 (smallest)
            //lily pad flowers (pink)
            fill(255, 199, 217);
            ellipse((dx / 2) * (2 * w + 1) + 30,
            (dy / 2) * (2 * h + 1) + 55, 25,10);//horizontal lily pads 1
            ellipse((dx / 2) * (2 * w + 1) + 30,
            (dy / 2) * (2 * h + 1) + 55, 10,25);//vertical lily pads 1
            fill(255, 140, 177);
            ellipse((dx / 2) * (2 * w + 1) + 48,
            (dy / 2) * (2 * h + 1) + 35, 15,7);//horizontal lily pads 2   
            ellipse((dx / 2) * (2 * w + 1) + 48,
            (dy / 2) * (2 * h + 1) + 35, 7,15);//vertical lily pads 2
            fill(255, 105, 153);
            ellipse((dx / 2) * (2 * w + 1) + 56,
            (dy / 2) * (2 * h + 1) + 17, 10,5);//horizontal lily pads 3
            ellipse((dx / 2) * (2 * w + 1) + 56,
            (dy / 2) * (2 * h + 1) + 17, 5,10);//vertical lily pads 3
            fill(255, 66, 127);
            ellipse((dx / 2) * (2 * w + 1) + 57,
            (dy / 2) * (2 * h + 1) + 0, 8,4);//horizontal lily pads 4
            ellipse((dx / 2) * (2 * w + 1) + 57,
            (dy / 2) * (2 * h + 1) + 0, 4,8);//vertical lily pads 4
            //lily pad flower (white)
            fill(255);
            ellipse((dx / 2) * (2 * w + 1),
            (dy / 2) * (2 * h + 1), 28,13);//horizontal lily pads 1
            ellipse((dx / 2) * (2 * w + 1),
            (dy / 2) * (2 * h + 1), 13,28);//vertical lily pads 1
        }
  }
    
}

I decided to make my designs plant based and chose ferns as one of the plants. I then realized those would be complicated, so I chose lily pads and flowers instead. I decided to vary the sizes of my lilies to make them prettier and give my design variation. I then varied the colors as well. After, I added flowers and also varied the colors and sizes of them. I changed the colors throughout to make them complement each other more and make the piece as a whole more aesthetically pleasing. For example, my background was originally very dark brown.

Picture of my rough drafts — My Rough Drafts

Zee Salman- Project- 05

sketch

//Zee Salman
//SECTION E

var red // horizantal
var blue  // vertical
var sz = 10;

function setup() {
    createCanvas(600, 400);
    noStroke();
}
 
function draw() {
    background(0);
    drawGrid();
     
}
function drawGrid() {
  for (var y = 5; y < height + 50; y += 100) {
  		var red = map(y,0,height,0,255);
        for (var x = 5; x < width + 50; x += 100) {
            //color gradient needs to be implemented
            var blue = map(x,0,width,0,255);
            noStroke();
            fill(red,0,blue);
            ellipse(x, y,20, 100);

            stroke("white");
            line(x /2, y /2, width / 2, height / 2);
            line(x *2, y *2, width / 2, height / 2);

            
        }
    }
}

I wanted to go for something a bit playful, I really enjoy gradients and I wanted to add them to this wallpaper along with lines that sprouted in different directions, I feel like it has a good contrast especially with the black background. I would like to further expand on this idea and see where I can rreally take the design, and even complicate the shapes a bit more in further explorations.

SooA Kim: Project-05-Wallpaper

sookim_wallpaper

For this project, I tried to make a wallpaper based on this minimalist pattern from the Bauhaus movement.

/* SOOA KIM
SECTION C
sookim@andrew.cmu.edu
project-05
*/

function setup() {
    createCanvas(600, 600);
    noStroke();
}
 
function draw() {
    background("pink");

    //white rectangle
    for (var px = 0; px < height; px += 300) {
        for (var py = 0; py < height; py += 200) {
            fill (255);
            rect(px + 100, py, 200, 100);
        }
    }
//lavender square
    for (var rx = 0; rx < height; rx+= 200) {
        for (var ry = 100; ry < height; ry += 200) {
            fill(184, 186, 215); 
            rect(rx, ry, 100, 100);
        }
    }

    for (var ty = 50; ty < height + 50; ty += 200) {
        for (var tx = 50; tx < height + 50; tx += 200) {
            fill(45, 44, 119); //blue circle
            arc(tx, ty, 100, 100, HALF_PI, PI + HALF_PI);
            fill(225, 99, 58); //oraange circle
            arc(tx, ty + 100, 100, 100, PI + HALF_PI, HALF_PI);
            fill(255); //white circle
            arc(tx + 100, ty + 50, 100, 100, TWO_PI, PI);
        }
    }
   
    //two squares
    for (var ox = 50; ox < height; ox += 400) {
        for (var oy = 50; oy < height; oy += 200) {
            fill(0); 
            rect(ox + 50, oy, 50, 50);
            rect(ox + 100,oy - 50, 50, 50);
        }
    }

    noLoop(); 
}

William Su – Project 05 – Wallpaper

I made a grid of circles with randomly sized and colored circles sprinkled in.

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 05

function setup() { 
  createCanvas(400, 400);
  noLoop();
  count = 1;
} 

function draw() { 
  background(0);

    
  for (var M = 0; M <= width; M += 20){
    for (var N = 0; N <= height; N += 20) {

      if (count == 8) { 
        r = random(3, 12);
        fill(random(0, 255), random(0, 255), random(0, 255)); // Random color
        stroke(150);
        line(M - 10, N - 10, M + 10, N + 10);
        ellipse(M,N,r,r); // Random size
        count = 1;// Count resets after every 6 dots.

      } else { // Draw regular dots and lines
        fill(100);
        stroke(20);
        line(M + 10, N + 10, M - 10, N - 10);
        ellipse(M,N,8,8); 
        count += 1;
      }

    }
  }
}

Ellan Suder – Project – 05

I used the code I wrote for the hexagonal grid as a base for the wallpaper’s tiling pattern. I drew a custom shape in its own function (called ‘flame’) and made it repeat. The triangle/sparks are generated randomly.

flame wallpaper

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-05
*/

var magentaColor;
var greenColor;
//var blueColor;

function setup() {
    createCanvas(500, 500);
    magentaColor = color(238,116,217);
    greenColor = color(156, 255, 209);
    //blueColor = color(104,142,243);
}


function draw() {
    background(9,9,9);
    var tw = 100;
    var th = 100;
    var oy = 0;
    var ox = 0;
    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < 8; x++) {
          if (y%2 === 0) {
            var px = ox + x * tw;
          } else if (y%2 !== 0 & x < 9) {
            var px = ox +tw/2 + x * tw;
          }
            var py = oy + y * th;
            
            fill(greenColor);
            flame(px,py,20); //outer flame
            fill(magentaColor); //inner flame
            flame(px,py+10,10);
            sparks(px,py,20);
        }
    }
  noLoop();
}
      
function flame(x,y,size) {
    stroke(magentaColor);
    strokeWeight(1.5);
    
    beginShape();
    vertex (x,y-4*size/3);     //1
      vertex (x+size/4,y-size);     //2
        vertex (x+size/3,y-size/3);     //3
      vertex (x+2*size/3,y-3*size/4);     //4
    vertex (x+size,y-size);     //5
      vertex (x+3*size/4,y+size/3);     //6
        vertex (x+size/2,y+3*size/4);     //7
          vertex (x,y+size);     //8
        vertex (x-size/2,y+3*size/4);     //9
      vertex (x-3*size/4,y+size/3);     //10
    vertex (x-size,y-size);     //11
      vertex (x-2*size/3,y-3*size/4);     //12
      vertex (x-size/3,y-size/3);     //13
        vertex (x-size/4,y-size);     //14
    endShape(CLOSE);     //back to 1  
}

function sparks(x,y,size) {
    a = size*random(-1,1);
    b = random(.9,1.1);
    triangle((x+a)*b,(y+a),
             (x+size/5+a)*b,(y+size/5+a),
             (x-size/5+a)*b,(y+size/5+a)*b);
    
    c = size*random(-1,1);
    d = random(.9,1.1);
    triangle((x+c)*d,(y+c)*d,
             (x+size/5+c)*d,(y+size/5+c),
             (x-size/5+c)*d,(y+size/5+c)*d);
  
    e = size*random(-1,1);
    f = random(.9,1.1);
    triangle((x+e)*f,(y+e)*f,
             (x+size/5+e)*f,(y+size/5+e)*f,
             (x-size/5+e)*f,(y+size/5+e)*f);
}

Kristine Kim – Project -05-Wallpaper

sketch

For this project, I wanted to use curved lines instead of rigid geometric shapes so I used sin() and cos() to portray that. I also wanted to convey a little bit of depth and dimension, so I had shadows to the curves and circles in the background. The color of the circles are a couple of shades darker than the background color so that it could help portray more dimension.

index

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project-05- Wallpaper
var x1 = 100; //x of the rect
var y1 = 100; //y of the rect

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

function draw() {
    background(150, 200, 150);

//circles in the background
    for (var y = 0; y < height; y += 2 ) {
        for (var x = 0; x < width; x += 2) {
            var rx = x1 + x *25
            var ry = y1 + y * 25
            noFill();
            strokeWeight(3);
            stroke(245);
            rect(rx-100, ry-100, 60, 60);
            fill(150, 143, 255);

        }
    }

// 1st row of the curves
    for (var x = 0; x < width/4-20; x = x + 1) {
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) - 40);
        point(x + 135, 60 - 50 * sin(radians(x)) - 40);
        point(x + 265, 60 - 50 * sin(radians(x)) - 40);
        point(x + 390, 60 - 50 * sin(radians(x)) - 40);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) - 40);
        point(x + 135, 60 - 50 * cos(radians(x)) - 40);
        point(x + 265, 60 - 50 * cos(radians(x)) - 40);
        point(x + 390, 60 - 50 * cos(radians(x)) - 40);

// shadows for the 1st row
        strokeWeight(8);
        fill(110);
        point(x, 60 - 50 * sin(radians(x)) - 47);
        point(x, 60 - 50 * cos(radians(x)) -47);
        point(x + 135, 60 - 50 * sin(radians(x)) -47);
        point(x + 135, 60 - 50 * cos(radians(x)) -47);
        point(x + 265, 60 - 50 * sin(radians(x)) - 47);
        point(x + 265, 60 - 50 * cos(radians(x)) - 47);
        point(x + 390, 60 - 50 * sin(radians(x)) - 47);
        point(x + 390, 60 - 50 * cos(radians(x)) - 47);
 
 //2nd row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 50);
        point(x + 135, 60 - 50 * sin(radians(x)) + 50);
        point(x + 265, 60 - 50 * sin(radians(x)) + 50);
        point(x + 390, 60 - 50 * sin(radians(x)) + 50);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 50);
        point(x + 135, 60 - 50 * cos(radians(x)) + 50);
        point(x + 265, 60 - 50 * cos(radians(x)) + 50);
        point(x + 390, 60 - 50 * cos(radians(x)) + 50);

 //shadows for the 2nd row  
        strokeWeight(8)
        fill(110);
        point(x, 60 - 50 * sin(radians(x)) + 57);
        point(x, 60 - 50 * cos(radians(x)) + 57);
        point(x + 135, 60 - 50 * sin(radians(x)) + 57);
        point(x + 135, 60 - 50 * cos(radians(x)) + 57);
        point(x + 265, 60 - 50 * sin(radians(x)) + 57);
        point(x + 265, 60 - 50 * cos(radians(x)) + 57);
        point(x + 390, 60 - 50 * sin(radians(x)) + 57);
        point(x + 390, 60 - 50 * cos(radians(x)) + 57);

//3rd row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 150);
        point(x + 135, 60 - 50 * sin(radians(x)) + 150);
        point(x + 265, 60 - 50 * sin(radians(x)) + 150);
        point(x + 390, 60 - 50 * sin(radians(x)) + 150);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 150);
        point(x + 135, 60 - 50 * cos(radians(x)) + 150);
        point(x + 265, 60 - 50 * cos(radians(x)) + 150);
        point(x + 390, 60 - 50 * cos(radians(x)) + 150);

//shadows for 3rd row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 157);
        point(x, 60 - 50 * cos(radians(x)) + 157);
        point(x + 135, 60 - 50 * sin(radians(x)) + 157);
        point(x + 135, 60 - 50 * cos(radians(x)) + 157);
        point(x + 265, 60 - 50 * sin(radians(x)) + 157);
        point(x + 265, 60 - 50 * cos(radians(x)) + 157);
        point(x + 390, 60 - 50 * sin(radians(x)) + 157);
        point(x + 390, 60 - 50 * cos(radians(x)) + 157);


//4th row
       fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 250);
        point(x + 135, 60 - 50 * sin(radians(x)) + 250);
        point(x + 265, 60 - 50 * sin(radians(x)) + 250);
        point(x + 390, 60 - 50 * sin(radians(x)) + 250);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 250);
        point(x + 135, 60 - 50 * cos(radians(x)) + 250);
        point(x + 265, 60 - 50 * cos(radians(x)) + 250);
        point(x + 390, 60 - 50 * cos(radians(x)) + 250);

//shadows for 4th row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 257);
        point(x, 60 - 50 * cos(radians(x)) + 257);
        point(x + 135, 60 - 50 * sin(radians(x)) + 257);
        point(x + 135, 60 - 50 * cos(radians(x)) + 257);
        point(x + 265, 60 - 50 * sin(radians(x)) + 257);
        point(x + 265, 60 - 50 * cos(radians(x)) + 257);
        point(x + 390, 60 - 50 * sin(radians(x)) + 257);
        point(x + 390, 60 - 50 * cos(radians(x)) + 257);


//5th row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 350);
        point(x + 135, 60 - 50 * sin(radians(x)) + 350);
        point(x + 265, 60 - 50 * sin(radians(x)) + 350);
        point(x + 390, 60 - 50 * sin(radians(x)) + 350);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 350);
        point(x + 135, 60 - 50 * cos(radians(x)) + 350);
        point(x + 265, 60 - 50 * cos(radians(x)) + 350);
        point(x + 390, 60 - 50 * cos(radians(x)) + 350);

//shadows for 5th row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 357);
        point(x, 60 - 50 * cos(radians(x)) + 357);
        point(x + 135, 60 - 50 * sin(radians(x)) + 357);
        point(x + 135, 60 - 50 * cos(radians(x)) + 357);
        point(x + 265, 60 - 50 * sin(radians(x)) + 357);
        point(x + 265, 60 - 50 * cos(radians(x)) + 357);
        point(x + 390, 60 - 50 * sin(radians(x)) + 357);
        point(x + 390, 60 - 50 * cos(radians(x)) + 357);

//6th row  
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 450);
        point(x + 135, 60 - 50 * sin(radians(x)) + 450);
        point(x + 265, 60 - 50 * sin(radians(x)) + 450);
        point(x + 390, 60 - 50 * sin(radians(x)) + 450);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 450);
        point(x + 135, 60 - 50 * cos(radians(x)) + 450);
        point(x + 265, 60 - 50 * cos(radians(x)) + 450);
        point(x + 390, 60 - 50 * cos(radians(x)) + 450);

//shadows for 6th row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 457);
        point(x, 60 - 50 * cos(radians(x)) + 457);
        point(x + 135, 60 - 50 * sin(radians(x)) + 457);
        point(x + 135, 60 - 50 * cos(radians(x)) + 457);
        point(x + 265, 60 - 50 * sin(radians(x)) + 457);
        point(x + 265, 60 - 50 * cos(radians(x)) + 457);
        point(x + 390, 60 - 50 * sin(radians(x)) + 457);
        point(x + 390, 60 - 50 * cos(radians(x)) + 457);

//7th row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 550);
        point(x + 135, 60 - 50 * sin(radians(x)) + 550);
        point(x + 265, 60 - 50 * sin(radians(x)) + 550); 
        point(x + 390, 60 - 50 * sin(radians(x)) + 550);

       
        fill(255, 191, 241)
        point(x, 60 - 50 * cos(radians(x)) + 550);
        point(x + 135, 60 - 50 * cos(radians(x)) + 550);
        point(x + 265, 60 - 50 * cos(radians(x)) + 550);
        point(x + 390, 60 - 50 * cos(radians(x)) + 550);

//shadows for 7th row
        strokeWeight(8); 
        fill(100);
        point(x + 390, 60 - 50 * sin(radians(x)) + 557);
        point(x + 390, 60 - 50 * cos(radians(x)) + 557);
        point(x + 265, 60 - 50 * sin(radians(x)) + 557);
        point(x + 265, 60 - 50 * cos(radians(x)) + 557);
        point(x + 135, 60 - 50 * sin(radians(x)) + 557);
        point(x + 135, 60 - 50 * cos(radians(x)) + 557);
        point(x, 60 - 50 * sin(radians(x)) + 557);
        point(x, 60 - 50 * cos(radians(x)) + 557);
    }
}