## 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 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

``````// 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);
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

``````// 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

``````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
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)
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
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.

## Zee Salman- Project- 05

``````//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

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.

``````// 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.

``````/*
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

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.

``````//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);

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);

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);

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);

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);

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);

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);
}
}

``````