Overall concept
Floral Frenzy is an original design experience which seeks to tap on the emotional responses of the users. Unlike other video games, there is no “winning” or “losing”. Instead, this project relies on the exploration and curiosity of the individual, as well as offering a visually pleasing experience.
The initial ideas consisted of creating a background with multiple static elements, such as mountains, trees, and bushes, and only a few interactive objects that would contain multiple functions. However, after some trial and error, this plan shifted and I decided to add more objects with interactivity in order to balance the weight of static vs interactive.
How does the project work
From the spaceships, floating stones, and blue trees to the massive fantasy-like structure, this project consists of a mystical, otherworldly plane, drawing the user’s attention from one point to another. Nonetheless, the roses are meant to be the main focus of interactivity, as each of these contain a different reaction, such as releasing a symphony, displaying text, or displaying an unexpected result. Nonetheless, in order to produce the illusion of failure and success, two of the roses are programmed to either poison or compliment the user.
Overall the end result is a game-like set of visuals in which the user is given the instructions to interact with the object, these being the roses, and press a single key in order to delve into the real experience filled with animations in the background, vibrant colors, elements of a variety of sizes, and the interactive objects. Two of these objects provide different outcomes which then take the user back to the homepage.
Fullscreen Mode Sketch
Link to sketch: https://editor.p5js.org/imh9299/full/HPfU68QCi
Embedded sketch:
Favorite code snippets
Although it appears to be a simple, clear function and codes at first glance, it took me many hours to decipher how to make the music, text, change of color, and other reactions to activate whenever the user clicked on them. Nevertheless, once it proved to be operational, I was filled with joy and I was proud to have completed it successfully, especially since this is the main interactive attraction of the project.
function mousePressed() {
// helpful debug print
print('mousePressed at', mouseX, mouseY, 'gameState:', gameState);
// Only win/lose while the game is playing
if (gameState === "playing") {
if (winningRose.contains(mouseX, mouseY)) {
print("clicked winningRose");
wonGame = true;
gameState = "end";
return; // stop further handling this click
}
if (losingRose.contains(mouseX, mouseY)) {
print("clicked losingRose");
wonGame = false;
gameState = "end";
return;
}
}
// Other clickable objects (always checked)
if (flower.contains(mouseX, mouseY)) {
print("clicked flower");
song.play();
}
if (messageRose.contains(mouseX, mouseY)) {
print("clicked messageRose");
displayText = !displayText;
}
}
Another code I am very proud of is the one that allows my cut image of a rock float in the background. At the start, I had to introduce all the variables such as the image, the preload function, fixing the size, speed at which it moved, tracking the time, among other things. While this wasn’t the most difficult codes to understand, it took me a while to find a way to transfer them from a clean, almost empty sketch to one filled with more than one hundred codes. Not to mention, once I managed to implement this code, I found myself struggling to make the music in one of my objects play again. Nevertheless, it was worth the effort as I like how this simple animation adds a new layer of life, along the moving spaceship and fantastical creature, compared to the rest of the composition.
let rockX, rockY; // Position of background rock let amplitude = 20; // How far up and down the rock moves let speed = 0.04; // How fast the rock bobs let time = 0; // A variable to track time for the sine wave let rockImage; // Image of the rock
// --- ROCK ANIMATION (only in game) --- let yOffset = sin(time) * amplitude; let currentY = rockY + yOffset; image(rockImage, rockX, currentY, 160, 160); time += speed;
Areas for improvement and obstacles along the way
Some of the major obstacles I ran into was the integration of interactivity to the sketch. While I managed to build the necessary functions, classes, and parameters to apply interactivity for the sounds, text, and other responses, embedding these into my designed objects proved to be far more challenging than I expected. Not only did these responses have to activate as a result of the interaction of the user, but they also had to be contained within the “game-like” structure of the sketch. Furthermore, fixing the position of these objects, along the non-responsive ones, also forced me to explore multiple x and y positions so that the objects, images, and all additional elements could adapt to the windowWidth and windowHeight. Finally, after solving the issue of merging interactivity with the objects, finding a way to assemble Game states and the transitions between start, playing, and end states turned out to be a difficult challenge. Given that my project was specifically designed to be explored and simply be “visually pleasing”, integrating a game-like structure meant finding an end result that would match my project’s story and tone, and remain original. Despite all the struggling, after many hours of exploring and researching the p5 references, libraries, and works done by students in the past, I managed to overcome all these obstacles and offer this final product which I am genuinely happy about.
Some areas of improvement I would like to work on my next project would be the use of interactivity. Although I did include interactive objects, these are not as impressive as I initially thought. I would like to challenge myself to create a more interactive and engaging element such as the games designed by my peers, not only for my assignments but to also implement in my future non-academic works. Furthermore, I would like to learn how to make my codes look “cleaner” and make functions and classes in a way that reduces my stress when I need to find a specific code.
References:
Images: Rocks, Spaceship, and Fantasy structure were downloaded from Pinterest. The fantasy creature is an original design
Mouse press: https://drive.google.com/drive/u/0/folders/1Qx5kltRZwxzt7Z6l-G-mabzWDUs7nLgj
Elements: https://p5js.org/reference/p5/p5.Element/
Ai overview displaying text through an object: how to display text when clicking an object p5
Window width height example by professor Aya: https://editor.p5js.org/mangtronix/sketches/t4G0erH1B
Text Font: https://p5js.org/reference/p5/textFont/
Mirror image: https://editor.p5js.org/icm4.0/sketches/ETcm93Ua1
Float: https://p5js.org/reference/p5/float/
Used ChatGTP to clean my codes, (also to store and recover them since I suffered from constant glitches that deleted my information), and to find errors in my work whenever a specific element was not showing or it wasn’t processing its intended objective.
