Embedded Files
Project Description
Project Description
BORN IN MAGMA: SM0KE
2024
Interactive Programming Design
p5.js
This is an interactive coding project demonstrating a fictional creature with a certain appearance, movement and living environment.
In this project, the discovered creature "Sm0ke" lives in volcanos with magma. It's relatively shy when facing human beings while very responsive to the volcano. During the interaction, the viewers can pay attention to how the creature's appearance changes with the sound from the volcano and how the creature react when the viewers try to touch it with a mouse.
Process
Process
Design and Composition
Design and Composition
When I first heard that we could design a fictional creature and pretend to be a scientist, I was very excited to create something that's impossible to live and even the opposite of death and that really reminds me of magma which is able to deprive the life of everything it goes through. Thus, I first decided the habitat to be magma. Though fictional, I still wanted the creature to be related to reality to arouse interest from the viewers. What first came into my mind was the smoke from the volcano eruption which is actually one of the main harms the eruption causes as I learned from the textbook. So the final idea of the creature is "smoke" that avoids humans but responds to the call from the volcano and I built everything based on this key idea.
The appearance of the smoke went through some iterations:
At first, the smoke is in the shape of the smoke from a chimney that flows into the air from the bottom to the top of the screen. However, I want the view to be overlooked from the top and the smoke to be a ball shape because that's just more creature-like in my imagination.
The second version was "copied" from a YouTube tutorial. However, that involves many things we haven't learned in class and I imagined the edges of the smoke to be more vague than this version. Thus, I didn't go with this one either.
The third version was very satisfying to me. I made some combination and adjustments to codes we had in class and it turned out to be exactly what I wanted. It really looked like smoke with the overlapping, opacity and especially the motion.
https://editor.p5js.org/kw3508/sketches/jvO5ERNyJ
The final version's based on the third version however slightly different after adding more motions and interactive functions.
Also because of the background, the edge of the circles are visible even with high opacity and I think that's why it looks worse than the third version.
The background was also changed multiple times:
They were all basic graphic designs with the rotation, translation functions we learned in class and move constantly. But my ideal background is a realistic version so I didn't like my background and wasn't able to truly improve after multiple iterations.
What saved me was this sketch from Professor Moon that Marcela suggested:
https://editor.p5js.org/kw3508/sketches/zT4Z7paAu
Because I didn't intend to make the background interactive, so I adjusted the sketch to a automatically changing image:
Technical
Technical
The main technical issue I met was during the two major motions of the smoke: changing with the sound and avoiding the mouse.
The basic logic of changing the size with the sound is simply inserting the sound file and mapping the size with the volume. However, because I wasn't working on one shape but a whole particle, its size wasn't what I was familiar with to control. So I needed to set the range with conditions.
Testing motion: https://editor.p5js.org/kw3508/sketches/VaMe4NDQg
Mapped with the music: https://editor.p5js.org/kw3508/sketches/FszqaMwVm
I struggled a lot with the mouse avoiding interaction. It turned out to be way harder than I estimated. Jiapei explained many math and logic to me in order to make my design work.
I first tried to move the circles once the distance between the mouse and itself fell into a certain range. However, all the circles went in the same direction, and couldn't form a circle shape as I wanted.
To make it look better, I divided the movement into four directions. However, it looks okay only when it's surrounded by the circles while the four dots following around are too obvious whenever it's outside the "smoke".
Jiapei and I both couldn't understand the four dots so they suggested another way of executing the idea:
Multiplying instead of adding could truly solve the problem of directions.
Reflection and Future Development
Reflection and Future Development
There were some details I could improve as Professor Moon and Jiapei suggested: I changed the hand-shaped cursor to a heat-resistant glove to make more sense of the background; I redid the mapping of the sound to make the creature more sensitive to the sound and the changes more obvious.
There are larger improvements I wish I could work on: Though the idea is to mimic smoke to some degree, I think my creature could be more imaginative and interesting-looking. I was really impressed when I saw the creatures with multiple layers that my classmates created and I wish I was more creative when designing the appearance or the characteristics of the creature.
Credits & References
Credits & References
Mentor for the whole project: Marcela Godoy
Professor Moon: https://editor.p5js.org/kw3508/sketches/zT4Z7paAu
With Jiapei providing suggestions: https://editor.p5js.org/kw3508/sketches/m3kzH1Myw
References from YouTube: https://www.youtubeeducation.com/watch?v=ohv52yUCb2Y; https://www.youtubeeducation.com/watch?v=Qf4dIN99e2w
Page updated
Report abuse