MDDN 342 Final Project

.purview_helper.js

// note: this file is poorly named - it can generally be ignored.

// helper functions below for supporting blocks/purview

function saveBlocksImages() {
  // generate 960x500 preview.jpg of entire canvas
  // TODO: should this be recycled?
  var offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = 960;
  offscreenCanvas.height = 500;
  var context = offscreenCanvas.getContext('2d');
  // background is flat white
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 960, 500);
  context.drawImage(this.canvas, 0, 0, 960, 500);
  // save to browser
  var downloadMime = 'image/octet-stream';
  var imageData = offscreenCanvas.toDataURL('image/jpeg');
  imageData = imageData.replace('image/jpeg', downloadMime);
  p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

  // generate 230x120 thumbnail.png centered on mouse
  offscreenCanvas.width = 230;
  offscreenCanvas.height = 120;
  // background is flat white  
  context = offscreenCanvas.getContext('2d');
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 230, 120);
  // pixelDensity does the right thing on retina displays
  var pd = this._pixelDensity;
  var sx = pd * mouseX - pd * 230/2;
  var sy = pd * mouseY - pd * 120/2;
  var sw = pd * 230;
  var sh = pd * 120;
  // bounds checking - just displace if necessary
  if (sx < 0) {
    sx = 0;
  }
  if (sx > this.canvas.width - sw) {
    sx = this.canvas.width - sw;
  }
  if (sy < 0) {
    sy = 0;
  }
  if (sy > this.canvas.height - sh) {
    sy = this.canvas.height - sh;
  }
  // save to browser
  context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
  imageData = offscreenCanvas.toDataURL('image/png');
  imageData = imageData.replace('image/png', downloadMime);
  p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}

README.md

PS5 MDDN 342 Expansion

My initial Idea was to use the glyphs system to run my sound visualiser project, but I then remembered that for the gamification part project 1 worked a lot better. To get the gamification to work in project 4 would require too much of a rewrite of the base code set up by the lecturer and I sadly do not have time. If there is something I learned these last few years is that your project is never done, just due, so I need to get something completed by the due date.

So with that in mind I am going to work on remaking the face so that it reacts to the sound input. The size variable drove much of the elements on the face so i can plug in the volume variable gained through the mic into that as a start and go from there.

----- FINAL GAME IDEA -----

So how it works is you play music so the mic can pick it up and see how it fairs against this game. When the sound goes above a certain volume you will notice the eyes light up and the background changes. At that time the ball needs to hit one of the faces to "pop" it and score you 1000 points. There are 1000 random points on the stage the ball will go to. When a face is popped the ball will go to a different point. When the ball reaches that point it will go to a different point. You can spend 50 points to click the mouse and force the ball to go to a different random point at any time. When the music drops below a certain volume you will steadily lose 1 point. When the music goes above a certain volume and it is not popping a face, you will steadily lose 1 point. When no face is popped (in Random mode) for at least 10 seconds, a new face will spawn. You win when all faces are popped. Best of luck to you and your song.

CHANGES :

1. Got rid of the horn saturation as I felt it was a bit irrelevant for this project and I wanted to clean up that section a bit and use it only for score.

2. Added functionality for the program to pick up sound through the mic. This value (between 0 and 1) is then multiplied by 100 to give a good increase size and then added to the size and width of the eyes and mouth. This gives the impression the faces are "singing".

3. Before when you clicked the mouse the screen would change background color and the eyes and gems would cycle through a set lerp color range. Now it happens when the amplitude (before multiplication by 100) goes over a set value. I call this the "drama Sound Level". Will play with this a bit more for added effect.

4. Added a floating dot that moves around the screen randomly when it moves over a face and the "drama sound" level is reached, the face will "pop" giving the player a score.

5. Have it working so the dots moves to the random locations populated in an array beforehand. When the dot is within 5 pixles of the target location it will choose a new random target adn move there. The eyes now follow that dot instead of the mouse. Creates 1000 random locations based on a random generator when you click new game for either grid or random mess.

