Generative Patterns with Transformations
My inspiration: https://digicol.dpm.org.cn/cultural/detail?id=48516b8a4be64a31bb5787218cfdd157&source=1&page=1
Brief: I used lines to depict a traditional Chinese phoenix. I tried to simplify the bird’s shape with clean lines, but still capture the dynamic beauty of the phoenix as it soars.
In this sketch, Captivated by the elegant color scheme of the artifacts, and also inspired by (the visual part, not the tech part because I cannot make it right now) Moon’s example code about lerp() (soooo interesting!!!), I decided to try a little animation using different math functions and transformations.
Here’s the draft while developing this sketch.
To let different elements appear in order, I use frameCount as a timer.
The head and body part are pretty simple. The only thing I need to pay attention to is how I decide the value in sin(), to let the body appear and disappear in a reasonable position. To make the pattern vivid, I change the circle’s size according to the timer.
For the wings2’s part, the value in sin() and cos() is also important. I need to figure out whether it should be positive or negative for the sin() and cos(), and then decide on the angle.
For wings1, I meet difficulty when I was trying to assign the value for x and y. At first I use 3^0.5 for the square root of 3 instead of sqrt(), and I find the position was always incorrect. I then use console.log() to get the value of 190*(3^0.5), and find the problem. 
Console.log(), a very very good way to debug!
I struggled a lot for the background pattern, because I cannot make the pattern like the one on the artifact. After contemplating for a while, I decided, let’s try different math functions! Although it may not be visually appearing ;-D
So, I tried floor, to get the integrate part of the value, which is new to me. I believe, there could be simpler ways to arrange rectangles like this, maybe I can find them in the future.
Other problems:
I’m wondering if there is a way to create different layers in p5js. Because sometimes the background pattern will be generated after my main pattern, and cover up the main pattern.
Also, I’m trying to figure out why after I delete the code about “i”, then the code below cannot work : (
Reference:
Digital Heritage Repository in the Palace Museum https://digicol.dpm.org.cn/list?page=2&k=凤
Example code for Nature of Code https://editor.p5js.org/MOQN/sketches/YWEUFlrbb