a. The concept
My idea for the final project is to create a relaxing and interactive experience. While this idea can apply to many concepts, I decided to focus myself on recreating (albeit not 100% similar) the following figure:
Now, the idea is to implement everything that we have learned in class. In the following sections of this blog post, the interaction and goals of this sketch will be explained.
b. The interaction
The interaction will be mostly done via the mouse input. I have not yet thought about other methods of interaction that can be interesting for the vision I try to approach. Nevertheless, if there is any new one, I will report it on the next draft.
c. Design of the canvas
Since my idea is to make something based on the concept, rather than an exact 1:1 copy, I imagined the following sketch for p5js:
If you noticed, there are some numbers dispersed around the sketch. These represent what key concepts from class they will play in this interactive experience. They are explained as it follows:
-
-
- Bottle with seeds: These are mostly done with the help of matter.js for the physics. The idea is that, once they fall into the ground, they will stop in where they landed and a plant will grow using Perlin noise. Likewise, the seeds can be affected by the winds that are represented in the number 3.
- Ants moving from left to right: The ants represented will be moving through the dirt randomly, although they will try to stay inside an established range with the help of a flow field.
- Winds: While they are going to be composed of a particle system, to highlight that winds do exist in the sketch, they are mostly there to provide an additional force for the matter.js bodies.
- Birds flying around: These will be done with the help of a flocking system.
- A tree with moving leaves: The moving leaves will be simulated with the help of some forces.
- Place to grow the seeds: It is basically a combination of grass and dirt. Although, the interesting part of this is that its pattern (to avoid a monotonous appearance) will be done with the help of cellular automata.
-
d. The current progress
Here is my current progress regarding the final project:
Controls: Holding mouse left click: Grab body/element C key: Spawn circle.
Full-screen version: Go to the Full-screen version
e. Used sources
1. flanniganable. “10b How to Make a Compound Body Matter.js.” YouTube, 4 Dec. 2021, www.youtube.com/watch?v=DR-iMDhUa-0. Accessed 25 Nov. 2024.
2. The Coding Train. “5.21: Matter.js: Mouse Constraints – the Nature of Code.” YouTube, 9 Mar. 2017, www.youtube.com/watch?v=W-ou_sVlTWk. Accessed 25 Nov. 2024.