​System Building（P5.js）
​Brief
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.
​System Diagram
​Algorhythms Diagram
​Design Process
​
​Problems:
- The sun is out of the canvas
- No "Class" function
​Version 2.0
​Improvements:
- 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
Reflection​
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.