Author: Anya Zhukova

• Describe what values were stored in the array(s) and how you utilized them. Share your experience while using the array(s).

I used arrays to store colors, because it made it easier to then utilize loops to assign the colors to the shapes. I had a lot of colors (to create gradients) so it was the most optimal way to do that.

• Explain when/why translate(), push() and pop().

I used these to center the composition. It made it much more easier to have the center of the canvas as a relative position.

• What is the effectiveness of User-Defined Functions?

1. they are reusable (if the function has parameters)
2. they make the code look cleaner as it breaks down your process into smaller pieces of code
3. you can easily experiment by choosing to call the function multiple times/not to call it

• What parameters did you added to your functions? How were they manipulate the effects of the functions?

Mostly the parameters were the position variables. As I also used translate() it made it easier to calculate the position of the shapes.

• Are you able to identify methods/processes in your programming that are radically changed because of the uses of the functions you defined?

I used the UDF before so I would not say much changed, however I did find translate() very useful when working with composition and passing the position variables into the functions. 

This is what i created: 

Here is the link: https://editor.p5js.org/zhuanya28/sketches/vIDc_V0OY 

There is the code:

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

function draw() {
  background(255);

  drawCreature(width / 2, height / 2);
}

let tentacleSize = 80;
let yChange = 6;
let colors = [];
let colors2 = [];

function drawTentacle2(x, y, angle) {
  rotate(angle);
  push();
  let currentColor = 0;

  for (let i = x; i < x + 200; i += 15) {
    colors[currentColor].setAlpha(100);
    fill(colors[currentColor]);
    if (currentColor < colors.length - 1) {
      currentColor++;
    } else {
      currentColor = 0;
    }
    noStroke();
    circle(i, y, tentacleSize);
    y += yChange;
    yChange += 4;
    tentacleSize -= 5;
  }
  yChange = 5;
  tentacleSize = 80;
  pop();
}

function drawTentacle(x, y, angle) {
  rotate(angle);
  push();
  let currentColor = 0;
  tentacleSize = 80;

  for (let i = x; i < x + 200; i += 15) {
    colors2[currentColor].setAlpha(100);
    fill(colors2[currentColor]);
    if (currentColor < colors2.length - 1) {
      currentColor++;
    } else {
      currentColor = 0;
    }
    noStroke();
    circle(i, y, tentacleSize);
    y -= yChange;
    yChange += 4;
    tentacleSize -= 5;
  }
  yChange = 5;
  tentacleSize = 80;
  pop();
}

function colorsDefine() {
  // colors[0] = color("#c9e4ca");
  // colors[1] = color("#87bba2");
  // colors[2] = color("#55828b");
  // colors[3] = color("#3b6064");
  // colors[4] = color("#364958");

  // colors[0] = color("#99e2b4");
  // colors[1] = color("#88d4ab");
  // colors[2] = color("#78c6a3");
  // colors[3] = color("#67b99a");
  // colors[4] = color("#56ab91");
  // colors[5] = color("#469d89");
  // colors[6] = color("#358f80");
  // colors[7] = color("#248277");
  // colors[8] = color("#14746f");
  // colors[9] = color("#036666");
  colors[11] = color("#EBF5CA");
  colors[10] = color("#DFF0A6");

  colors[9] = color("#d9ed92");
  colors[8] = color("#b5e48c");
  colors[7] = color("#99d98c");
  colors[6] = color("#76c893");
  colors[5] = color("#52b69a");
  colors[4] = color("#34a0a4");
  colors[3] = color("#168aad");
  colors[2] = color("#1a759f");
  colors[1] = color("#1e6091");
  colors[0] = color("#184e77");

  colors2[0] = color("#103755");
  colors2[1] = color("#0D3655");
  colors2[2] = color("#0E3757");
  colors2[3] = color("#194E77");
  colors2[4] = color("#22608F");

  // colors[5] = color("PaleVioletRed");
}

function drawHead(x, y) {
  colors2[0].setAlpha(255);
  fill(colors2[0]);
  circle(x, y, 150);
}

function drawFace(x, y) {
  noStroke();
  fill(255);

  rect(x - 60, y - 20, 40, 20);
  rect(x + 20, y - 20, 40, 20);
  arc(x + 40, y - 30, 20, 20, PI, 0);
  arc(x - 40, y - 30, 20, 20, PI, 0);
  arc(x, y + 20, 80, 80, 0, PI);
  fill(colors2[0]);
  arc(x - 40, y, 20, 20, PI, 0);
  arc(x + 40, y, 20, 20, PI, 0);

  arc(x + 10, y + 20, 20, 40, 0, PI);
  arc(x - 10, y + 20, 20, 40, 0, PI);
}

