https://editor.p5js.org/zw3122/sketches/KBqYZrYk0
My undergraduate major is Illustration, and I also enjoy animation, music composition, crafting, and experimenting with different ways of storytelling. I have been fascinated by pop-up books and paper engineering because they can transform flat images into physical and interactive experiences. I am curious about how computation can help me explore the geometry and movement behind these structures. In the future, I would like to create a digital tool that allows people to design and test their own pop-up structures before making them with paper. I hope programming can help me achieve the goal.
In line 9, I used fill(R, G, B, alpha) for the light, and I noticed that the transparent color becomes darker over time. Why does this happen?
fill(200,120,200,10)
In lines 34–47, ****I used noFill(), stroke(), and strokeWeight() for the eye lines and glasses, and I noticed that one or more settings also affect the shapes I draw afterward. How does p5.js decide how long a style setting stays active? Why does p5.js remember the previous style setting?
noFill()
stroke(35, 32, 45);
strokeWeight(4);
arc(260, 240, 30, 25, PI, TWO_PI);
stroke(35, 32, 45);
arc(340, 240, 30, 25, PI, TWO_PI);
//glasses
strokeWeight(5);
rect(225, 235, 68, 52, 18);
rect(307, 235, 68, 52, 18);
line(293, 255, 307, 255);
line(225, 250, 205, 240);
line(375, 250, 395, 240);
In lines 74–78: I manually changed the x-coordinates to create symmetrical eyes, ears, and glasses. Is there a simpler way to create symmetry in p5.js without calculating the position of both sides separately?
quad(105, 450, 300, 500, 300, 600, 125, 600);
quad(300, 500, 495, 450, 475, 600, 300, 600);
fill(255, 242, 205);
quad(120, 430, 300, 480, 300, 500, 120, 455);
quad(300, 480, 480, 430, 480, 455, 300, 500);
In lines 37–39: I used PI and TWO_PI to create part of my eye lines with arc(). I would like to better understand how the start and end angles determine which part of the ellipse is drawn.
arc(260, 240, 30, 25, PI, TWO_PI);
stroke(35, 32, 45);
arc(340, 240, 30, 25, PI, TWO_PI);
https://ebookcentral.proquest.com/lib/nyulibrary-ebooks/reader.action?docID=4333728&c=RVBVQg&ppg=27
https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/1-intro/6-comments