6. Added the functionality that if the player does not hit a face when the volume is high enough during the "mess" game, another face is added at a random location.

7. Added scoring, so now when the player hits a face at the right time, they get 1000 score. When a player goes over volume and is not on a score, they lose 1 score and if they go below a certain volume at any time they lose 1 score.

8. Added an intro screen that will be the opening screen and whenever the player hits the menu button will take them back there. Added an end screen that will trigger when checkEndGame returns true (by checking the arrays are all null) and reveal how long it took you or your song to complete the game.

Issues and Fixes

The game loop works well. You can play both the grid and random game and the end screen happens for each, showing your score.

1. I wanted to have a value at the end that showed you how long it took for your music to complete the level, but I could not get it to work. For some reason the value kept changing while on the end screen. I could not fix it and might look at it another time to see what went wrong.

2. Even though there are 10,000 different random spots chosen at the start of each game for the ball to go to, it is statistically possible that a head might be in a spot where the ball cannot go. I decreased this likelyhood by making 10,000 random spots, up from the 100 I had initially.

3. The final look of the face models could do with some work, but I am happy enough with it as it is. It would require too much of a rewrite of the face object and it looks fine.

Add.mp3

backdropIntro.png

index.html

<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
</head>

<body style="background-color:white">


</body>

Pop.mp3

preview.jpg

sketch.js

var sizeW, sizeH; // Set size for the faces
var ampAdjSizeW, ampAdjSizeH; // The changed value when amplitude is added
var faces1 = []; // holds the faces objects for grid
var faces2 = []; // holds the faces objects for Rand
var rand1 = []; // random numbers for the Headpieces 5 options
var rand2 = []; // random numbers for the mouth pieces 3 options
var numFaces; // number of faces
var hit; // flag that activates if the mouse if over a face only
var r,g,b; // RGB values for the eyes and gems so they can change when player clicks mouse
var timeOrigin; // Starting time of the current "game itteration"
var img1; // Hold the end screen image
var img2; // Holds the intro screen image

// REWORK SECTION : Adding sound variables and new single face style
var vol; // variable for the amplitude increase;
var styleFaces; // variable to set what kind of style is active
var hasReset; // So the new random faces functions do not loop

// REWORK SECTION : The dot moving around the screen
var dotX, dotY; // The current location of the dot. This is used to check if it hits a face for scoring as well as for the eye follow
var targetX = []; 
var targetY = []; // The target X,Y locations for the dot to go to. This is an array of set locations around the canvas that will be randomly targeted if a face is hit
var easing; // "speed" of dot movement. Rate at which it heads to the target
var randomTarget; 

// REWORK SECTION : Time and score variables. If the vol goes over the target while not hitting a target, the player loses some points. If the volume is below a certain number
// at any time, the player loses some points. If the dot hits a face when the volume is over the target, the player gains a large amount of points. 
var score; 
var addFaceTime; 


function preload(){

  // Load the endgame image
  img1 = loadImage("https://scontent-syd1-1.xx.fbcdn.net/v/t1.0-9/13620844_10206813433034903_8275047245596916584_n.jpg?oh=6859c8d4404187d8709bed3118d508c8&oe=582DB551");
  img2 = loadImage("backdropIntro.png");

  // Load sound files to play in the fame
  hitSound = loadSound('Pop.mp3');
  addSound = loadSound('Add.mp3');

}

function setup() {

  // REWORK : Adding a mic listener 
  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();

  // For drawing the dot
  easing = 0.06;
  dotX = 0;
  dotY = 0;
  randomTarget = 0;

  // Scoring
  score = 0;
  addFaceTime = millis();

  // Populating the target arrays for the dot with 10000 targets so that less chance of a deadzone on the board
  for(var i = 0; i<10000; i++){
    targetX[i] = random(0,960);
    targetY[i] = random(0,500);
  }

  // To make sure it only draws once
  hasReset = false;


  // create the main canvas
  createCanvas(960, 500);

  // Buttons to initiate new randoms without pressing the slider
  reorderButtonGrid = createButton('Grid Game');
  reorderButtonGrid.position(width-100,height-25);
  reorderButtonGrid.mousePressed(newRandomGrid);
  reorderButtonMess = createButton('Random Game');
  reorderButtonMess.position(width-225,height-25);
  reorderButtonMess.mousePressed(newRandomMess);

  // REWORK SECTION : Single face to show sound interaction button creation
  singleFaceButton = createButton('Main Menu');
  singleFaceButton.position(width-325,height-25);
  singleFaceButton.mousePressed(newSingleFace);
  // 

  numFaces = random(10,100);

  // Sets up the hit detection to be false to begin with
  hit = false;

  // Sets the first Origin Time to be the start of the game initially
  timeOrigin = millis();

  // Set up Default color of eyes
  r = 56;
  g = 37;
  b = 20;

  // Setting the score value to 0
  score = 0;

  // Sets the inital value of horSliderCheck which is the default of the slider
  horSliderCheck = 20;


  // sets the default size of the face
  sizeW = width/10;
  sizeH = height/6;

  styleFaces = "Intro"; // sets to single face style to begin with

  /*
  // populating the arrays with faces and the random variables for the headpieces and mouth pieces grid config for first time print
  
  for(var i = 0; i < 5; i++){
    faces[i] = [];
    rand1[i] = [];
    rand2[i] = [];
    for(var j = 0; j < 3; j++){
      faces[i][j] = new Face(sizeW+(sizeW*i)+(sizeW*i),sizeH+(sizeH*j)+(sizeH*j),sizeW,sizeH,rand1[i][j],rand2[i][j]);
      rand1[i][j] = random(0,5);
      rand2[i][j] = random(0,3);
      faces[i][j].head = new headPiece(faces[i][j].x,faces[i][j].y,rand1[i][j]);
      faces[i][j].mouth = new mouthPiece(faces[i][j].x,faces[i][j].y,rand2[i][j]);
    }
  }
  */

  noStroke();

  }

