Static Image
For the static image, I want to create something symmetrical and aesthetic.
First I tried to create a group of the ellipse in the center. After assigning them in the right order, I applied color and stroke on them.
Then I started to create rectangles outside of the ellipse. To make sure it looks good, I rotate them through degrees.
After that I wanted to create some ellipse in the corner, so I used push() and pop() to clean the effect of function translate().
After finalizing all the ellipse, I wanted to add a good background picture to it rather than the pure color background. I searched for references about how to import pictures and how to put it in the center. I added another two lines too.
https://p5js.org/reference/#/p5/image
https://p5js.org/reference/#/p5/imageMode
Finally, I added two more ellipse parts to enrich the picture. Because I was writing the whole image in once and making sure their positions, so I didn’t use position representations like width/2 or height/2. The lines can also be achieved by using vertex(). I will pay attention to that and use them in the future.
Animation
Initially, I was creating something like the screenshot below using the code learned during the workshop. However, it doesn’t look really good. Therefore, I switched rect(x,y,50,50); with ellipse(0,0,x,y), where the website will start drawing from the center in a certain order.
However, the latest created shape on the top is influencing the visual effect a little. I asked Moon if the problem can be fixed, and Moon suggested that I can use noStroke() and create two same ellipses rotating in different directions to improve it, and it looks better! It’s like a dandelion.
But I don’t want it to keep growing, so I wrote an if statement following the if statement Moon wrote about the opacity.
if (x>3) {
x=x-random(0,5);
}
From ⬇️
if (frameCount > 100) {
alpha = alpha – 1;
}
Now it is a pretty fixed small dandelion. To create something outside of the dandelion, I tested ellipses, rectangles, and lines. Eventually, I created 3 ellipses and 2 lines in the outer range. I also applied a much wider color range for the dandelion, but with the cover of lines and ellipses, the dandelion’s color is not that obvious anymore. But it looks fine so I just leave it there.
However, the lines and ellipses will leave a circle in the center after many frame counts, which cannot be solved.