function drawCreature(x, y) {
  colorsDefine();
  translate(x, y);

  for (let i = 0; i < 2 * PI; i += PI / 6) {
    drawTentacle(0, 0, i);
  }

  for (let i = PI / 8; i < 2 * PI; i += PI / 8) {
    drawTentacle2(0, 0, i);
  }
  drawHead(0, 0);
  drawFace(0, 0);
}

• How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?

I would say that having computer draw something for you might be a little bit less efficient as you have to come up with geometrical (mathematical) interpretation of a shape and its position, whilst in real-life you just draw whenever and whatever you can, you don’t have to have a function or even a name for it. This is a big advantage of in-person drawing:)

However, computers are very great at drawing a lot of elements pretty fast and also provide freedom to try a lot of iterations without having to draw something from scratch again. It is very had to change an oil painting’s background, however a couple of characters to change, press run, and boom! you’re done. also, again, can replace all the circles with triangles, change all the colors, make computer calculate some random distribution very quickly and, recalculate it, to create an iteration! this is very useful and cool, and something that you cannot do at such speed in real-life drawings.

• What properties have you manipulated in the repetition? Describe your observations and visual outcomes during the process.

Shapes mostly. I believe that allows me to place a lot of shapes in different positions easily.

• What makes a good generative pattern?

I believe some interesting composition and pleasant interesting shapes and colors would do:) But I believe this is up to each person to identify!

discussion of my experiments:

starting with first 4: (1st row and 1st one on the second)

those are randomly generated in size shapes that also have their colors differ depending on their place on canvas. they looked quite interesting so i had a lot of fun with them.

next two are a bit more exploration of circles and their sizes. went a bit crazy with the 6th one but it was kind of worth it.

last three were created by outlining a lot of lines that would each have a pair and then, when the frequency of line appearance increased, it become one, very unexpected gradient. 

link: https://editor.p5js.org/zhuanya28/sketches/eDiYZJses

• List math functions that you utilized in your animation. Please share your experience while using them. What functions did you find useful? What made you confused and struggle?

Sin(), cos(), noise()?, random()?, map()?

I found all of them quite useful, especially the sin() and cos() ones as it allowed me to create some interesting shapes.

• What kind of motion have you explored? What was the process like while combining them?

I was trying to practice as much as I could with these functions so I chose creating angular motion as it requires all the interesting functions:) I just wanted to create something interesting and be on time for the GIF to be created;

• How did you adjust sin() values using map() function? Describe the effectiveness.

this is how I used sin() and map() to make the diameters of the circles follow sine pattern.

dia = map(sin(frameCount * 0.01), -1, 1, 2, 30);

• How can circular (angular) movement be generated using sine and cosine?

this is how my code deals with it:

angle = angle + angleVel;

x = width / 2 + cos(angle) * radDist; 
y = height / 2 + sin(angle) * radDist;

i have an angle variable that increases and the sin() or cos() changes so it finds the right new spot.

in my code i have also included the incrementation of “radDist” so that the radius of the circle was increasing every loop.

link to the code: https://editor.p5js.org/zhuanya28/sketches/RLpzRR0aR 

This recitation I decided to focus on the functionality of the drawing app (to make it as functional as I had time for :))

I ended up creating an interactive drawing environment where I could choose the shape to draw with along with the color used. For the shapes, I narrowed down to the three main ones: line, triangle and circle. For the colors, I decided to stick to red, green and blue (and, initially, white). 

The functionality is the following: 

• pressing the inside-circles shapes switches the shape (line, circle, triangle)
• the current shape-circle is lit up with the current color
• to change the color ‘r’ ‘g’ and ‘b’ keys can be pressed
• to change the size/stroke weight of the shape upper arrow and down arrow can be pressed
• the current size/stroke weight along with the name of the shape and the color are tracked and displayed using the very top-left circle and text.

If I could work on it more, I would probably add some more shapes, colors and an eraser tool. 

Example of an abstract artworks that could be created:

• Variables are used to store information to be referenced and manipulated in your sketch. Describe how you used variables and their purpose in your sketch.

I used variables everywhere. I had variables that change, variables that are local as well as global. Some of them were also stored in the array and one of them was an object. I believe they were very important in creating a small yet interactive application like this. These are my main global variables:

let currentColor = {
  r: 255,
  g: 255,
  b: 255,
};

let shapes = ["line", "circle", "triangle"];
let currentShape = 0;

let sWeight = 1;

as it can be seen, they are pretty useful when some value is changing or need to be accessed from various functions.

And, of course, mouseX and mouseY were quite integral to the program.

• Conditions allow us to control what the program does and perform different actions based on “if” logic statements. They enable the user to interact with the program. Describe the interactive methods you applied in your program, utilizing conditionals.

As I mentioned, I had to switch colors, sizes and shapes depending on the key, keyCode or place (mouseX and mouseY) where mouse was pressed. 

Here is the color and strokeWeight (=size as well) change code:

if (keyIsPressed) {
    if (key === "r") {
      currentColor.r = 255;
      currentColor.g = 0;
      currentColor.b = 0;
    } else if (key === "g") {
      currentColor.r = 0;
      currentColor.g = 255;
      currentColor.b = 0;
    } else if (key === "b") {
      currentColor.r = 0;
      currentColor.g = 0;
      currentColor.b = 255;
    }
    fill(currentColor.r, currentColor.g, currentColor.b);
    circle(40, 40, 20);
    if (keyCode === UP_ARROW) {
      sWeight = sWeight + 1;
    } else if (keyCode === DOWN_ARROW) {
      sWeight = sWeight - 1;
    }
  }

as for the changing the shapes, I was using dist() function to identify whether the mouse was pressed inside a certain shape-changing circle. Otherwise, I would just call the drawTheShape() function:

if (mouseIsPressed) {
    if (dist(mouseX, mouseY, 40, 70) <= 28) {
      currentShape = 0;
    } else if (dist(mouseX, mouseY, 70, 70) <= 28) {
      currentShape = 1;
    } else if (dist(mouseX, mouseY, 100, 70) <= 28) {
      currentShape = 2;
    } else {
      drawTheShape();
    }
  }

• What are the differences between key and keyCode?

keyCode is a veriable that can be used to access “special” keys that could be found on keyboard however are unable to be represented by a single character (usually). in my application i used keyCode to track the pressing of Up and Down arrows.

i used key to access ‘r’, ‘g’, ‘b’ keys. 

here is the video of me showing how the program works:

the link to my p5:

https://editor.p5js.org/zhuanya28/sketches/QVNfkxJc3

the full code:

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

let currentColor = {
  r: 255,
  g: 255,
  b: 255,
};

let shapes = ["line", "circle", "triangle"];
let currentShape = 0;

let sWeight = 1;

//drawing the shape function
function drawTheShape() {
  if (shapes[currentShape] === "line") {
    stroke(currentColor.r, currentColor.g, currentColor.b);
    strokeWeight(sWeight);
    line(pmouseX, pmouseY, mouseX, mouseY);
  } else if (shapes[currentShape] === "circle") {
    fill(currentColor.r, currentColor.g, currentColor.b);
    circle(mouseX, mouseY, sWeight);
  } else if (shapes[currentShape] === "triangle") {
    fill(currentColor.r, currentColor.g, currentColor.b);
    triangle(
      mouseX - sWeight,
      mouseY + sWeight,
      mouseX,
      mouseY - sWeight,
      mouseX + sWeight,
      mouseY + sWeight
    );
  }
}