function draw() {

  println(styleFaces);

// REWORK : gets the amplitude and then updates the size variable by adding the amplitude to the sizeW and sizeH and using that for the size of the face elements
vol = mic.getLevel();
vol = vol*100;
ampAdjSizeH = sizeH+vol;
ampAdjSizeW = sizeW+vol;

// Creating visual feedback when mouse is pressed. Changes background unless over the slider section
if(mic.getLevel() > 0.2){
  dramaColorOn();
} else {
  dramaColorOff();
}

if(styleFaces == "Grid" && hasReset == false){
  newRandomGrid();
} 
if(styleFaces == "Rand" && hasReset == false) {
  newRandomMess();
}
if(styleFaces == "Intro" && hasReset == false) {
  newSingleFace();
}

if(styleFaces == "Intro"){
  image(img2,0,0,width,height);
  fill(0,100);
  rect(100,100,700,300);
  fill(244,119,66,200);
  rect(150,150,750,300);
  var text1 = "FacePopper";
  var text2 = "Choose a game mode to the right";
  var text3 = "At any time press Menu to come back here";
  var text4 = "Score 1000 for popping a face. Not the jaw or headpiece.";
  var text5 = "Lose 1 point steadily if vol too low at any time (Random Only)";
  var text6 = "Lose 1 point steadily if vol high and not popping a face (Random Only)";
  var text7 = "New faces will appear if none popped for 10 seconds! (Random Only)";
  var text8 = "Spend 50 points to click the mouse and change the direction of the ball randomly";
  var text9 = "Start up your favorite song so the mic can hear and see how it fares!"
  var text10 = "A silly Zen-ish game by MrAzureAngel";

  fill(0,100);
  textSize(75);
  text(text1,300,150);
  fill(244,119,66);
  text(text1,305,155);

  fill(15,69,117);
  textSize(20);
  text(text2,170,225);
  text(text3,170,250);
  text(text4,170,275);
  text(text5,170,300);
  text(text6,170,325);
  text(text7,170,350);
  text(text8,170,375);
  text(text9,170,400);
  fill(95,179,252);
  text(text2,172,227);
  text(text3,172,252);
  text(text4,172,277);
  text(text5,172,302);
  text(text6,172,327);
  text(text7,172,352);
  text(text8,172,377);
  text(text9,172,402);
  fill(178,219,255);
  textSize(15);
  text(text10,0,500);

}

if(styleFaces == "End"){

  image(img1,0,0,width,height);
  fill(0,100);
  rect(100,100,700,300);
  fill(244,119,66,200);
  rect(150,150,750,300);
  var text11 = "WELL DONE!";
  var text12 = "KINDA";
  var text13 = "You scored : ";

  fill(0,100);
  textSize(75);
  if(score > 1000){
    text(text11,300,150);
  } else {
    text(text12,300,150);
  }
  fill(244,119,66);
  if(score > 1000){
    text(text11,305,155);
  } else {
    text(text12,305,155);
  }
  fill(15,69,117);
  textSize(50);
  text(text13+score,170,225);
  fill(95,179,252);
  text(text13+score,172,227);

}


if(styleFaces == "Grid" && !checkEndGame()){

  for(var i = 0; i < 5; i++){
    for(var j = 0; j < 3; j++){
      
      // Checking that a face is in the array
      if(faces1[i][j] != null){
        faces1[i][j].display();
        faces1[i][j].head.display();
        faces1[i][j].mouth.display()
      }

      // If hit is true and the dot is over the face
      if(hit == true && mic.getLevel() > 0.2){
        hitSound.play();
        faces1[i][j] = null;
        retargetDot();
        score += 1000;
      }
    }
  }

} 

if(styleFaces == "Rand" && !checkEndGame()) {

  // checks if the vol is over set amount and not hitting a face to take away 1 point steadily
    if(mic.getLevel() > 0.2 && !hit){
      score--;
      if(score < 0){
        score = 0;
      }
    }

    // checks if the volume is too low and subtracts 1 score steadily
    if(mic.getLevel() < 0.025){
      score--;
      if(score < 0){
        score = 0;
      }
    }

  // REWORK Addition : When a set time has passed and no hit has been detected, add another face and reset the timer. 
  // Adds +1 to the number of faces and creates a new face and places it last in the random grid faces array. 
  if(millis() - addFaceTime > 10000){
      numFaces++;
      var newrand1 = random(0,5);
      var newrand2 = random(0,3);
      faces2[numFaces] = new Face(random(sizeW/4,width-sizeW/4),random(sizeH/4,height-sizeH/4),sizeW,sizeH,newrand1,newrand2);
      faces2[numFaces].head = new headPiece(faces2[numFaces].x,faces2[numFaces].y,newrand1);
      faces2[numFaces].mouth = new mouthPiece(faces2[numFaces].x,faces2[numFaces].y,newrand2);
      addFaceTime = millis();
      addSound.play();
  }

  for(var i = 0; i < numFaces; i++){
    
    // Checking that there is a face in the array
    if(faces2[i] != null){
      faces2[i].display();
      faces2[i].head.display();
      faces2[i].mouth.display();
    }

    // If hit is true and the dot is over the face, also resets the timer to add a face
    if(hit == true && mic.getLevel() > 0.2){
      hitSound.play();
      faces2[i] = null;
      retargetDot();
      score += 1000;
      addFaceTime = millis();
    }

  }
}

  if(styleFaces == "Grid" || styleFaces == "Rand"){


    // draw the score area
    fill(50);
    rect(0,470,960,30);
    fill(100);
    textSize(30);
    text("Score", 5, 495);
    text(score, 100, 495);

    // check if endgame is triggered, if not, draw the dot
    if(!checkEndGame()){
      // REWORK : if the dot hits the target, change the target
      if((dotX < targetX[randomTarget]+5 && dotX > targetX[randomTarget]-5) && (dotY < targetY[randomTarget]+5 && dotY > targetY[randomTarget]-5)){
       retargetDot();
      }
      drawDot();
    }
  
  }

}


