Week 3 - Homework 2: Interactive animation or game (inspired by Inception (2010))

For this week's second assignment we had to make an interactive animation/game, inspired by a scene from a movie. I picked the same scene from Inception as I used for the previous homework this week. The scene where Ariadne draws a maze inspired me to make a maze myself! So let me introduce 'The Hidden Maze':


I wanted to do a maze that is invisible except for at the starting point, which forces you to try and remember the path to the finish. If this was a 'real' game, the mouse should be forced back when the player hit the walls, but I don't know how to do that in Processing yet, so for now we have to trust the player follows the rules out of their own free will. Even I cheated quite a bit in the video, but it was only to be able to demonstrate all the features of the game without ending up with a very very long video.

The text that asks the player to hold (I realise as I am writing this post, that 'hold' might not be the correct expression in English. I meant 'to press down'. Too late to change now though!) letters were added to add an element of surprise to the game and to encourage the player to keep going if they start to lose their patience or become bored. It was also added to distract the player, making them forget the layout of the maze and therefore making the game take longer to complete.

The code

int rectAniX = 700;

void setup(){
  size(600, 400);
 
}

void draw(){
  background(255);
  //the start square
  fill(255);
  stroke(0);
  rect(0, 0, 50, 50);
  fill(0);
  textSize(11);
  text("Start", 12, 28);
 
  //the hidden maze layout. If within start square, maze shows.
  if( (mouseX < 50 & mouseX > 1) && (mouseY < 50 & mouseY > 1) ){
    //rect 1 (order top to bottom, left to right)
    rect(50, 0, 50, 350);
    //rect 2
    rect(150, 50, 50, 350);
    //rect 3
    rect(250, 0, 50, 200);
    //rect 4
    rect(250, 250, 50, 150);
    //rect 5
    rect(350, 0, 50, 300);
    //rect 6
    rect(350, 350, 50, 50);
    //rect 7
    rect(450, 0, 150, 50);
    //rect 8
    rect(450, 100, 50, 300);
    //rect 9
    rect(500, 100, 50, 150);
    //rect 10
    rect(500, 300, 100, 100);
   
    //finish
    stroke(0);
    fill(255);
    rect(500, 250, 50, 50);
    fill(0);
    text("Finish", 509, 279);
  }
 
  //If the mouse touches any of the black rectangles, red screen happens. same order of rect as above
  if ( (mouseX < 100 & mouseX > 50) && (mouseY < 350 & mouseY > 0) ||
  (mouseX < 200 & mouseX > 150) && (mouseY < 400 & mouseY > 50) ||
  (mouseX < 300 & mouseX > 250) && (mouseY < 200 & mouseY > 0) ||
  (mouseX < 300 & mouseX > 250) && (mouseY < 400 & mouseY > 250) ||
  (mouseX < 400 & mouseX > 350) && (mouseY < 300 & mouseY > 0) ||
  (mouseX < 400 & mouseX > 350) && (mouseY < 400 & mouseY > 350) ||
  (mouseX < 600 & mouseX > 450) && (mouseY < 50 & mouseY > 0) ||
  (mouseX < 500 & mouseX > 450) && (mouseY < 400 & mouseY > 100) ||
  (mouseX < 550 & mouseX > 500) && (mouseY < 250 & mouseY > 100) ||
  (mouseX < 600 & mouseX > 500) && (mouseY < 400 & mouseY > 300)
 
  )
  {
    //red screen
    background(255, 0, 0);
    fill(0);
    textSize(37);
    text("WRONG. GO BACK TO START", 46, 130);
   
  //the start square again, so that it shows on top of the red screen
  fill(255);
  stroke(0);
  rect(0, 0, 50, 50);
   fill(0);
  textSize(11);
  text("Start", 12, 28);
 
  }
 
  //if mouse is on 'finish' square
  if( (mouseX < 550 & mouseX > 500) && (mouseY < 300 & mouseY > 250) ){
    //finish square
    stroke(0);
    fill(255);
    rect(500, 250, 50, 50);
    fill(0);
    textSize(11);
    text("Finish", 509, 279);
   
    //message at finish
    fill(0);
    textSize(37);
    text("You did it! Well done :)", 90, 130);
  }
 
  //praise
  if( (mouseX < 400 & mouseX > 350) && (mouseY < 350 & mouseY > 300) ){
  text("hold 'p' for praise", mouseX, mouseY);}
 
 if (keyPressed){
   if (key=='p'){
    fill(0);
    textSize(37);
    text("You're doing so well! Impressive", 10, 130);
    }
  }
 
 
  //encouragement
  if( (mouseX < 300 & mouseX > 250) && (mouseY < 250 & mouseY > 200) ){
    text("hold 'e' for encouragement", mouseX, mouseY);; }
 
  if (keyPressed){
   if (key=='e'){
    fill(0);
    textSize(37);
    text("You can do it! I believe in you :)", 10, 130);
    }
  }
 
  //surprise
  if( (mouseX < 520 & mouseX > 450) && (mouseY < 100 & mouseY > 50) ){
    text("hold 's' for a surprise", mouseX, mouseY); }
 
  //animation for surprise
  if (keyPressed){
   if (key=='s'){
    noStroke();
    fill(255, 0, 0);
    rect(rectAniX, 50, 50, 50);
   
      rectAniX = rectAniX - 15;
     
      if (rectAniX < -50){
  rectAniX = 700; }
          }
  }

}

This was fairly straightforward to make. I started off by designing the maze, and then adding the statement to make sure it only shows up when on the 'Start' square. After that I made the red 'Wrong' screen, and making the statement so that the screen shows up when the mouse cursor touches any of the black rectangles. I am very thankful for that the '&&' and '||' exists; otherwise this would be a very long blog post.

Finally, I added the keyboard interaction. Initially I wanted the interaction to only take place when the mouse cursor was within a specific location in the maze (the same location where text shows up), but it became very complicated and I kept running into syntax errors; this is something I can work on more another time, hopefully :)