Mini Project1 is the first work I completed on Nature of Code, and it is also an important process for me to get familiar with p5.js. In this project, we need to generate some patterns and create an effect to make them move. My initial idea was to make a complex shape that rotated. But since I'm not very familiar with p5.js, I'm going to start by looking at the sample code. cr: NOC Transformations 08 applications

Soon the blendMode () function caught my eye, and I thought it would look brighter, if you put it on a black background it would look like cosmic light. So I first changed the background color to black, and tried to modify the sample code so that the pattern formed an elliptical rotation and continued to expand. I then considered using the same method to add more rotating ellipses and rectangles, but I found it was a bad attempt after I added them. Because my current knowledge cannot fully control that many rotating graphics and make them form beautiful patterns, some ellipses will rotate out of the canvas, and too many shapes will gather in the middle, and the superposition of colors will make the pattern brighter and brighter, and the overall appearance looked not good.

Then I changed my plan by using only a rotating figure of an ellipse and a rotating circle whose center moves over time. To make my canva more full, I decided to use vertex () to draw some static graphics. This was also the beginning of the "Gaze into Space" idea, I used circle () to draw a curve as the horizon, and used the custom shapes of circle () and vertex () to draw a simple person. Color filling makes it look like it's staring into space.

Next, I want to try a function using mouseX and mouseY. I first found a sample code, and then changed the value of size, shape and background. I used the lerp () function to make it move with the mouse, so that it looked like a shooting star on the screen. cr: NOC p5Basics - lerp() 03 target (mouse position)

Finally, I tried to add more interaction by making the rotating graphics change color depending on the mouse position. I used the map () function and fixed the g value, while making r, b and mouse position related, and finally achieved the effect I wanted. When the mouse is moved over canva, the color of the graphics changes, and there is also a shooting star effect.

All in all, this project is a good start. I experienced some challenges along the way because I was unfamiliar with the code and software, but I also adjusted myself to find solutions (although the results were not perfect). I learned several important functions such as rotate (), translate (), lerp (), map (), vertex (), etc. Second, I learned that organizing code is very important, and push () and pop () are important tools for writing programs. More importantly, I adjusted my fear of code and bravely took the first step. In the next few weeks I will focus more on improving my code proficiency and hope to get better and better.

Supplement: 

After finishing the work, I still felt that my work did not achieve the ideal effect, so I went to my Professor. Professor Moon patiently helped me solve the problem. We used the strokeWeight () function to make the ellipse line thicker and look more like it was in the starry sky. We also changed the x and y values of the circle to make the picture look better. More importantly, I learned how to use the blendMode () and random () functions to make the graphics look shiny and dynamic. The improved project looks more beautiful and coordinated. I have learned how to use these functions and consider applying them in future projects.