​System Building(P5.js)


Select the natural system to model. Create the diagrams describing your system. Build out the environment with the basic relationships and behaviors (graphics can be symbolic.)

Openprocessing link​


​My system description

Sunset and sunrise created in my code may not truly reflect what we observe. I tried to simplify by using circles. In addition, the falling speed and track of snowflakes could be much more complicated in real life. I mainly want to use my code to simulate the major characteristic of sun and snowflakes movement. For a better effect, I replaced this winter natural system with spring, summer, autumn, and winter.

Screen Shot 2021-11-28 at 11.20.01 PM.png

​System Diagram

Screen Shot 2021-11-28 at 11.38.20 PM.png

​Algorhythms Diagram

​Design Process


- The sun is out of the canvas

- No "Class" function 

​Version 2.0


- Add "Class" function

- Making the sun move to the center of the canvas 

- Add a slider bar that users can interact or control the four seasons of Fuji Mt

- Add day & night effect 

Screen Shot 2021-12-15 at 6.04.36 PM.png
Screen Shot 2021-12-15 at 6.07.00 PM.png
Screen Shot 2021-12-15 at 6.03.13 PM.png


I think the most challenging question I faced was how to effectively use class. To start with I was very confused about the purpose of the class and how it’s different from function. And I had no idea to incorporate the class into my Fuji project. Since I didn’t have coding experience before, I think the concept of class is vague and difficult to use. To address this question, I first read some of the codes from the instructor and classmates, and got a basic idea of class structure. The. I watched some YouTube videos and found some good tutorials websites to understand the purpose of class. Unlike function, class is used to put a few related functions to describe an object. This way it’s more organized and easier for us to control the object in the future. I don’t need to use functions over and over again in draw function. Instead, I can use simple commands like move, display to quickly achieve what I want. This is even more convenient if I want to control multiple objects, just like in my Fuji project I created a class to control all the flakes through a for loop. Last I was able to incorporate class into my codes replicate Fuji project.