function draw() {
  noStroke();
  textSize(15);
  fill(0);
  rect(60, 30, 80, 20);
  fill(currentColor.r, currentColor.g, currentColor.b);
  text(shapes[currentShape], 60, 45);
  circle(40, 40, 30);

  //the line circle
  if (shapes[currentShape] == "line") {
    fill(currentColor.r, currentColor.g, currentColor.b);
  } else {
    fill(255);
  }
  circle(40, 70, 28);
  stroke(0);
  strokeWeight(2);
  line(30, 80, 50, 60);
  noStroke();

  //circle circle
  if (shapes[currentShape] == "circle") {
    fill(currentColor.r, currentColor.g, currentColor.b);
  } else {
    fill(255);
  }
  circle(70, 70, 28);
  fill(0);
  circle(70, 70, 15);

  //triangle circle
  if (shapes[currentShape] == "triangle") {
    fill(currentColor.r, currentColor.g, currentColor.b);
  } else {
    fill(255);
  }
  circle(100, 70, 28);
  fill(0);
  triangle(90, 75, 100, 60, 110, 75);

  circle(130, 70, 20);
  if (keyIsPressed) {
    if (key === "r") {
      currentColor.r = 255;
      currentColor.g = 0;
      currentColor.b = 0;
    } else if (key === "g") {
      currentColor.r = 0;
      currentColor.g = 255;
      currentColor.b = 0;
    } else if (key === "b") {
      currentColor.r = 0;
      currentColor.g = 0;
      currentColor.b = 255;
    }
    fill(currentColor.r, currentColor.g, currentColor.b);
    circle(40, 40, 20);
    if (keyCode === UP_ARROW) {
      sWeight = sWeight + 1;
    } else if (keyCode === DOWN_ARROW) {
      sWeight = sWeight - 1;
    }
  }

  fill(0);
  textSize(15);
  text(sWeight.toString(), 32, 45);
  textSize(20);
  fill(255);
  let s = "Press r, g or b, to change colors";
  text(s, 300, 580);
  if (mouseIsPressed) {
    if (dist(mouseX, mouseY, 40, 70) <= 28) {
      currentShape = 0;
    } else if (dist(mouseX, mouseY, 70, 70) <= 28) {
      currentShape = 1;
    } else if (dist(mouseX, mouseY, 100, 70) <= 28) {
      currentShape = 2;
    } else {
      drawTheShape();
    }
  }
}

Reference picture:
The sketch: I have divided the paper into rectangle pieces to map the approximate position of the sketch & outlined the shapes. Given that the chosen picture is already quite geometrical I did not need to do much geometrization myself.

I have utilized quite a lot of shapes in my code, including rect(), circle(), line(), vertex()-based shapes and even sinus function to create the wavy part of the bottom sign.

• Did you prefer exploratory programming, or using the reference? Why? Could you imagine a situation where you would use the other technique?

I was using both! I would usually get some guidelines from the reference website and then continue on changing the parameters of the function myself. I believe this method works best for me as it provides a certain head-start when utilizing new functions.

• In which ways (if any) was drawing on a piece of paper (as we did in our exercise) easier than writing the program?

Well, I didn’t need to think about the positions of the shapes, nor the complexity or color:) so it was definitely easier.

• In which ways (if any) is writing the program easier than drawing on the piece of paper?

I wouldn’t say it is easier but it was way more interesting cause I had color and also the possibility to understand how, for example, the vertex() function works, as well as how I can utilize the sin() when creating the wavy things.

one of the most interesting bits of text would be the wavy part:

  noFill();
  beginShape();
  for (let y = initialY; y <= initialY + 190; y += 1) {
    let x = map(sin(y * 0.2), -1, 1, initialX + 5, initialX - 5);
    vertex(x, y);
  }
  endShape();

  let initialX1 = width / 2 - sizeOfSign / 2 + 81;
  let initialY1 = height / 2 + 70 - 10;

  beginShape();
  for (let y = initialY1; y <= initialY1 + 190; y += 1) {
    let x = map(sin(y * 0.2), -1, 1, initialX1 + 5, initialX1 - 5);
    vertex(x, y);
  }
  endShape();

the shape of the right one (with the lines and stuff):

  fill(36, 39, 223);
  rect(width / 2 + sizeOfSign, height / 2 - 100, sizeOfSign, 200);
  circle(width / 2 + sizeOfSign + 50, height / 2 - 100, 100);
  circle(width / 2 + sizeOfSign + 50, height / 2 + 100, 100);

  stroke(128, 244, 255);

  circle(width / 2 + sizeOfSign + 50, height / 2 - 100, 90);
  circle(width / 2 + sizeOfSign + 50, height / 2 + 100, 90);
  rect(width / 2 + sizeOfSign + 5, height / 2 - 100, sizeOfSign - 10, 200);

  stroke(252, 194, 252);
  //upper part
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 - 40,
    height / 2 - 100 - 20
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 - 25,
    height / 2 - 100 - 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50,
    height / 2 - 100 - 45
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 + 25,
    height / 2 - 100 - 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 + 40,
    height / 2 - 100 - 20
  );

  //lower part

  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 - 40,
    height / 2 + 100 + 20
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 - 25,
    height / 2 + 100 + 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50,
    height / 2 + 100 + 45
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 + 25,
    height / 2 + 100 + 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 + 40,
    height / 2 + 100 + 20
  );

