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.