PROJECT DESCRIPTION
Freyr’s Room: How an invisible creature lives
- It is a project about the footprint of the invisible creature. It can interact with the user’s mouse movement. The creature will have different reactions to different scenes.
- In this project, users act as scientists to explore the habits of the creature. To start a new day, you should turn on the light first. Then you can see the creature starts to follow you. The creature needs fresh air, so remember to open the window and check the weather. The creature will have differently in different weather. On sunny days, it has a good mood and can multiply. On rainy days, it will feel blue and unwilling to follow you. In this situation, click the mouse to remind it. This creature is lightweight, so it can’t move stably on windy days. When you leave after today’s research, don’t forget to turn off the light.
Self-reflection
1) Process: Design and Composition
I intended to produce an invisible creature so I chose to use its footprints to show its behaviors. The basic interaction with humans is the following. In the beginning, I planned to make the creature interact with the different stuff on the canvas, but I found it hard to make sense to the audience about how and why the interaction happens. After the interaction day, I got the inspiration to let the creature interact with the weather. So I draw a window and let three weather appear randomly and the behavior changes are shown on the footprint of the creature.
2) Process: Technical
- Steps following the mouse
- Using lerp() to make the steps move more like a creature. The new value c we get after the c = lerp(a,b,x) means the point between a and b. So if I write like this, the new point can be refreshed according to the previous position.
If we put these values in an array every once in a while and draw them out, the step will move like an animal.
To achieve the effect of gradually disappearing footprints without repeatedly refreshing the background. I was suggested to draw five steps for each frame count and adapt the color according to the order. So I had to use splice to take elements out of the array to make sure there are only 6 elements in the array. However, after making the footprints rotate in the direction of the mouse. I found the white step in the last can’t entirely cover the previous track. So I still needed to draw the background for every frame count.
Besides, I tried to make the right and left steps appear alternately, I tried to use a boolean to control, but the fact is the interval between the alternate is too short to see.
2. In the sunny situation, beyond the color change, the creature will multiply once, so every process in the multiply only happens once. I used a boolean to make triggers in every step.
When the new generation appears, it needs to keep the color and the position of the old generation at that moment. So I pushed the value to the arrays for the new generation created an original point for the new generation and moved. However, I met with some problems in letting the new generation follow the mouse. So I have to let the old generation appear again.
3. For the reaction in the windy days. I change the endpoint (destination) in the lerp() to move circularly around the mouse. I translate the original point to follow the mouse and move in a circle around the origin.
4. On rainy days, I let the mouse impact the change of the destination of the steps. I discovered that the duration when the mouseIsPressed is too short for the footprint back to the mouse position. So I set a trigger controlled by the mouse press and the distance between the footprint and the mouse position.
5. For the light switch, when the boolean is true, every function runs. when it turns to false, every value should be reset.
3) Reflection and Future Development
I think the reaction to the weather is logical and using the light switch as a refresh point is also good because it can keep the users in the scene.
I need to improve on the details. The footprint shape needs to be different when it’s on the floor and the wall. It should be clearer to show the audience it is the footprint by making a special shape or trying to make it walk instead of jumping. Also, the bell that appears when we click to remind the creature needs to have a nice explanation like where it comes from.
4) Credits & References
https://p5js.org/reference/