Author: djg9362

In the realm of entertaining carnival games, surely nobody is unfamiliar with the infamous game known as Whack-A-Mole. It is already known as a widespread game that we all surely must have enjoyed at least once during our lives; after all, who doesn’t enjoy bonking moles that pop out of dirt holes in the head with a big hammer? I am happy to make it clear that I myself am among the folks who have always enjoyed the game; hence why I chose to create my own unique take of the Whack-a-Mole game, but with a few twists to make it be a little bit different from the original. The twist to mention, the one that is the elephant in the room, the moles in my game are instead replaced by colored 2D versions of Mickey Mouse’s head! This is because of how not only was he my favorite during my childhood, but also because my major is based in getting involved in digital business with certain theme parks, which does include Disney! Therefore, I would consider this project as my own practice for when the day comes of me hopefully getting the chance to work alongside a major theme park like Disney. Speaking of colored heads, allow me to successfully reveal to you how the game works.

The way my game works is that it takes the classic Whack-a-Mole formula and formulates two rows of three holes, which altogether make up six holes. On top of that, the game would also supposedly take place in a forest, which is apart of my attempt to have the game feel as if you found these six holes somewhere in a special kind-of forest where these six holes have these Mickeys popping up in an act to simply challenge to see how fast your reflexes are; something that just sounds as if it popped right of a literal Disney short film! The only exception, however, would be the scoreboard on the top left corner of the game that will have points (aka your points) increase each time you hit a specific Mickey Head. Now, as for the Mickey heads that will pop out, there are about four different variations of them. The first variation is the Mickey Head whose head is colored cyan and his ears are colored white; simply, he is the variation that you are supposed to hit, since each time you hit one, you earn five points added to your score! Of course, that isn’t the only Mickey Head you are able to hit, for you must also be on the lookout for a yellow Mickey Head that will pop up anywhere between the gaps of the rows or in any of the six holes; it only shows you for one second, so you are going to be tested to see how fast you can click on it being it disappears into a three-minute cooldown. The reward for clicking it on time will add thirty points to your score! However, there are two other Mickey Heads that are best recommended for you to avoid. The first Mickey head to avoid is an orange-colored Mickey head that will be anywhere in either the row gaps or holes by random; this is because if you click on that one, it will reset your scoreback to zero as a penalty! Lastly, the other Mickey head to avoid is a red-colored Mickey head that will be unpredictable and pop up in almost the same spots as the yellow and orange ones, because clicking on it will immediately send you to a game over screen that lasts six seconds before taking you back to the main menu! However, a funny thing that I made sure was possible in my game, was that if a player were to wish to quit the game via being retreated back to the main menu and closing the game from there, they would have to click on a red Mickey head on purpose to do; I simply that since the game over screen is kind-of hilarious on its own without its awkward transition and silly trombone sound effect, it would be funny for the person and thus leave them with a smile on their face.

let mickeys = [];
let lastSpawnTime = 0;
let spawnDuration = 2500;

let score = 0;
let hitSound;

let redMickey = null;
let nextRedSpawn = 0;
let redSpawnTime = 0;
let redDuration = 1500;

let gameOverSound;
let gameOverStartTime = 0;

let yellowMickey = null;
let nextYellowSpawn = 0;
let yellowSpawnTime = 0;
let yellowDuration = 1000;
let yellowCooldown = 180000;

let orangeMickey = null;
let nextOrangeSpawn = 0;
let orangeSpawnTime = 0;
let orangeDuration = 1500;


// Being sure to check whether it's time for a new group to come up
    if (millis() - lastSpawnTime >= spawnDuration){
      spawnMickeys();
    }

    // Making sure to draw every Mickey currently in "mickeys=[]" array
    for (let mickey of mickeys){
      mickey.display();
    }

    // Spawn in red Mickey Head at the time as scheduled for it
    if(
      redMickey === null && 
      orangeMickey === null &&
      millis() >= nextRedSpawn
    ){

      spawnRedMickey();
      
    }
      
    // Take away red Mickey head after 1.5 second timer is up
    if (
      redMickey != null &&
      millis() - redSpawnTime >= redDuration
    ){
      redMickey = null;
      scheduleRedMickey();
    }

    // have the Red Mickey head be drawn
    if (redMickey !== null){
      redMickey.display();
    }

    // Spawn in yellow Mickey Head at the time as scheduled for it
    if (yellowMickey === null && millis() >= nextYellowSpawn){
      spawnYellowMickey();
    }

    // Put yellow head away after 1 second
    if (
      yellowMickey !== null &&
      millis() - yellowSpawnTime >= yellowDuration
    ){

      yellowMickey = null;

      // Begin cooldown (maximum 3 minutes)
      scheduleYellowMickey();
      
    }
    
    // Letting the yellow Mickey head be drawn
    if (yellowMickey !== null){
      yellowMickey.display();
    }

    // Spawn in orange Mickey Head at the time as scheduled for it
    if (
      orangeMickey === null &&
      redMickey === null &&
      millis () >= nextOrangeSpawn
    ){

      spawnOrangeMickey();
      
    }

    // Take out orange Mickey Head after 1.5 seconds
    if (
      orangeMickey !== null &&
      millis() - orangeSpawnTime >= orangeDuration
    ){

      orangeMickey = null;
      scheduleOrangeMickey();
    }

    // Let orange Mickey head be drawn and displayed
    if (orangeMickey !== null){

      orangeMickey.display();
      
    }

 function spawnMickeys(){

    // Remove any previous Mickey Heads
    mickeys = [];

    // Making the decision of whether 1, 2, or 3 Mickey Heads appear
    let amount = floor(random(1, 4));

    // Making sure it remembers which holes have been selected
    let usedHoles = [];

    for (let i = 0; i < amount; i++){

      // Decide on a random hole from 0 to 5
      let hole = floor(random(6));

      while(usedHoles.includes(hole) ||
            (redMickey !== null &&
             redMickey.holeIndex === hole
              
            )
           ){
        hole = floor(random(6));
           }

      // Making sure it remembers that this hole is in-use
      usedHoles.push(hole);

      // Being sure to calculate the hole's role and column
      let row = floor(hole / 3);
      let col = hole % 3;

      // Being sure to calculate the position of the Mickey Head
      let x = width * (0.25 + col * 0.25);
      let y = height * (0.45 + row * 0.3);

      // Bring the Mickey Head to life above the hole by a tiny bit
      let mickey = new MickeyHead(x, y - 30);

      // Adding Mickey Head to "let mickeys = []" array
      mickeys.push(mickey);
    }

    // Remembering when this circle group appeared
    lastSpawnTime = millis();

    // Choosing random duration between 2-3 seconds
    spawnDuration = random(2000, 3000);
  }

  function spawnRedMickey(){

    // Choose which of the 9 positions for the red head to go by random
    let position = floor(random(9));

    let x;
    let y;

    if (position < 6){

      // one of the 6 holes, should the Mickey head appear there
      let row = floor(position / 3);
      let col = position % 3;

      x = width * (0.25 + col * 0.25);
      y = height * (0.45 + row * 0.3) - 30;
      
    } else {

      // One of the 3 gaps between columns
      let col = position - 6;

      x = width * (0.25 + col * 0.25);
      y = height * 0.60 - 30;
      
    }

    redMickey = new RedMickeyHead(x, y);
    redMickey.holeIndex = position < 6 ? position : -1;
    redSpawnTime = millis();
    
  }

  function spawnOrangeMickey(){
    let availablePositions = [];

    // Be on lookout for all 9 possible positions for orange head to use
    for (let position = 0; position < 9; position++){

      let x;
      let y;

      if (position < 6){

        let row = floor(position / 3);
        let col = position % 3;

        x = width * (0.25 + col * 0.25);
        y = height *(0.45 + row * 0.3) - 30;
      } else {
        let col = position - 6;

        x = width * (0.25 + col * 0.25);
        y = height * 0.60 -30;
        
      }

      let occupied = false;

      // Tracking of cyan heads (if need be)
      for(let mickey of mickeys){

        if (dist(x, y, mickey.x, mickey.y) < 65){
          occupied = true;
        }
        
      }

      // Check for yellow head (if need be)
      if (yellowMickey !== null){

        if (dist(x, y, yellowMickey.x, yellowMickey.y) < 65){
          occupied = true;
        }
        
      }

      if (!occupied){
        availablePositions.push({ x: x, y: y, position: position});
      }
      
    }

    // Orange head should only spawn if there's a free open-position
    if (availablePositions.length === 0){
      scheduleOrangeMickey();
      return;
    }

    let chosen = random(availablePositions);

    orangeMickey = new OrangeMickeyHead(chosen.x, chosen.y);
    orangeMickey.holeIndex = chosen.position < 6 ? chosen.position : -1;

    orangeSpawnTime = millis();
    
  }

  function spawnYellowMickey(){

    let availablePositions = [];

    // Keep track of yellow Mickey Head's 9 possible spots
    for (let position = 0; position < 9; position++){

      let occupied = false;

      // Check on the cyan Mickey heads
      for (let mickey of mickeys){

        let row = floor(position / 3);
        let col = position % 3;

        if (position < 6){

          let x = width * (0.25 + col * 0.25);
          let y = height *(0.45 + row * 0.3) - 30;

          if (mickey.x === x && mickey.y === y){
            occupied = true;
          }
          
        }
        
      }

      // Check on the red heads if necessary on behalf of yellow heads
      if (redMickey !== null){

        let redPositionX = redMickey.x;
        let redPositionY = redMickey.y;

        let x;
        let y;

        if (position < 6){

          let row = floor(position / 3);
          let col = position % 3;

          x = width * (0.25 + col * 0.25);
          y = height * (0.45 + row * 0.3) - 30;
        } else {
          
          let col = position - 6;

          x = width * (0.25 + col * 0.25);
          y = height * 0.60 - 30;
        }

        if ( x === redPositionX && y === redPositionY){
          occupied = true;
        }

        
      }

      if (!occupied){
        availablePositions.push(position);
      }
      
    }
    // decision-making on picking any available position
    let position = random(availablePositions);

    let x;
    let y;

    if (position < 6){

      let row = floor(position/3);
      let col = position % 3;

      x = width * (0.25 + col * 0.25);
      y = height * (0.45 + row * 0.3) - 30;
    } else {
      
      let col = position - 6;

      x = width * (0.25 + col * 0.25);
      y = height * 0.60 - 30;
    }

    yellowMickey = new YellowMickeyHead(x, y);
    yellowMickey.HoleIndex = position < 6 ? position : -1;

    yellowSpawnTime = millis();
     
  }

  function scheduleRedMickey(){

    // Decide random delay from 4 to 10 seconds
    nextRedSpawn = millis() + random(4000, 10000);
  }

  function scheduleOrangeMickey(){

    nextOrangeSpawn = millis() + random(4000, 10000);
  }

  function scheduleYellowMickey(){

    //Reminder to wait a few minutes (3 maximum at least) before next head appears
    nextYellowSpawn = millis() + yellowCooldown;
  }

  function drawGameOver(){

    // Set-up of the background color for Game Over screen
    background(0);

    //Set-up of game over message appearance
    textAlign(CENTER, CENTER);
    textFont("Press Start 2P");
    textSize(30);

    fill(255, 80, 180);
    text("FAIL!\nSORRY SON!", width / 2, height / 2);

    // Keep track of whether 6 seconds have finished being passed
    if(millis() - gameOverStartTime >= 6000){

      // Bring the player back to the main menu automatically
      gameState = "menu";

      playMenuMusic();
    }
    
  }

  function mousePressed(){
   if (gameState === "menu") {

     console.log("Mouse clicked! Game state:", gameState);

     // Making sure that PLAY button is activated
     if (
       mouseX > width / 2 - 110 &&
       mouseX < width / 2 + 110 &&
       mouseY > height - 170 &&
       mouseY < height - 90
     ){

       // Begin soundtrack after user interacts with menu
       userStartAudio();
       menuSoundtrack.play();
       

       

       gameState = "instructions";
     }
     
   }
     
   else if (gameState === "instructions"){

     // Making sure that GO TIME (start) button gets activated
     if (
       mouseX > width / 2 - 130 &&
       mouseX < width / 2 + 130 &&
       mouseY > height * 0.83 - 32.5 &&
       mouseY < height - 0.83 + 32.5
     ){

       // Have score be resetted within a new game
       score = 0;

       // Gameplay start
       gameState = "game";

       // cease main menu music
       menuSoundtrack.stop();

       // Begin gameplay music
       gameplayMusic.play();
       console.log("Attempted to start gameplay music!");
       
       spawnMickeys();

       // Reset scheduling of red Mickey head
       redMickey = null;
       scheduleRedMickey();

       // Reset yellow Mickey head for new game
       yellowMickey = null;

       // First yellow Mickey Head appearing after 10-20 seconds by random
       nextYellowSpawn = millis() + random(10000, 20000);

       // Reset orange Mickey head for new game
       orangeMickey = null;
       scheduleOrangeMickey();
       
       // cease menu music upon gameplay beginning
       if (menuSoundtrack.isPlaying()){
         menuSoundtrack.stop();
       }
       
     }
     
   }

   else if (gameState === "game"){

     // Be on lookout for player clicking on red Mickey head
     if (
       redMickey !== null &&
       redMickey.isClicked(mouseX, mouseY)
     ){

       // have gameplay music stop immediately
       gameplayMusic.stop();
       
       // Switch over to game over
       gameState = "gameover";

       //Setting put of the memory of when the player lost
       gameOverStartTime = millis();

       // Play sad trombone at precise moment
       gameOverSound.play();

       // Take away Red Mickey Head for game over to operate with ease
       redMickey = null;

       return;
     }

     // Check to see if player clicked on the orange Mickey head
     if (
       orangeMickey !== null &&
       orangeMickey.isClicked(mouseX, mouseY)
     ){

       // bring score back to zero
       score = 0;

       // Play sound effect indicating loss of score
       orangeSound.play();

       // Take out Mickey head right away
       orangeMickey = null;

       // get to scheduling the orange Mickey head's next pop-up moment
       scheduleOrangeMickey();

       return;
     }

     // Check to see if player clicked on the yellow Mickey head
     if (
       yellowMickey !== null &&
       yellowMickey.isClicked(mouseX, mouseY)
     ){

       // Award player with +30 points
       score += 30;

       // Play existing hit sound
       bonusSound.play();

       // Take away yellow Mickey head instantly
       yellowMickey = null;

       // Let cooldown (whose maximum is technically 3 minutes) begin
       scheduleYellowMickey();

       return;
     }
     
     //set-up of loop rountine regarding when a head gets hit/clicked
     for(let i = mickeys.length - 1; i >= 0; i--){

       if (mickeys[i].isClicked(mouseX, mouseY)){

         // Letting 5 points be added to scoreboard
         score += 5;

         // Letting "hit" sound effect be played
         hitSound.play();

         // Take away Mickey Head upon it being hit
         mickeys.splice(i, 1);

         // Quit checking the hit was landed and successful
         break;
         
       }
       
     }
     
   }
    
    
  }

class MickeyHead{

  // Making sure that the Mickey Heads are positioned
  constructor(x, y){
    this.x = x;
    this.y = y;
  }

  display(){

    // The 2 white Mickey ears set-up
    fill(255);
    circle(this.x - 25, this.y - 30, 35);
    circle(this.x + 25, this.y - 30, 35);

    // The cyan head of the Mickey head
    fill(0, 255, 255);
    circle(this.x, this.y, 65);
  }

  isClicked(mx, my){

    // Measurement of how far is the player from hitting the head
    let clickDistance = dist(mx, my, this.x, this.y);

    // Check to make sure the player indeed clicked inside of the head
    return clickDistance < 32.5;
    
  }
    
}

// Set-up of the red Mickey Head that borrows elements from the "MickeyHead" class function
class RedMickeyHead extends MickeyHead {

  display(){

    // Set-up of red Mickey head ears
    fill(255, 0, 0);
    circle(this.x - 25, this.y - 30, 35);
    circle(this.x + 25, this.y - 30, 35);

    // The circular head of the Mickey head
    fill(255, 0, 0);
    circle(this.x, this.y, 65);
  }
    
}

// Set-up of the yellow Mickey Head that borrows elements from the "MickeyHead" class function
class YellowMickeyHead extends MickeyHead{

  display(){
    // Set-up of yellow Mickey head ears
    fill(255, 225, 0);
    circle(this.x - 25, this.y - 30, 35);
    circle(this.x + 25, this.y - 30, 35);

    // Circular head of the Mickey head
    fill(255, 225, 0);
    circle(this.x, this.y, 65);
  }
  
}

// Set-up of the orange Mickey Head that borrows elements from the "MickeyHead" class function
class OrangeMickeyHead extends MickeyHead{

  display(){

    // Set-up of orange Mickey head ears
    fill(255, 140, 0);
    circle(this.x - 25, this.y - 30, 35);
    circle(this.x + 25, this.y - 30, 35);

    // Orange Mickey's circular head
    fill(255, 140, 0);
    circle(this.x, this.y, 65);
  }
  
}

If there was a part that I am proud of, it is definitely implementing the Mickey heads themselves, as well as the sound effects that accompany them! It is because of how I understood that most people like it when a game is as goofy as it possibly could be. It’s something about that hilarious energy that would cause people to continue playing for however long they need, especially if there’s sound effects resembling that of memes that almost anybody would recognize. Not to mention that I found myself laughing at the sound effects that each Mickey Head is accompanied with, which already proved to me that what I’m hearing is something that anybody would be delighted to hear as well. After all, a game is all about engagement and it can maybe be convincing for a user to keep on indulging in the humorous nature from within the game.

let menuSoundtrack;
let gameplayMusic;

menuSoundtrack = await loadSound("menuSoundtrack.mp3");
  gameplayMusic = await loadSound("gameplay_music.mp3");

 // Keep track of whether 6 seconds have finished being passed
    if(millis() - gameOverStartTime >= 6000){

      // Bring the player back to the main menu automatically
      gameState = "menu";

      playMenuMusic();

// Begin soundtrack after user interacts with menu
       userStartAudio();
       menuSoundtrack.play();
       

       

       gameState = "instructions";

 // Be on lookout for player clicking on red Mickey head
     if (
       redMickey !== null &&
       redMickey.isClicked(mouseX, mouseY)
     ){

       // have gameplay music stop immediately
       gameplayMusic.stop();
       
       // Switch over to game over
       gameState = "gameover";

       //Setting put of the memory of when the player lost
       gameOverStartTime = millis();

       // Play sad trombone at precise moment
       gameOverSound.play();

function playMenuMusic(){

    // Cease gameplay music if it's playing right now
    if (gameplayMusic.isPlaying()){
      gameplayMusic.stop();
    }

    // Start up menu music ONLY if it ain't playing at the moment
    if (!menuSoundtrack.isPlaying()){
      menuSoundtrack.loop();
    }
    
  }

  function playGameplayMusic(){

    // Cease menu music
    if (menuSoundtrack.isPlaying()){
      menuSoundtrack.stop();
    }

    // Start up gameplay music
    if (!gameplayMusic.isPlaying()){
      gameplayMusic.loop();
    }
    
  }

The biggest challenge for me, however, would definitely be the implementation of music in my game; this is often due to how even though I would have my downloaded mp3 songs uploaded within my project fair and square, the music would never seem to be activated. It was almost as if they weren’t recognized enough to even be played where I wanted them to be played in, despite me doing what I thought was correctly defining the variables/functions that would cause the music to be played (such as defining the function that was meant to play music during the gameplay as “gameplayMusic”).  This is when I knew that p5.js sure knew a thing or two about being strict with functions/variables and how to activate them properly. Which is why I have had to refer to some of the older example projects that were linked, as well as proofread my mistakes with the assistance of Ai so that I would see if I didn’t write something correctly or whatnot. Eventually, I was able to figure it out via switching certain commands with the ones that my program was able to read, such as how for my “gameplayMusic” variable, i was able to switch out “loop()” with “play()” so that it can understand better on where and how to play said-music. Before you know it, I was able to sort out an evolution of music within my game that would go as follows: main menu (no music) => instructions page (club music that is supposed to get people’s energy up and running for the game) = gameplay itself(another form of techno club music that will boost the already-risen energy of the player as they get to enjoying themselves in the game! It is these simple steps of build-up that I was able to debug and bring to life within my game.

All in all, I believe that despite the complicated strict lines I had to follow in order for p5.js to listen to me, this was quite the eventful project! Now, I still consider myself a giant personified rookie when it comes to game creation, but what I can say is that this may have given me the idea of what the whole process may technically be like. The only thing I wish I could have done is see if there could have been more Mickey heads that could have been added to the game to add even more value to the game. Sadly, I didn’t exactly have enough ideas, but at least four ideas are better than nothing, you know? Overall, these are nothing short but my thoughts of how the project was like for me.

Perhaps the ways that computer vision differs from the rest of us humans can be the fact that most of the time, a computer requires itself to be either coded within its software or be connected to a sensory tool, such as a camera, in order to see and analyze its surroundings; unlike a human who already has the ability to analyze their surroundings much more faster and quicker. In addition, the computer will probably have to be connected to a certain engine, such as either a GPU or AI-powered processing system, in order to assist itself in being able to remember a person’s movement while keeping track of their movement at the same time. In our case, the ability to analyze somebody’s movement, whether it be in front of us or not, is already ingrained in our brain to do otherwise. To put it simply into different words, it would seem as if the computers require to have their hand be held and learn the patterns of what to identify and/or be on the lookout for while the humans have a higher chance figuring out quicker what is in front of our eyes with little to no hints needed. Matter of fact, one might say that the computer demands more manual work in preparation of “environment analysis” than us.

Now, if there must be a way for a computer to see and track something based on what we are interested in for it to watch over, there might be some techniques, as inspired from the book, that can be of assistance. The first technique to come in handy is teaching the computer to know the difference black and white, depending on which of the two is the background and which one is the object passing by said-background. This is because of how I believe that in order to help the computer be familiar with the colors of its surroundings and be able to tell the difference between certain color changes, it is often best to have the computer start from small beginnings and train it to practice telling the difference black and white; for example, if the background were to be black and the computer understands that, then it surely won’t be hard for the computer to detect a passing-by object that is the opposite of black, which can somebody in light-colored clothing that the computer may be able to tell and keep track of their movements. Another technique that may be followed by this mentioned one is the ability to identify differences between certain color shifts whenever something gets added to their image. What that means is the computer being able to remember what an original background looks like by default, only to then become capable of identifying when something enters the original image that is indicated by a color shift/addition as evidenced through anything changing within the pixels that the computer is supposed to take note of. For instance, let’s just that it takes the memory of an image featuring an empty office room, only for a security guard to enter said-office; this is become the computer’s obligation to look at both the original empty image and the new one with the guard, and then conclude that there’s been a change in color feature/pixels within the new image and now it must turn its attention onto the new person that had entered. This is all simply about modifying the computer’s vision into being to possess the knowledge of certain colors and how to pay attention to any changes that would come through the form of alternative color and/or pixel switch-ups.

With all of this being said, I personally would like to imagine the computer’s vision affecting its usage in the interactive arts with its tracking/surveillance capacities due to the fact that any works that involve the vision are established to be something unique since the works have the observers become the artist behind this type of complex digital artwork. After all, all the observers have to do is just stand somewhere in between a screen and spot where a camera/sensory tool connected to the computer can see them, and the screen will be able to not only reflect the silhouette of somebody, but also be able to conduct fluent creations of artistic patterns based on the movement of said-person. Now, of course, the capacities are not to be underestimated, for the computer’s vision requires absolutely specific definitions of lighting, background, and how to respond to and follow any changes that are most important to catch onto. Without specific definition of their target surroundings and routine of responding to probable change, the best the computer vision will do is watch somebody move their body but nothing interesting happens other than a shadow being displayed on a screen; a moment like that simply calls for some form of uniqueness in order to add something of value to the artwork plan as it must be executed by the computer vision. Overall, this is just all of my thoughts that I’ve gathered from the reading.

function drawMainMenu(){

    // Laying forth Mickey background
     image(mainMenuImg, 0, 0, width, height);

    // title setup
    textAlign(CENTER, CENTER);
    textFont("Press Start 2P");
    textSize(32);

    // Font color for pink
    fill(255, 80, 180)

    // Title write up
    text("It's Hammer Time!", width / 2, 100)

    // Play Button creation
    rectMode(CENTER);
    fill(255, 80, 180);
    rect(width / 2, height - 130, 220, 80, 15);

    // "Play" being written on said-play button
    fill(255);
    textSize(25);
    text("PLAY", width / 2, height - 130);
  }

Have you guys ever played “Whack-a-mole” before; this can include playing it either in an arcade or carnival fair somewhere in life? Surely we all have had the canon event of stumbling upon the game somewhere in our life, whether it is by accident or by intent of finding entertainment for ourselves. I’m not afraid to admit that I was even among the bunch who have played the game at least once or twice throughout my childhood. WItha that being the case, I figured why not pay my respects to such game via creating a minigame of my on based on iconic game, but with twists and turns to make it feel a bit more “unique” than the original

 

Now of course, I had to start myself off on an easier note since I am not exactly one to talk when it comes to designing games; in fact, I’m not sure if I ever created a game in my life! Nevertheless, I still have the plan in my head set straight, where it will be in the classic chronological order that I personally believe is very good for any game: game main menu -> instructions of how to play, and then the game itself. The first twist i would like to mention is that instead of moles, users will have to click on, or lay the hammer on with their mouse in other words, on 2d Mickey heads! I still wonder why I would choose that particular target for my game, but in a way to me it… kind of works? But of course it will be up to me to have said-targets operate as they should. From what I can see in my vision, one or two of those Mickey heads will appear in one of the six black holes by random, and will stay there for a few seconds in a way that’ll challenge the user to use his/her fast thinking skills and click on it; in addition, I plan on adding a hammer sound effect to better simulate the action of laying down the hammer on these Mickey heads. But of course, no game is ever without a twist for the sake of its own; in my case, I am considering adding a red Mickey head that will pop up somewhere in the gaps of between one of the two out of the six circles by random. If the user were to click on it by accident, the red Mickey head will have to take the user to a game over screen for about five seconds before taking them back to the main menu! 

 

During this first phase of the game, perhaps what felt frightening to me the most is the set up of the main menu. This is because of how I apparently thought that the “draw” function was all I needed to set up the appearance of my main menu;  boy, was I wrong on that! It goes deeper than that apparently, as I had to figure out that the only way to get my main menu up and running with its appearance is by creating another function made specifically for it (as snipped here)! So that was my main solution to debug the issue, which is by creating another new function that would be most accommodating for this task for me. Now, i still have yet to figure out how to not just create my gameboard with the effects needed, but also the sound effects that would fit just right for each element of the game. Even so, I still will do my best in figuring out what must be done in order that my game is indeed operational as expected from me.

Throughout my time of reading Chapter one of this story, I couldn’t help but remember an old Star Wars game that I used to play when I was a little kid with a Nintendo DS. The game, in question, went by the name of “Lego Star Wars: The Complete Saga”, where there was a level in the game’s chapter based on the 3rd Star Wars prequel, Revenge of the Sith, where I was Anakin Skywalker in his yellow plane and I was supposed to fly to a certain destination; however, there was this section of the level where there was a holographic border wall that no matter how hard i tried, i couldn’t bypass it and move on to the next. If I had a dollar for every minute I spent trying to shoot down said wall in order to get through, I’d have enough to buy a $15 burger with fries; not to mention the amount of times in which I tried taking a shortcut around the border wall, but that move was sadly no use! This moment was driving me nuts because the border wall looked as if it shouldn’t be too hard to pass by, but I was having trouble figuring out if I had to either shoot something to disable it or bring something with me to disarm it. After so long, my own brother had to step in and help me figure out that the way to bypass this border wall is by grabbing a purple ball of energy with me and drop it off somewhere near a hexagon shaped bowl that would deactivate the border wall without difficulty. Despite completing the level successfully, I still look back into this memory and think that perhaps there should’ve been some sort of highly responsive clue that would’ve given me an idea of what I should consider finding it in order to move forward through the level faster. I could imagine a mini transparent blue box popping near my Nintendo DS screen popping up and informing me that I need to find this certain ball of energy in order to move forward in the level. Therefore, because of the frustrating situation of this memory of mine, that is why I believe that the idea of signifier, or at least examples of it, should be explained a little more in the reading because the idea can be applicable for any game similar to the one I played where someone is stuck in a section of level and needs a clue about what to do or what to find, similar to my past issue.

All in all, the main principle that I want to try applying into a few of my sketches in interactive media, if possible, is the principle of signifiers. This is because that someone were to face a sketch of mine that required them to activate something via clicking or hovering over an area, but have no idea as to what they must focus on doing in order to achieve said-task, then perhaps a mini clue of sorts should be of existence in order to assist their understanding without holding their hand too much. One has to remember that not all humans share the same intelligence and/or critical thinking skills. It will always be a gamble between whether they are met with a tricky task but are capable of finding out what it is they must do, or they are NOT able to figure out the right course of actions and are in-need of a little hint as to what is the recommended action for them to conduct. It’s as the saying that I think of in my mind goes: the clearer something is without giving too much away, the better performance that you will be able to do in an interactive scenario.

The main idea, from my understanding, is the fact that what makes a video game interactive as it should be is if it is willing to assist the user/player in figuring the right course of action for a task that they are not sure how they must accomplish. The whole thing of an interactive program and the user is for the both of them to be able to communicate with each in order to ensure that they understand each other. Besides, without any tip to help the user move forward in the interactive program, they might as well be staring at a sketch that they cannot interact with any further; something that would make the sketch look like a regular art piece rather than interactive one. Thus, some kind of signifier as to how one can move forward in an interactive program, just like how they’d move forward in a video game, will surely help the sketch stay true to its interactive nature. Overall, these are the thoughts that I’ve gathered from the reading.

let colorData;
let positionData;

async function setup() {
  createCanvas(400, 400);

  // start up information from the 2 CSV files
  colorData = await loadStrings("colors.csv");
  positionData = await loadStrings("positions.csv");

  // pick one color by random
  let myColor = random (colorData);

  // pick one position by random
  let myPosition = random(positionData);

  // keeping the X and Y coordinates separate
  let coordinates = myPosition.split(",");
  let x = Number(coordinates[0]);
  let y = Number(coordinates[1]);

  // Making sure background color is set and understood
  background("gray");

  // Chosen text customization
  textFont("Georgia");
  textSize(50);
  textAlign(CENTER, CENTER);
  fill(myColor.trim());

  // Make sure text is displayed
  text("HHN", x, y);
}

For this assignment, I figured this would be the perfect moment to create a generative output based on a characteristic trait of mine that I often don’t tell too many people about. What is this characteristic trait in question that I speak of? Well, to answer that question, let’s just say that it has something to do with a Halloween event over in Florida, USA, that goes by the name of Halloween Horror Nights or HHN for short; this is an event that i personally adore with each fragment of my heart because of how it gives me the thrilling adrenaline rush of going through its haunted houses based on famous horror films. With this trait of mine mentioned, this is what has fueled me into thinking a way to have this assignment serve as a refreshing reference to what I adore; all while under the idea of presenting this trait of mine in the style of those old DVD screens on the TV where the DVD logo would bounce around the screen and how it would change color whenever it hit a corner. As someone who has grown up with a few memorable enough childhood moments of watching the DVD logo go all over the place and change color each time it hit the TV corners, i knew that i should have the name of my favorite halloween event be displayed within my sketch but in the form of this type of generative text output where each time you run it, the text itself would not only choose to “teleport” to a random spot by random, but also change color by random also!

 

To make this sketch of mine, i have had to use some of our previous classwork as inspiration for my sketch; this includes the “Hello Amazing Class” sketchwork as well as our other sketchwork that had those two CSV files (“colors.csv” and “circle.csv”) connected to the main sketch in order for the main circle to cycle in changing into colors/appearances if clicked by our mouse. This is how I had the bright idea to try creating two CSV files that were to be connected to my main sketch file, with those two being the “positions.csv” file and “colors.csv” file. Those two would be responsible for not only setting up the colors that are supposed to be the cycle the text is supposed to follow by random, but also the positions that the text too must cycle through randomly but in terms of different spots with the sketch canvas. Once those files were set up, that’s when I had to write in a way that can be described as this: x & y -> coordinates, myPosition -> myColor -> colorData + positionData -> colors.csv + positions.csv. It has simply been about connecting the files with the instructions of my code so that it can be ensured that the text would not only be able to pick a random color and position each time i run my sketch, but also that the coordinates of its x and y are exactly specified if they are to randomly move to an exact spot as intended without sparking confusion. One more thing to mention, is that i need indeed had to ask Ai to assist me in checking my code to see if it shall work; sure enough, it was able to help confirm that my code was indeed ready to go, but not without making a few minor adjustments (i.e. making that the text would be aligned to being centralized on each random spot it goes to rather than drip to the other side unnaturally). Honestly, looking back at this, I honestly feel a little bit happy that I was able to figure out how to create two new files to connect to my main sketch in order to have it operate as it should. It simply felt as if it saved me the trouble of having to figure out where to write the values of the colors and positions on my actual sketch instructions..

 

All in all, I should consider myself glad with how this sketch seems to look in my eyes. It is able to make its output look different with each time I press the play button to run it, whether it be through color or choice of alternate positions! Since that is the case, then perhaps what I may consider for a few more of my sketch works is the need to create some files of my choosing depending on what I’m working on and how I choose to organize things out without letting them be all over the place. It’s kind of like cable TV, where it’s your obligation to figure out how to organize each cable into connecting to their respective outlets so that the TV will be able to operate as it should be operating. Overall, this is all what I just needed to say about my generative text output workpiece.

When it comes to a strong interactive system, I like to consider the characteristics to be nothing more but representations of the system’s ability to LISTEN to a user. This is because if the interactive system is said to be involved in the “interactive” category of the arts, then it has to be the system’s obligation to stay true to its name via making sure that the communication between itself and the user is one-hundred-percent inline with each other. This includes the computer receiving the message depending on what the user manually activates on their own physical interface end and then actually ACTING upon whatever command it must have received. For example, let’s say that you were to be playing Five Nights at Freddy’s and you see an enemy outside your location in the game; your instinct would be to close the door right away to protect yourself. Only way to do that, however, is to have your hands interact with the hardware of the computer via moving the mouse so that your cursor would hover over the door button in the game, followed by left clicking your mouse so that the computer would respond to your action of left clicking your mouse by having the door in the game close under your command. Thus, this is an example of how an interactive system is supposed to work, with the computer giving you access to whatever it has to offer while also making it be your obligation to activate a certain command from your end that will reach into the computer system’s understanding and conduct a performance that will keep the interactive conversion strong as result of the computer “listening” to your inputs

With this understanding in mind, there are only a few ideas I can think of as of now. One idea that I wish to possibly figure out is how to create a series of coding that will let users control the position of certain objects/shapes from my sketches. Let’s say, for example, that if someone were to want to click on a triangle that could hypothetically be available in a sketch of mine, I would have to take it upon myself to write some coding instructions that would allow the user to either rotate the shape through simple clicks or, if possible, move the triangle to a different spot via holding and dragging with the mouse. Another idea I wish to figure out is how to hide certain phrases in my work.. only for them to reveal themselves upon being activated by the user interacting with my sketches. For instance, a user may be reveal a sketch of mine that would have them click on a random empty spot, only for the spot to show a transition of the words, “HHN”, fading into existence right before their eyes; this will be due to the hypothetical doing of me adding some coding instructions into my sketch that would allow said-words to fade into existence upon the user clicking on the designated empty spot with the mouse. After all, the concept of interactive art from my eyes should be known as art pieces where the observer him/herself is in control of what shall change within the sketch.

The main idea of interactive, from what I like to believe, is giving the art watcher their own mini controller that will let them change what is displayed within an art piece depending on a physical command from their end. Whether it be behind pressing a specific key on a keyboard or left clicking on a mouse that is connected to the computer display of the sketch, what matters most is if the user can communicate with the computer to change something in their favor. It must almost be like a conversation in real life, where one asks another a favor for something and the one who has been is obligated to fulfill said-favor. If it was the other-way around, where the sketch does nothing no matter what an observer touches to release a certain command, then it would simply be a normal artwork that may look stunning, but is missing something to give life to it. If you take it from me, a normal artwork may be good, but one can suppose that nothing is better than encountering artwork that just feels almost “alive” towards you and your presence.

let head;
let leftEar;
let rightEar;
let hat;

class BearObject{

  constructor(type, x, y, stopY, size){
    this.type = type;
    this.x = x;
    this.y = y;
    this.stopY = stopY;
    this.size = size;
    this.speed = 3;
    
  }

  update(){

    if (this.y < this.stopY){
       this.y = this.y + this.speed;
    } 
    
  }

  drawSelf(){

    // Head of Bear
    if (this.type == "head"){
      fill(255, 200, 0);
      circle(this.x, this.y, this.size);
    }

    // Bear Ear
    if (this.type == "ear"){
      fill(255, 200, 0);
      circle(this.x, this.y, this.size);

    }

    // Bear Hat
    if (this.type == "hat"){
      fill(0);
      rect(this.x, this.y, 80, 110);
    }
    
  }
  
}

function setup() {
  
  createCanvas(600, 600);

  // positioning of each object =
  
  head = new BearObject("head", 300, 0, 300, 250);

  leftEar = new BearObject("ear", 200, 0, 210, 70);

  rightEar = new BearObject("ear", 400, 0, 210, 70);

  hat = new BearObject("hat", 260, 0, 70, 100)
  
}

function draw() {
  
  background(220);

  console.log(head.type);
  console.log(head.size);

  head.update();
  head.drawSelf();

  leftEar.update();
  leftEar.drawSelf();

  rightEar.update();
  rightEar.drawSelf();

  hat.update();
  hat.drawSelf();

  
}

My goodness, this assignment was an absolute festival of stressful thinking. Firstly it requires not only looking back into some of our class notes, but as well as the example that was posted on the course website! It is simply because of the fact that generative digital art is not really my tempo and/or within my league. Nevertheless, I had to use the examples to the best of my ability to create this artwork inspired by this video-game franchise that I had always adored with all my heart. The franchise, in question, goes by the name of Five Nights at Freddy’s.

 

This franchise is a video-game series that I remember from my elementary school times, which has also resurfaced back into the present time period of my life! Since it has often brought a smile to my face upon interacting with it, i figured that i could maybe try generating a simple yet lovely art sketch based on the main Bear Mascot of the series; however, I went with the choice of coloring the sketch yellow as a way to pretend that it’s golden, because my memories with the series can be described as.. Golden.

 

Now, I was able to kind of familiarize with the concept of setting up the “class” of the objects in relation to the bear sketch and setting the rules within the class; however, my problem was figuring out how to get the circles actually moving down the sketch, which will almost make it look as if it is generating itself to life via visual movement from top to bottom. After some looking back into the reference sheet, as well as proofreading my mistakes with Ai, I realized that what I had to do was connect each object of the bear to the draw function; equivalent to connecting some cables together so that they would get a TV up and running without issue. In addition, I had to learn to connect the class to the draw function in a way that also required me to install an update command in my sketch, where it was responsible for making sure that the movement of the objects into their respective spots was possible. Right up there with the command of “drawSelf” that would assist in helping keep track of how the objects traveled down the X and Y coordinates until reaching the designated spot that the “setup” has advised them to stop at. It has been about setting the transitions up at the right time and right spots in order to ensure smooth transitions of the sketch coming into place to form the sketch of the bear mascot (but yellow) from Five Nights at Freddy’s. All in all, this still made me hope that I can look back into this sketch for reference if I ever need to work with more artworks that deal with transitional elements that when combined, will be able to form the artwork into one whole picture for all to see.

After giving Casey Reas’ presentation a watch on behalf of my consideration for what to try out within a coding artwork of mine, it has led me to think about how I wish to incorporate random elements into my works. Perhaps one way that I can incorporate random elements in my work is if there are certain shapes and/or colors that I find myself stuck with or wish to keep as simple as possible. For instance, if I were to try creating an art pattern of lines that I wish to be originally different but don’t know how, I would turn to my code and attempt to apply requests for random elements to be used within each line. Whether it be the shapes that shall be chosen to be featured in each alternative line or the colors randomly given a separate line to represent, the random elements at hand will still share the purpose of helping make my artwork look somewhat original in a sense. But of course, this will be after I share with the coding certain rules of what boundaries/minimum limits to respect and how to at least stay on track. I am still giving the code freedom to create each line featuring an alternate shape/color of the code’s random choice; I am simply letting the computer know the rules of what lines not to cross and how to stay in touch with the goal of creating the artwork without going off-track.

With this in mind, this is why I believe that the optimum balance between randomness and complete control is the presence of rules/expectations of you, yourself, the artist. If one technically thinks about it, without any rules/expectations set for the computer to follow and remember while writing the code for your masterpiece, the computer is going to get convinced that it is free to do whatever it believes is best, and thus create an artwork that is the complete opposite of what you could be looking for. Sure, it will score enough points for trying to be unique and original with its choices of art style on your behalf, but it will lose points in acting with such intention in a careless and rather messy manner. Not to mention that in the world of art, it is almost impossible to execute the concept of artwork that represents some sort of meaning despite its messy appearance. That still doesn’t mean that the chance to create a compelling yet kind of messy artwork can be never reached; it just needs to meet the requirements of how to not go overboard with its creation in which it all lies on your hands to place forth for the computer to take note of.

The bottom line is that any artwork is still free to incorporate random elements into their work for the sake of thrilling mystery, it just calls upon you, the artist, to monitor the workings of the computer in order to see if its random choices are going along with your plan. It can point towards checking how far in height/width the computer is expected to reach while conducting its random outcomes, or even the amount of ordinary elements that it uses and how many times they’ve used otherwise. It all comes down to the idea of being fair with not just yourself but also with the computer as well. It perhaps can be seen as an example of equal collaboration that any artist should always open towards. Overall, this is all of my thoughts in regards to the idea coming from Casey Reas’ presentation.

function setup() {
  createCanvas(600, 600);
  background(30);

  // Star outline via circles
  fill(255); 
  noStroke();

  for(let x = 50; x < 600; x = x + 80){
    for(let y = 50; y < 600; y = y + 80){
      circle (x, y, 15);
    }
  }
  // Moon in the center
  fill(255);
  circle(300, 300, 120);
}

Due to barely being familiar with loops within coding, I had to somehow remind myself of what a loop is like via analyzing the reference sheet from the coding website. Once I understood a little bit of what it was like, this is when I explained to myself that perhaps the artwork I should at least try making with this loop knowledge is an artwork that must feel kind of… organized? But in a modern fashion of course. Not just that but also… an artwork that resembles something that is in relation to what I myself tend to adore very much. Eventually, I’ve settled in with the concept of creating this artwork where the main stars are well… literal mini stars, along with the addition of the moon somewhere in the center. The reason is because of how this is based on the fact that as a young adult, I kind of identify as a night-owl, or someone who seems to like the nighttime. Thus, i just wish to pay a mini tribute to this oldie but a goodie trait of mine via this artwork.

What i’ve done is basically sent the background to a low number that has the background be as dark as the night. Then I had to set up the endoskeleton of the circle stars, starting with making sure they are filled through a number that’ll color them white; then this is where the loops come into play. With the loops, this is where I had to look back at the notes from the previous class, in order to get an idea of how they should be set up at least. Remember that this is all for the sake of trying to figure out how to have each circle star lined up in rows that’ll set themselves up to be a modernized version of the night sky. Most importantly, I had to make sure that the parameters for each circle star in a row/column would be centralized in their rightful spots. Lastly, I had to bring the moon to life via simply creating a bigger circle in the middle that, from my head, would make itself look like the big boss of the night alongside his star minions.

One more thing to mention is that before I could see if my code was right, I did have to check in with Ai to see if my code was indeed correct or if changes were necessary to be made. Sure enough, some of my code was on the right track, but some changes were requested to be made to ensure functionality at its finest. Based on these changes that were successfully implemented, it simply convinced me to try familiarizing myself more with the workings of proper repeat methods, such as the loop, so that if I were to ever need acts of repeat shapes/colors within my works, the loop() command would indeed assist me otherwise.