Category: recitations

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