and the shape of the left one:

  fill(200, 44, 0);
  rect(width / 2 - sizeOfSign * 2, height / 2 - 100, sizeOfSign, 200);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 5, sizeOfSign - 15);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 + 100 - 5, sizeOfSign - 15);

  strokeWeight(2);
  stroke(255, 255, 0);
  rect(
    width / 2 - sizeOfSign * 2 + 5,
    height / 2 - 100 + 5,
    sizeOfSign - 10,
    190
  );
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 5, sizeOfSign - 25);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 + 100 - 5, sizeOfSign - 25);
  noStroke();

  fill(200, 44, 0);
  rect(
    width / 2 - sizeOfSign * 2 + 11,
    height / 2 - 100 + 5,
    sizeOfSign - 20,
    190
  );

  strokeWeight(2);
  stroke(255, 205, 243);
  fill(152, 28, 186);
  rect(
    width / 2 - sizeOfSign * 2 + 12.5,
    height / 2 - 90,
    sizeOfSign - 25,
    180
  );
  noStroke();

  fill(200, 44, 0);

  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 10, sizeOfSign - 35);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 100, sizeOfSign - 35);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 190, sizeOfSign - 35);

I am pretty satisfied with how this experiment turned out. Even though I spent unreasonable time working on some of the parts, I believe that the outcome was worth it! You can see the screenshots and the code below:) P.S. I could not decide which background color works here) even tried blue, green, red, grey, etc. decided to attach black and white here:)

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

let sizeOfSign = 100;

function theTopOne() {
  fill(70, 50, 65);
  noStroke();
  rect(width / 2 - sizeOfSign / 2, height / 6, sizeOfSign, 200);

  //the outline
  strokeWeight(2);
  stroke(0, 255, 218);
  rect(width / 2 - sizeOfSign / 2 + 5, height / 6 + 5, sizeOfSign - 10, 190);
  noStroke();

  let s = "红包莫牢牢";
  textSize(30);
  fill(0, 255, 218);
  text(s[0], width / 2 - sizeOfSign / 2 + 35, height / 6 + 20, 100, 200);
  text(s[1], width / 2 - sizeOfSign / 2 + 35, height / 6 + 52, 100, 200);
  text(s[2], width / 2 - sizeOfSign / 2 + 35, height / 6 + 84, 100, 200);
  text(s[3], width / 2 - sizeOfSign / 2 + 35, height / 6 + 116, 100, 200);
  text(s[4], width / 2 - sizeOfSign / 2 + 35, height / 6 + 148, 100, 200);
}

function theLeftOne() {
  fill(200, 44, 0);
  rect(width / 2 - sizeOfSign * 2, height / 2 - 100, sizeOfSign, 200);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 5, sizeOfSign - 15);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 + 100 - 5, sizeOfSign - 15);

  strokeWeight(2);
  stroke(255, 255, 0);
  rect(
    width / 2 - sizeOfSign * 2 + 5,
    height / 2 - 100 + 5,
    sizeOfSign - 10,
    190
  );
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 5, sizeOfSign - 25);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 + 100 - 5, sizeOfSign - 25);
  noStroke();

  fill(200, 44, 0);
  rect(
    width / 2 - sizeOfSign * 2 + 11,
    height / 2 - 100 + 5,
    sizeOfSign - 20,
    190
  );

  strokeWeight(2);
  stroke(255, 205, 243);
  fill(152, 28, 186);
  rect(
    width / 2 - sizeOfSign * 2 + 12.5,
    height / 2 - 90,
    sizeOfSign - 25,
    180
  );
  noStroke();

  fill(200, 44, 0);

  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 10, sizeOfSign - 35);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 100, sizeOfSign - 35);
  circle(width / 2 - sizeOfSign * 1.5, height / 2 - 100 + 190, sizeOfSign - 35);

  let s = "扎台型";
  fill(255, 255, 0);
  text(s[0], width / 2 - sizeOfSign * 1.5 - 15, height / 2 - 100 + 17.5);
  text(s[1], width / 2 - sizeOfSign * 1.5 - 15, height / 2 - 100 + 110);
  text(s[2], width / 2 - sizeOfSign * 1.5 - 15, height / 2 - 100 + 202.5);
}