function initiateNewRandom(){

  score = 0;

  // Populating the target arrays for the dot
  for(var i = 0; i<100; i++){
    targetX[i] = random(0,960);
    targetY[i] = random(0,500);
  }

  hasReset = true;

  //Resets the timeOrigin to be the start of the new "game"
  timeOrigin = millis();

  // New random set of faces for grid configuration
  if(styleFaces == "Grid"){

    for(var i = 0; i < 5; i++){
      rand1[i] = [];
      rand2[i] = [];
      faces1[i] = [];
      for(var j = 0; j < 3; j++){
        faces1[i][j] = new Face(sizeW+(sizeW*i)+(sizeW*i),sizeH+(sizeH*j)+(sizeH*j),sizeW,sizeH,rand1[i][j],rand2[i][j]);
        rand1[i][j] = random(0,5);
        rand2[i][j] = random(0,3);

        faces1[i][j].head = new headPiece(faces1[i][j].x,faces1[i][j].y,rand1[i][j]);
        faces1[i][j].mouth = new mouthPiece(faces1[i][j].x,faces1[i][j].y,rand2[i][j]);
      }
    }

  } 

  if(styleFaces == "Rand") {

    // New number of random faces for random configuration
    numFaces = random(10,100);

    // This is for printing it out in random positions within the constrains of the screen depending on the size of the screen and face
    for(var i = 0; i < numFaces; i++){
      rand1[i] = random(0,5);
      rand2[i] = random(0,3);

      faces2[i] = new Face(random(sizeW/4,width-sizeW/4),random(sizeH/4,height-sizeH/4),sizeW,sizeH,rand1[i],rand2[i]);
      faces2[i].head = new headPiece(faces2[i].x,faces2[i].y,rand1[i]);
      faces2[i].mouth = new mouthPiece(faces2[i].x,faces2[i].y,rand2[i]);

    }

  }

}


// Function for generating a new face
function Face(faceX, faceY, faceW, faceH,randHead,randMouth){

  this.x = faceX;
  this.y = faceY;
  this.w = faceW;
  this.h = faceH;
  this.rand1 = randHead;
  this.rand2 = randMouth;

  this.display = function(){

    // If dot is over a head then trigger action
    if(dotX > (this.x-this.w/2) && dotX < (this.x-this.w/2+this.w) && dotY > this.y-this.h/2 && dotY < this.y-this.h/2+this.h){
      hit = true;
    } else { 
      hit = false;
    }

    this.leftEye = new Eye(this.x-1*(this.w/3), this.y-1*(this.h/4), this.w/4);
    this.rightEye = new Eye(this.x+1*(this.w/3), this.y-1*(this.h/4), this.w/4);
    
    
    fill(54,57,66);
    rect(this.x-this.w/2, this.y-this.h/2,this.w,this.h);
    rect(this.x-(ampAdjSizeW/8*2),this.y+(ampAdjSizeH/2),ampAdjSizeW/8*4,ampAdjSizeH/8*2);

    this.leftEye.update(dotX,dotY);
    this.leftEye.display();
    this.rightEye.update(dotX,dotY);
    this.rightEye.display();

  };

}

// For generting a headpiece for the face
function headPiece(headX, headY, type){

  this.x = headX;
  this.y = headY;
  this.type = type;

  this.display = function(){

    push();
    // Double triangle head display
    if(this.type > 0 && this.type <= 1){
      fill(142,40,0);
      triangle(this.x,this.y-(sizeH/25),this.x-(sizeW/4*3),this.y-(sizeH/4*3),this.x+(sizeW/4*3),this.y-(sizeH/4*3));
    }
    // Simple square head display
    if(this.type > 1 && this.type <= 2){
      fill(0);
      rect(this.x-(sizeW/4*3),this.y-(sizeH/4*3),sizeW/4*6,sizeH/4*1.5,sizeW/4);
      
    }
    // Triangle with "gem" display
    if(this.type > 2 && this.type <= 3){
      fill(142,40,0);
      triangle(this.x,this.y-(sizeH/25),this.x-(sizeW/4*3),this.y-(sizeH/4*3),this.x+(sizeW/4*3),this.y-(sizeH/4*3));
      fill(0);
      ellipse(this.x,this.y-(sizeH/3),sizeW/3,sizeH/3);
      fill(r,g,b);
      ellipse(this.x,this.y-(sizeH/3),sizeW/4,sizeH/4);
      
    }
    // Square with 2 "gems" display
    if(this.type > 3 && this.type <= 4){
      fill(0);
      rect(this.x-(sizeW/4*3),this.y-(sizeH/4*3),sizeW/4*6,sizeH/4*1.5,sizeW/4);
      fill(r,g,b);
      ellipse(this.x-sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/3,sizeH/3);
      fill(41,73,8);
      ellipse(this.x-sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/4,sizeH/4);
      fill(r,g,b);
      ellipse(this.x+sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/3,sizeH/3);
      fill(41,73,8);
      ellipse(this.x+sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/4,sizeH/4);
    }
    // 2 "Horns" display
    if(this.type > 4 && this.type <= 5){
      fill(76,28,28);
      triangle(this.x,this.y-(sizeH/8*2),this.x-(sizeW/8*6),this.y-(sizeH/8*2),this.x-(sizeW/8*6),this.y-(sizeH/8*12));
      triangle(this.x,this.y-(sizeH/8*2),this.x+(sizeW/8*6),this.y-(sizeH/8*2),this.x+(sizeW/8*6),this.y-(sizeH/8*12));
    }
    pop();
  };

}

// For generating and eye, the update function allows the eye to "follow" the mouse
function Eye(eyeX, eyeY, eyeSize) {

  this.x = eyeX;
  this.y = eyeY;
  this.size = eyeSize+vol;
  this.angle = 0;

  this.update = function(ax, ay){
    this.angle = atan2(ay - this.y, ax - this.x);
  };

  this.display = function(){
    push();
    translate(this.x,this.y);
    fill(r,g,b);
    ellipse(0,0, this.size, this.size);
    rotate(this.angle);
    fill(216,201,168);
    ellipse(this.size/4,0,this.size/2,this.size/2);
    pop();
  };

}

