Project Title:  Dewdaisy (monomer)

Link to your project:

https://editor.p5js.org/xj2359/full/XXhHgk0WQ

Brief Description and Concept:

We caught this shy yet fascinating creature in the garden and cultured it in a petri dish. Without any disturbance, the creature moves in a perfect circular trajectory. However, it is very timid, and if its white body is touched, it reacts with irregular shaking. If the stimulus is removed, it quickly returns to its original state. The creature's yellow sac is highly sensitive, and even a slight touch can cause its death. Its segments have a fluorescent effect, making it beautiful in the dark. After death, the creature melts into a volatile green slime, which disappears shortly afterward. Research on this creature is ongoing, and we will continue studying its diet, reproduction, and other aspects.

Coding:

This part is basically for drawing the slime when the creature is dead as well as making sure that the slime is in the same location as the body is. Simultaneously, the slime's opacity decreases overtime until it completely vanishes.

When the white part, namely body, is touched, the creature will initiate a dampened oscillation process, with the amplitude (indicated by freq in the code) decreasing gradually until it reaches zero.

Generation of pseudo-random spots (without the use of lists, and gives a fixed result every frame). The code works by first putting all the spots into a square grid, and then adding a random offset between -1 and 1 to each of the X and Y coordinates.

Various Versions of Failure and Success:

Failure:

Initially, the slime effect did not fade properly because the opacity was not being adjusted correctly. It remained at full opacity.

Success:

After adjusting the slime’s opacity and ensuring that the slimeopacity variable decreases each frame, the fading effect worked as expected. The creature also reacts to mouse movements more smoothly after tweaking the noise function to provide randomness in the spot placement.

Alternative Code Block:

Original Code:

slimeopacity -= 1;

fill(120, 255, 60, slimeopacity); // Semi-transparent glowing slime

Alternative Approach (Using lerp() for smooth fading):

slimeopacity = lerp(slimeopacity, 0, 0.05); // Smooth transition to zero opacity

fill(120, 255, 60, slimeopacity); // Semi-transparent glowing slime

Explanation:

The original approach subtracts 1 from the opacity each frame, which creates a step-like fade effect. The alternative uses lerp() to smoothly transition the opacity from its current value to 0 over time. This approach creates a more visually pleasing, gradual fade effect.

Findings / Lessons Learned:

Understanding Noise: 

I learned how noise can create natural-looking variations for the creature's body parts, such as the sac and spots.

Slime Effect Optimization: 

Managing opacity with smooth transitions (using lerp()) enhances visual effects and makes the interaction smoother.

Debugging Interactivity: 

By ensuring accurate collision detection with mouse coordinates, the creature's interactivity became more reliable.

When/Why to use translate(), push(), and pop()?

translate():

translate() is used to change the origin of the drawing. In my code, translate(400, 250) moves the origin to the center of the canvas, making it easier to rotate and draw around that point. This is necessary because it allows all elements to transform around the center without adjusting each element's position individually.

push() and pop():

push() and pop() are used to save and restore the drawing state. In my code, push() saves the current transformation (like rotation and translation), and pop() restores it afterward. This ensures that when drawing different parts of the creature, their transformations don't affect each other. For example, it protects the rotation and translation effects while drawing the various parts of the creature, so they don’t interfere with each other.

What is the effectiveness of User-Defined Functions?

User-defined functions, like drawCreature(), make the code more modular and concise. By extracting the drawing logic of the creature into a function, we can reuse this code without having to repeat it every frame. Functions also improve readability and maintainability. For example, if we want to change the shape of the creature's eyes or body, we can modify it in one place rather than multiple places in the code.

What parameters did you add to your functions? How were they manipulated to affect the functions?

In the drawCreature() function, I added two parameters: x and y. These parameters determine the position of the creature. By passing different x and y values, the function can draw the creature at different locations. For instance, calling drawCreature(creatureR, 0) in the draw() function changes the position of the creature’s center, allowing it to move across the canvas over time. By adjusting these parameters, we can control the creature’s position flexibly, enhancing the animation.

What methods/processes in your programming radically changed because of the use of the functions you defined?

Before using drawCreature(), all the details for drawing the creature (like the body, eyes, and sac) were written inside the draw() function, making the code long and repetitive. After using drawCreature(), the drawing logic for the creature is now encapsulated in one function, simplifying the draw() function and making the code more maintainable and scalable. Specifically, using drawCreature() allows us to focus on the creature’s animation effects without having to rewrite the drawing logic every time.