Livvy’s Project B

Saving The World From Black And White:

Hero Squiddy & Hero Octo

Link on GitHub Pages:https://wl3223.github.io/cclab/final-term/projectB/

Part1

PROJECT DESCRIPTION

Saving The World From Black And White: Hero Squiddy & Hero Octo

Livvy (Weiyi Lu)

Elevator Pitch:

Discover a monochromatic world saved by the colorful adventures of Squiddy and Octopus on the interactive website. Step into a playful journey of color and emotion, where you can escape the stress from reality and bring colors to a black-and-white realm through a fun, engaging experience.

Abstract:

In a world dominated by black and white, my project invites users to start a colorful journey with two cute characters, Squiddy and Octopus. The experience begins with a self-introduction of two characters with AI voices. Then it comes with the conversation to teach users to navigate Squiddy in the p5.js sketch environment, featuring a vivid moving sound effect. After that is a captivating game where players engage in a colorful battle. The outcome leads to one of two joyful endings, celebrating either Squid’s or Octopus’s victory in splashing colors to the world.  My project is more than just a story-telling website with a game. It’s an escape from the boredom and stress of everyday life, a place where bad mood fades away, and joy takes its place. 

Images:

via GIPHY

via GIPHY

Video: 

 

 

Part2

1) Process: Design and Composition

My process began with a simple vision: to create an interactive game using p5.js. Initially, the game purely focuses on the mechanics of color filling. However, after discussions with Professor Marcele, I was inspired to design the web page as a storytelling. This added layer transformed the project, making it not just a game but a narrative experience.

To make the web page relaxing and convey the idea of escaping from the stressful reality, I used P5.js to create two cartoon characters: Squid and Octopus (Inspired by Splatoon3).  

The game is an interactive part that invites users to have an entertaining competition to see who can fill in more colors. (I will explain the coding in the Technical Part later)

I faced challenges in integrating the storytelling aspect smoothly with the gameplay.  To deal with the problem, I came up with the idea to use AI voice to read the text, shaping my website to look more vivid and connected.  

In addition, I first designed the tutorial page for users to get familiar with the game. Professor Marcele advised me to also combine the story-telling in it. 

After the game was over, I created two endings to represent which side won.

 

2) Process: Technical 

Gaming: How to show the counted numbers

In the early versions, I only coded the final result by detecting the grids which were changed colors. 

Code:

  if (ifCount) {
    for (let i = 0; i < width; i += n) {
      for (let j = 0; j < height; j += n) {
        let colorV = grid[i][j].c;
        if (colorV == grid[i][j].Yellow) {
          countS += 1;
          //console.log(count);
        }
      }
    }
        for (let i = 0; i < width; i += n) {
      for (let j = 0; j < height; j += n) { let colorV = grid[i][j].c; if (colorV == grid[i][j].Blue) { countO += 1; //console.log(count); } } } ifCount = false; time = 0; } if(countS>=countO){
    result="Squid Wins!"
  }else{
    result= "Octopus Wins!"
  }
  if(time<=0){
    time=0;
  textSize(50);
  text(result, width / 3, height / 2);
}
 

Outcome:

 

However, there was a need to clearly show the score of each side, which cannot be realized based on the previous code.

I created new variables and adjusted the code to realize the effect.

The logic is that if the grid color is the same as the color of one side, then push a new element in the array of that side, adding the index number, so that the scores can be texted on the sketch.

Code:

let countNumS = [];
let countNumO = [];
let countS = 0;
let countO = 0;


  if (time > 0) {
    countNumS = [];
    countNumO = [];
    for (let i = 0; i < width; i += n) {
      for (let j = 0; j < height; j += n) {
        let colorV = grid[i][j].c;
        if (colorV == squid.c) {
          countNumS.push(1);
          countS = countNumS.length;
          //console.log(count);
        }
      }
    }


    for (let i = 0; i < width; i += n) {
      for (let j = 0; j < height; j += n) {
        let colorV = grid[i][j].c;
        if (colorV == octopus.c) {
          countNumO.push(1);
          countO = countNumO.length;
          //console.log(count);
        }
      }
    }
  }

Outcome:

 

Webpage coding:

In order to open new pages to continue my storytelling, I used the following code.

 <div class=“button-container”>

   <a href=“tutorial-web/tutorial.html” target=“_blank” id=“startButton”>Come and meet my friend</a>

 </div>

I also learned that to open an HTML file in another folder, I need to type “../” in front of the file name.

To create a button on the webpage and play the sound when it is clicked, I  used the following code.

   <button id=“playButton”>Audio</button>

   <audio id=“audioPlayer” src=“g.mp3”></audio>

   <script>

     document.getElementById(‘playButton’).addEventListener(‘click’, function () {

         var audio1 = document.getElementById(‘audioPlayer’);

         if (audio1.paused) {

             audio1.play();

         } else {

             audio1.pause();

         }

     });

 </script>

 

3) Reflection and Future Development

Conclusions and Critical Reflections:

The project evolved from a basic game concept to a narrative-driven, interactive website. For me, that was a valuable experience of coding learning and creative exploration. The integration of storytelling, audio, and an appealing game represents an achievement. However, reflecting on the project also highlights opportunities for further development, especially in enriching the website design complexity and the balance between story and gameplay. 

Successful Aspects: The project’s strengths lay in the rich content, especially the attractive interactive game. Moreover, the decision to incorporate the game into the storytelling added an emotional depth that resonated well with users.

Areas for Improvement: The complexity of the project can be improved, such as refining the webpage design and adding more elements to attract users.

Feedback and Future Exploration:

Clarifying Instructions: The current instructions might not be intuitive, especially regarding the audio playing. It’s better to Implement more explicit instructions, such as adding text prompts like “Click here to play audio” near the relevant buttons. 

Teaming-up Game and Different Levels: A mode where Squid and Octopus team up against a common enemy can promote cooperative play. Additionally, I could create different levels of difficulty or complexity, adding variety and challenge to the game.

Website Design Consistency: There are some inconsistencies in the current web page design. In the future, I will conduct a thorough review of the elements – like colors, fonts, button styles, and layout structures – to ensure uniformity across all pages and sections.