function theRightOne() {
  fill(36, 39, 223);
  rect(width / 2 + sizeOfSign, height / 2 - 100, sizeOfSign, 200);
  circle(width / 2 + sizeOfSign + 50, height / 2 - 100, 100);
  circle(width / 2 + sizeOfSign + 50, height / 2 + 100, 100);

  stroke(128, 244, 255);

  circle(width / 2 + sizeOfSign + 50, height / 2 - 100, 90);
  circle(width / 2 + sizeOfSign + 50, height / 2 + 100, 90);
  rect(width / 2 + sizeOfSign + 5, height / 2 - 100, sizeOfSign - 10, 200);

  stroke(252, 194, 252);
  //upper part
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 - 40,
    height / 2 - 100 - 20
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 - 25,
    height / 2 - 100 - 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50,
    height / 2 - 100 - 45
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 + 25,
    height / 2 - 100 - 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 - 100,
    width / 2 + sizeOfSign + 50 + 40,
    height / 2 - 100 - 20
  );

  //lower part

  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 - 40,
    height / 2 + 100 + 20
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 - 25,
    height / 2 + 100 + 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50,
    height / 2 + 100 + 45
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 + 25,
    height / 2 + 100 + 37
  );
  line(
    width / 2 + sizeOfSign + 50,
    height / 2 + 100,
    width / 2 + sizeOfSign + 50 + 40,
    height / 2 + 100 + 20
  );

  let s = "豁翎子";
  noStroke();
  fill(252, 194, 252);
  textSize(40);
  text(s[0], width / 2 + sizeOfSign + 30, height / 2 - 100 + 25, 100, 200);
  text(s[1], width / 2 + sizeOfSign + 30, height / 2 - 100 + 80, 100, 200);
  text(s[2], width / 2 + sizeOfSign + 30, height / 2 - 100 + 135, 100, 200);
}

function theBottomOne() {
  fill(76, 55, 82);
  stroke(76, 55, 82);

  beginShape();
  vertex(width / 2 - sizeOfSign / 2, height / 2 + 70);
  vertex(width / 2 - sizeOfSign / 2 + 30, height / 2 + 45);
  vertex(width / 2 - sizeOfSign / 2 + 70, height / 2 + 45);
  vertex(width / 2 - sizeOfSign / 2 + 100, height / 2 + 70);
  vertex(width / 2 - sizeOfSign / 2 + 100, height / 2 + 240);
  vertex(width / 2 - sizeOfSign / 2 + 70, height / 2 + 265);
  vertex(width / 2 - sizeOfSign / 2 + 30, height / 2 + 265);
  vertex(width / 2 - sizeOfSign / 2, height / 2 + 240);
  endShape();

  stroke(254, 254, 70);
  strokeWeight(2);
  beginShape();
  vertex(width / 2 - sizeOfSign / 2 + 5, height / 2 + 70 + 2.5);
  vertex(width / 2 - sizeOfSign / 2 + 30, height / 2 + 45 + 5);
  vertex(width / 2 - sizeOfSign / 2 + 70, height / 2 + 45 + 5);
  vertex(width / 2 - sizeOfSign / 2 + 100 - 5, height / 2 + 70 + 2.5);
  vertex(width / 2 - sizeOfSign / 2 + 100 - 5, height / 2 + 240 - 2.5);
  vertex(width / 2 - sizeOfSign / 2 + 70, height / 2 + 265 - 5);
  vertex(width / 2 - sizeOfSign / 2 + 30, height / 2 + 265 - 5);
  vertex(width / 2 - sizeOfSign / 2 + 5, height / 2 + 240 - 2.5);
  vertex(width / 2 - sizeOfSign / 2 + 5, height / 2 + 70 + 2.5);
  endShape();
  // rect(width/2-sizeOfSign/2, height/2+50, sizeOfSign, 200);

  let initialX = width / 2 - sizeOfSign / 2 + 20;
  let initialY = height / 2 + 70 - 10;

  point(initialX, initialY);
  noFill();
  beginShape();
  for (let y = initialY; y <= initialY + 190; y += 1) {
    let x = map(sin(y * 0.2), -1, 1, initialX + 5, initialX - 5);
    vertex(x, y);
  }
  endShape();

  let initialX1 = width / 2 - sizeOfSign / 2 + 81;
  let initialY1 = height / 2 + 70 - 10;

  beginShape();
  for (let y = initialY1; y <= initialY1 + 190; y += 1) {
    let x = map(sin(y * 0.2), -1, 1, initialX1 + 5, initialX1 - 5);
    vertex(x, y);
  }
  endShape();

  let s = "神兜兜";
  noStroke();
  fill(254, 254, 70);
  text(s[0], initialX1 - 50, initialY1 + 20, 100, 200);
  text(s[1], initialX1 - 50, initialY1 + 70, 100, 200);
  text(s[1], initialX1 - 50, initialY1 + 120, 100, 200);
}

function draw() {
  theTopOne();
  theLeftOne();
  theRightOne();
  theBottomOne();
}