ICM Week1 Homework

How many petals a flower will have? People may think it should be a random number, however, most flowers have 3 petals, 5 petals, 8 petals, 13 petals, and 21 petals, etc. Yes! Its Fibonacci numbers. These numbers also closely related to the golden ratio — a number that has cropped up time and time again in human history for thousands of years. Computation is not just some mathematical term to me. It is the “code” in our lives. It shows me how our nature is structured and I am fascinated by it. I have been coding for a long time and I love the feeling to create something from nothing using code. For this term, I am thinking about making computer vision projects using P5.js(not sure if p5 is powerful enough :). I have been working with human pose and face detection algorithms and at ITP I can make them a creative project.

A spiral aloe (aloe polyphylla) in the UC Berkeley Botanical Garden.

Creating my sketch

I am creating a Spongebob portrait.

Code: https://editor.p5js.org/yzhang33/sketches/tILa0TWZZ

finished portrait

Some hardship encountered:

1. creating sketches needs some precision and math calculations such as curves and custom shapes. It recalled the math I learned when doing this assignment. It took me some time to figure out the equation and range.
2. creating custom shapes also needs some thinking. The built-in function follows some vertex rules and I have to follow it. If I don’t, I will get something strange.
3. Coloring some corners and edges are not trivial. Also need some math calculations
4. P5 does not have a shading function and I am thinking of creating my own brush tool function but I haven't done it yet. Is there a better solution?

constructing Spongebob's body shape

Googling really helped me figured out these problems and also watching P5.js videos taught me some technics using p5. Personally, I don't like the web editor. First, it does not support auto-complete functionality and it does not report a syntax error. Second, it does not implementations(or maybe it does but I don’t know how) which I can call the function from another .js file. This functionality will shorten my code so I don’t have to write long spaghetti code. Third, coloring in p5 might be tricky for customed shapes. And I have to call fill() and stroke() whenever I want to change color. Coloring custom shapes is a drawback for p5 because I have to figure out the math for custom shape’s equation. I am not talking about polygons but the shape such as SpongeBob's body. It will be nice if p5 can have a shape extraction tool in which I can extract another shape using tow shapes.

In general, p5 is a powerful library. It supports many functionalities. I just don’t like the experience using p5 web editor. I’d rather use a text editor such as vsCode and run p5.js on the web server.