Project A: Leave Me Alone!

The Unknown Creature: SN-1

The status of SN-1 when it is partially relaxed and blinking

 

The Elevator Pitch

SN-1 is an unknown sea creature that is very cautious to its surrounding; its eye will lock on any subject that comes into its sight. When the subject(our mouse) touch it or gets too close, it will increase in size, rapidly shake its body, an its pupil will turn red.

Abstract

The name of the creature comes from where it is found and the order in which the unknown creatures are found. “S” means sea creature; “N” means north; and “1” means that it is the first unknown creature that the team found in the area. The area it is found is highly polluted with toxic chemical disposal from factories and energy-generating constructions, therefore air bubbles are constantly created from chemical reactions within the water. SN-1 is currently placed in one of the specially-made glass tanks in a secret laboratory under the observation of a group of biologists. Since it has gone through painful past due human activities, it is extremely cautious and can easily get scared. Once something appears in its sight, its eye will lock on the subject until the subject disappears. Getting too close to it might turn on its stress response, where it starts to shake, grow bigger, open its eye wider, and its pupil turns red. The stress response remains for a short period, opening its eyes wide for a few seconds after the subject leaves. However, the pupil immediately changes to its initial color(blue) once the subject moves away. In addition, SN-1 changes its pupil color to black to avoid attention at night or when the lights are closed. That way, SN-1 makes itself less visible in the dark.

 

Process: Design and Composition

My design is inspired by the the black dancing fluid in the ferrofluid speaker. In my project, the creature is also black, and moves around in the water. To make my creature looks more lively, I decided to add an blue eye to it and made the eye to blink. The background is set as neon green to give a sense of pollution and toxicity, and the bubbles in random sizes appearing from the bottom makes the background less empty and adds more definition to the “polluted water” setting. Initially, the bubbles and the creature’s motions are the same, in which they appear from the center of the screen, start moving randomly up and down, and bounce back when they hit the boundary of the tank. Since it is not the way sea creatures and the water bubble move, I change them separately into different motions. For the movement of the creature, I ended up using the noise() function, which can produce more natural and harmonic random sequence compared to the standard random() function. The creature now moves a lot slower in the water with a more natural behavior within the tank. I kept the random() function of the bubbles to make them shake rapidly when they appear and disappear from the bottom to the top. In addition to the blinking of the eye, the left and right movement of the pupil with the control from the mouse is integrated by setting new variables as the first interaction of the project. This interaction makes the creature to always look to the direction of the mouse and it make sense, because the creature is supposed to be stressful about its surrounding all the time. 

The panicking creature when the mouse pressed on it 

In purpose of making my creature to avoid human contact and to move away from the mouse, I tried to use the easing method in p5, however, the movement of the creature becomes hard to control, in which it bounces one time even after it moves away from the mouse. Therefore, I decided to add a different interaction: when the mouse is pressed near the creature or on the creature, it will start panicking. To make that panic effect, I decided to let it expands its size by a little, make the pupil red to show the anger or sign of danger, and let it shake rapidly to show that it is scared. To make the creature shake I changed the initial speed I set for its movement in the state when the mouse is released. 

The pupil turns black when the light is closed (key “c” is pressed)

The project will be boring if I only have one setting. To improve my project and make it more fun to play with, I decided to add more interaction, which is the night mode of the creature. When the environment changes, the creature should change as well, here, the pupil of the creature turns black. The creature will be a little hard to track when the body and the pupil are both dark, and this design will add to the creature’s personality of disliking attention. Though it is in dark mode, I don’t use black in the background, because it will make the project less aesthetic when the creature except for its eye to completely disappear in the background, so a dark green color is used in my final version. For the viewer to activate the dark mode or to “close” the light, the key “c” needs to be pressed. 

SN-1 panicking in the dark 

 

Process: Technical

My project started simply and mainly using arrays, random(), sin(), translate(), and variables. The array, sin(), and random() functions are used to control the blinking, the speed of the creature, and the bubbles. The creature is moving up and down in a random speed, but in a predictable pattern, and both the creature and the bubbles are bouncing in the water. This combination illustrated an unnatural visual with everything within the canvas bouncing and the creature blinking in a constant speed. Besides, I had troubles with the interactions as well: the creature is supposed to go back to its relaxed speed and movement after the mouse is released, however the speed remains fast and uncontrollable even when the mouse is released. Moreover, when I tried to make the pupil move with the mouse through conditioning the height of the pupil to depend on the same variable to the height of the outer eye (to decrease the size of the pupil when the overall eye blink), the code failed. Aside from these initial problems, I successfully code the interaction for the light closed condition and the movement of the shaking bubbles in the background. However, my work was still out of organization at this point.

Fortunately, I asked Prof. Marcela for help, and she helped me figure out how to make the creature move and blink more naturally(and randomly), control the pupil with the mouse position, and control the speed of the creature after the mouse is released (I really appreciate Prof. Marcela’s help!!). Firstly, instead of just using random() function to control the speed of the creature we use floor() and noise() functions. It makes the creature’s movement more harmonic and slow in the water. Secondly, to make the eye blink unpredictably, a function for blink is created and we use the random(), cos(), and abs() within the function. The creature blink when the angle variable reach certain value compared to frameCount and freq, and the occurrence of the blink() function is controlled with the use of boolean. Thirdly, the speed of the creature after the mouse is released is finally controlled with the use of mouseReleased() function. I learned that in claiming variable of the speed, when I wanted to change it once under a specific condition, it will be hard to make it possible by just using if() else() conditions with boolean and mouseIsPressed() function. Things will be easier if the variables are set within a mouseRelease() function. That way, the creature will only change the speed once and go back to its original movement. Finally we reset the variables for the pupil and claim them differently to make it move while it also shrink when the creature blink. For example, the height of the pupil no longer depend on the eye height, instead it is conditioned with variable of the size of the creature. 

If I had the chance to make the project all over again, I would like to add the interaction of the creature moving away from the mouse when the mouse gets closer. To do so, I will have to practice and learn more about technique of easing. Moreover, instead of the creature looking at the mouse, I want to turn the mouse into an object or a shadow to make it into a scene where the creature is actually looking at certain subject. The change in size of the creature when it gets pressed could be bigger as well. With bigger change in size, the creature will looks like it is scaring the subject away by pretending that it is huge. 

 

Reflection and Future Development

I have a big development in between my project proposal and the final result, especially on the motion of the animated object, and the original idea itself. My project proposal offers the idea of a round creature living in a tank of green toxic water, and it hates human. The title remains the same too from the beginning to the end which both include “Leave Me Alone”. The idea for the interaction and the motion of the creature changes as I receive useful feedbacks from my fellow classmates and Prof. Marcela. A few of the suggestions that I used in my projects are to make the creature blink and shake, change the eye color as a reaction, and to make the behavior of the creature to be more realistic in the water(flow around slowly). 

In general, I am satisfied with my project in the perspectives of the liveliness of the creature, the story background, the natural movement of the bubbles, and the eye behaviors(blinking, looking side ways, opening wide). I think these parts work really well. On the other hand, I think more interactions can be included in this project that present the vulnerability of the creature and how the creature can overcome it. For example, the creature can be more stressful and be scared for a longer time, then by clicking a key on the keyboard, we feed him food, and he slowly calms down. Overall I learned a lot from this project that I can implement further in the future, not just about the coding techniques, but also to have the thought to observe the living things and the object in reality and applying their motions and behavior into our creations! 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *