Week2 Project-Sun and Moon


In the second week, Monday, we learned how to use p5js to program circles and some mouse tracking and some programs to move the mouse color. Using these techniques, I made an interactive effect between the sun and the moon.

My initial idea to make this project is to simulate the effects of the rising sun and the rising moon according to the movement of the mouse. The background color changes according to the mouse movement. Then press the left mouse button to change the sun and moon, and the background will change. It’s very challenging.In the process of production, I used the mouse tracking I learned in class and the color transformation according to the movement of the mouse’s x and y axes. Production also encountered some difficulties. Because what I learned in class is that the color changes with the rgb color you adjust. But what I need to show is the change from red to yellow. So you have to make some adjustments. Then I went to YouTube and searched for tutorials about it. And learned how to change from one fixed color to another fixed color. Then through my own experiment also solved this problem, mainly to be very familiar with the rgb color parameters.This video is just the beginning of the effect. Only the sun effect is made, and the moon effect is not added yet.

Later, I repeatedly studied how the click of the mouse can change into the form of the moon and change the color of the background. I checked the language of mouse press in reference, and then tried to use the properties of radix and even number to realize the changes after mouse press.During the process, I kept adjusting the number of animation refreshes to achieve the effect.

This video is the effect I made

Summarize:This interaction appears to be very simple, not very complicated. But the steps that need to be programmed are still very much need to be thought about before they can be written out. Using the knowledge in class can produce a simple interaction effect or very sense of achievement. I hope that I can continue to make more interesting interactive effects and even make an interactive game through the knowledge I have learned.


Leave a Reply

Your email address will not be published. Required fields are marked *