PROJECT A “Hydrostonevore: The island creature” – Documentation

PROJECT DESCRIPTION

Hydrostonevore: The island creature

2024

CClab Project A

Hydrostonevore is a simple game that shows how a creature reacts to users and environment interaction. This project encapsulates the essence of exploration, discovery, and mutual appreciation, inviting viewers to immerse themselves in a tale of connection and growth within a captivating island setting rich with biodiversity and enchantment.

Explore the enchanting island that the hydrostonevore, is a mythical creature discovered on a remote place in the Caribbean, interacting with humans through color-changing abilities and shape-shifting transformations controlled by arrow movements. The game is supposed to emulate a symbiotic relationship between villagers(the user) and the hydrostonevore as the intention is for the user to immerse in the experience and storyline, as the creature only appears with human presence. Through this game navigate its growth by feeding on stones and reveling in the magic of nature’s interconnectedness.

Instruction Page (main)

1) Process: Design and Composition

In developing my project, I aimed for a fun and animated style. So, I began by sketching out an instruction page on my iPad and then translating them onto p5.js. Using basic shapes I learned about in the first week, I created the scene: a rectangle for the sea, a circle for the island, and a sun in the sky. But, I felt like it needed more, so I added a palm tree. This part required a bit more coding skill to position the shapes correctly. For the sun I added an up and down automatic motion, based on the recommendations given in class I think it would have been a great idea to make the color of the sky change to simulate the sunrise or sunset.

Next, I wanted to separate the different parts of my game. So, I decided to create a new environment where the creatures would interact. For this, I borrowed some code from a design I made during week four. It showed a beach scene with sand on one side and water on the other. I thought this would be a good space for the creatures to move around in.

At first, I wasn’t sure how to combine these two scenes. But, after learning about functions in week five, I figured out how to make it work. I set it up so that when you clicked the screen, it would switch from the instruction page to the game environment.

Once I had that sorted, I started adding more details to the new environment. I put in more palm trees, added some texture to the sand, and made the waves using a simple trick with shapes. I also created a basic creature using shapes like rectangles and circles. I had wanted to add more creatures like crabs, but I ran into some limitations with the canvas size, so I had to stick with just one.

Finally, I added some rocks that would randomly appear in the sand. When the creature collided with them, it would change size. I’ll explain how I did this in more detail later on.

In reflecting on my project’s development, the utilization of basic shapes and foundational coding principles early on provided a solid framework for constructing various elements, facilitating the creation of initial scenes and laying the groundwork for more complex additions like palm tree and creature animations.

Exploring functions during the fifth week enhanced functionality and cohesion, enabling seamless integration of scenes and interactions, improving user experience. Iterative refinement in response to challenges such as canvas size limitations and animation complexities led to adjustments that improved efficiency while maintaining core objectives.

The project’s incorporation of diverse elements, from simple shapes to intricate animations within a cohesive visual narrative, stands out, with a deliberate focus on a cartoony aesthetic enhancing appeal. Through a thoughtful integration of foundational knowledge, I aim my project to offer a unique and engaging experience showcasing the potential of creative coding in creating playful digital environments.

Initial sketch

OriginalEnvironment

newEnvironment

2) Process: Technical

I considered this are the most important parts of my code and show the interactions that are part of the storyline.

Switch Environment with a click!

The picture on the left shows the conditional drawing where if the variable clicked is false, meaning the user does not click the screen the original environment is the only one showing. In this environment the player can read the instructions for the game. The conditional else displays the contrary result which is the new environment. The function mouseClicked is to trigger the screen whenever the user clicks the mouse to toggle between original and new environment. The text function is only placed in the original environment function (which is the instruction page). One thing that I learned is to use the ! mark used for logical negation, flipping the truth value of the expression it precedes.

Collision and Drawing rocks

This part of the code I made an iteration loop over each rock object within the array, for each rock I used an ellipse to draw them. For positioning and sizing the ellipses I used the variables x, y and size as properties in the rock array.

After that I coded the collision detection:

I coded the collision between the shape (Iscircle (circle and rectangle that simulates the creature) and each rock in the environment by using the if statement. Then the variable I calculated the distance between the center of the shape and the center of the rock that it is colliding with (to detect the collision is the distance between the shape and the rock which is less than the sum of their radians) . The way I removed the rock array is by using the rock.splice and shapeSize is used to increase the size of the shape every time it collides with a rock, representing the growing larger upon eating the rocks.

Finally to generate the rocks “randomly” I used the following code:

The if statement checks the frameCount ensures that a new set of rocks is generated periodically, specifically every 250 frames, to maintain the dynamics of the environment. Which triggers the next part. I created a separate function that generates rocks and adds them to the rock array shown above. It loops five rocks, and for each of them it generates random coordinates in the x and y axis within the left side of the canvas , the randomness also includes the size of the rock ranging from 10 to 30. At the end of the code, represents that each one has properties x,y and sized and is pushed to the rock array above.

IsCircle (Change between Circle and Rectangle)

The isCircle is used to determine the shape of the creature. I started by setting the isCircle to try to indicate the control of the user.

Then I made a conditional statement to check if shapeX is equal or greater than half of the canvas width, if it is greater it sets the variable to false making it change to a rectangle, otherwise if it is less than half of the width the shape is a circle indicated by true. In terms of the shapes the ellipse/ circle is red and the rectangle is green.

To move the isCircle I decided to move it by using the arrows. This part of the code handles the movement of the shapes with directions left and right/ up and down with speed defined by shapeSpeed. When isCircle is false the shape is a square and then when its true the shape is a circle. This section of the code provides the basic movement controls for the object based on its shape, allowing the user to navigate within the environment using the arrow keys.

3) Reflection and Future Development

Throughout the development of this project, I explored the concept of interactive environments using p5.js. Initially proposing to create a simulation game where a creature navigates an environment consuming objects which makes it shift sizes, besides that it changes colors and shapes. The project evolved into a functioning prototype with interactive elements such as moving the creature, consuming rocks, and dynamically generating new elements (at the beginning the “rocks” were going to be static), but I figured out that when the food ends the game would be over.

The movement controls and collision detection mechanisms work well in providing an engaging user experience. However, I am less satisfied with the visual aesthetics and could further refine the design to enhance immersion. Incorporating feedback from peers, instructors, and critics. With the first round of critics I added more interactions to the instruction page by adding noise to simulate waves in the ocean and making the sun go up and down. In future iterations, I aim to expand the environment’s complexity, add more interactive elements like the ones suggested by my classmates after my presentation, for example to make other type of food that will make the circle smaller, adjust the size of the circle to be greater than the rocks as it doesn’t make sense (visually) that the creature eats rocks greater than its own size , and refine the visual presentation to create a more immersive and polished experience for the user, which was suggested by Professor Marcela, like making the waves in the newEnvironment don’t follow the same amplitude and frequency for it to avoid looking to linear, as this is not a good representation of what waves look like. Finally, I want to continue to explore interactive simulations and game mechanics to push the boundaries of creative expression in digital environments.