function mouthPiece(mX, mY, type){

  this.x = mX;
  this.y = mY;
  this.type = type;

  this.display = function(){
    push();

    // Mouth shape similar to first itteration
    if(this.type>0 && this.type <= 1){
      fill(76,28,28);
      quad(this.x,this.y-(ampAdjSizeH/8*1),this.x-(ampAdjSizeW/8*2.5),this.y+(ampAdjSizeH/8*1.5),this.x,this.y+(ampAdjSizeH/8*6),this.x+(ampAdjSizeW/8*2.5),this.y+(ampAdjSizeH/8*1.5));
      fill(255,176,58);
      quad(this.x,this.y-(ampAdjSizeH/8*1),this.x-(ampAdjSizeW/8*1.5),this.y+(ampAdjSizeH/8*1),this.x,this.y+(ampAdjSizeH/8*5.5),this.x+(ampAdjSizeW/8*1.5),this.y+(ampAdjSizeH/8*1));

    }
    // Open Mouth type  
    if(this.type>1 && this.type <= 2){
      fill(76,28,28);
      rect(this.x-(ampAdjSizeW/8*2.5),this.y+(ampAdjSizeH/8*1.5),ampAdjSizeW/8*5,ampAdjSizeH/8*1);
      rect(this.x-(ampAdjSizeW/8*2.5),this.y+(ampAdjSizeH/8*3.5),ampAdjSizeW/8*5,ampAdjSizeH/8*1);

    }
    // Square with teeth
    if(this.type>2 && this.type <= 3){
      fill(76,28,28);
      rect(this.x-(ampAdjSizeW/8*2.5),this.y+(ampAdjSizeH/8*1.5),ampAdjSizeW/8*5,ampAdjSizeH/8*1);
      rect(this.x-(ampAdjSizeW/8*2.5),this.y+(ampAdjSizeH/8*3.5),ampAdjSizeW/8*5,ampAdjSizeH/8*1);
      fill(255,176,58);
      rect(this.x-(ampAdjSizeW/8*2),this.y+(ampAdjSizeH/8*2.5),ampAdjSizeW/16,ampAdjSizeH/8*1);
      rect(this.x-(ampAdjSizeW/8*1),this.y+(ampAdjSizeH/8*2.5),ampAdjSizeW/16,ampAdjSizeH/8*1);
      rect(this.x-(ampAdjSizeW/8*0.25),this.y+(ampAdjSizeH/8*2.5),ampAdjSizeW/16,ampAdjSizeH/8*1);
      rect(this.x+(ampAdjSizeW/8*0.5),this.y+(ampAdjSizeH/8*2.5),ampAdjSizeW/16,ampAdjSizeH/8*1);
      rect(this.x+(ampAdjSizeW/8*1.5),this.y+(ampAdjSizeH/8*2.5),ampAdjSizeW/16,ampAdjSizeH/8*1);
    }
    pop();

  };

}

// Using the mousclick during a grid or random game will cost 50 points but will retarget the ball
function mousePressed(){
  if(styleFaces == "Rand" || styleFaces == "Grid"){
    retargetDot();
    score = score-50;
      if(score < 0){
        score = 0;
      }
  }
}

// REWORK : Before when you clicked the mouse it did a color change, but now I want that to be called when there is a certain amount of increase instead
// To achieve this I made the color change a function and then called it when the increase is a certain amount
function dramaColorOn(){
  background(92,100,40);
  r = random(45,61);
  g = random(144,160);
  b = random(211.227);
}

function dramaColorOff(){
  background(92,131,48);
  r = 56;
  g = 37;
  b = 20;
}

// REWORK : A dot that moves around the screen for the gamification element
function drawDot(){

  dotX += (targetX[randomTarget] - dotX)*easing;
  dotY += (targetY[randomTarget] - dotY)*easing;

  fill(200);
  ellipse(dotX,dotY,20,20);

}

// REWORK : New function that changes the target for the dot to move towards
function retargetDot(){
  randomTarget = int(random(0,1000));
}

// Initiates a new random grid  
function newRandomGrid(){
  styleFaces = "Grid";
  addFaceTime = millis();
  initiateNewRandom();
}

// Initiates a new random mess
function newRandomMess(){
  styleFaces = "Rand";
  addFaceTime = millis();
  initiateNewRandom();
}

// REWORK : Added new single face option
function newSingleFace(){
  hasReset = true;
  styleFaces = "Intro";
  addFaceTime = millis();
  score = 0;
}

// REWORK ADDED : Checks the state of the array depending on the game style and returns true if game is ended
function checkEndGame(){
  
  if(styleFaces == "Grid"){
    var gridCheck = 15;

    for(var i = 0; i < 5; i++){
      for(var j = 0; j < 3; j++){
        if(faces1[i][j] == null){
          gridCheck--;
          println(gridCheck);
        }
      }
    }

    if(gridCheck == 0){
      styleFaces = "End";
      return true;
    } else {
      return false;
    }

  }

  if(styleFaces == "Rand"){
    var gridCheck2 = numFaces;

    for(var i = 0; i < numFaces; i++){
      if(faces2[i] == null){
        gridCheck2--;
      }
    }

    if(gridCheck2 < 0){
      styleFaces = "End";
      return true;
    } else {
      return false;
    }

  }
}


function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }

}

thumbnail.png