SI14/canvas.js

function fontRead(){
  fontReady = true;
}





function preload() {
    
           footsteps = document.getElementById("footsteps");//walking
PNF1 = document.getElementById("PNF1");

    
myFont = loadFont("ApfelGrotezk-Regular.ttf", fontRead);
    myFont2 = loadFont("typefaces/TINY5x3-40.ttf", fontRead);
    myFont3 = loadFont("typefaces/TINY5x3-60.ttf", fontRead);
    myFont4 = loadFont("typefaces/TINY5x3-80.ttf", fontRead);
    myFont5 = loadFont("typefaces/TINY5x3-100.ttf", fontRead);
    myFont6 = loadFont("typefaces/TINY5x3-120.ttf", fontRead);
    myFont7 = loadFont("typefaces/TINY5x3-140.ttf", fontRead);
    myFont8 = loadFont("typefaces/TINY5x3-160.ttf", fontRead);
    myFont9 = loadFont("typefaces/TINY5x3-180.ttf", fontRead);
    myFont10 = loadFont("typefaces/TINY5x3-200.ttf", fontRead);
    myFont11 = loadFont("typefaces/TINY5x3-220.ttf", fontRead);
    myFont12 = loadFont("typefaces/TINY5x3-240.ttf", fontRead);
    myFont13 = loadFont("typefaces/TINY5x3-260.ttf", fontRead);
    myFont14 = loadFont("typefaces/TINY5x3-280.ttf", fontRead);
        
    sou = PNF1
};





// Place not found 1
// Place not found 2
// Lobster Lounge 1
// Lobster Lounge 1
// The Secret Garden
// Sonic the Sellout1
// Sonic the Sellout 2
// Pigeon Plaza 1
// Pigeon Plaza 2


p5.disableFriendlyErrors = true;

var canvas;

var hit = false;

//little ball
var ballX = Math.random() * window.innerWidth; //set starting point of ball
var ballY = Math.random() * window.innerHeight;
var ballwidth = 35;//set size of ball
var ballheight = 35;

var ballDirectionX = -1;
var ballDirectionY = -1;
var ballSpeed = 5;

//player1 is  CPU
var p1X = 5;//set a distance from left border***
var p1Y = 250;
var cpuSpeed = 40;

//player 2
var p2X = -5;//set a distance from right border***
var p2Y = -5;

//player 2
var p3X = -20;//set a distance from right border***
var p3Y = -20;


//playersize
var playerWidth = 10;
var playerHeight = 200; 
var pSpeed = 15;

//scoreboard
var p1Score = 0;
var p2Score = 0;

//FUNCTIONS
var stage = 0;
//0 =splash
//1 =pong

var coordinateX = Math.random() * window.innerWidth;
var coordinateY = Math.random() * window.innerHeight;

var letterSize = 50;


var myFont, fontReady = false;
var clicks = 0;
var song;

var hit = false;

var inside = false;

var capture = true;


var r = 0;
var g = 0;
var b = 0;

var col = 0;

var img;


//var _createImg2;
//let cheatcode = '';

//var sliderRate,
//var sliderPan;

function setup() {  
    
    
  // // console.log(coordinateX);
  createCanvas(windowWidth, windowHeight).position(0,0).style('z-index','-10').style('display','fixed');
  width = windowWidth;
  height = windowHeight;  
  rectMode(CENTER);
  textSize(30);
  //textalignment
  textAlign(CENTER);
  //img = loadImage =('INTRO.gif');  
}



// function loaded(){
//   song.play();
// }

function draw(){ 
    
    footsteps.play();

    //pong(); //run pong function
    if (stage == 0){
      splash1();//run splash1
    }
    if(stage == 0 && clicks== 2){
      stage = 1;//startslide1  
      document.getElementById("GIF").style.visibility = "hidden";  
    }//close 0  
    if (stage == 1){
      splash2();//run splash2
    }
    if(stage == 1 && clicks == 3){
      stage = 2;//run splash2  
    }//close 1
    
    if (stage == 2){
      splash3();//run splash3
    }
    if(stage == 2 && clicks == 4){
      stage = 3;//run splash3  
    }//close 2
    
    if (stage == 3){
      splash4();//run splash4
    }
    if(stage == 3 && clicks == 5){
      stage = 4;//run splash4  
    }//close 3
    if (stage == 4){
      hideSplash(); // added by mb
      pong();//run pong
      noStroke();
      fill(255);
      textSize(80);
      textAlign(CENTER, CENTER);
      //displaying number of clicks
      //text(clicks, width/2, height/2);  
    }//close 2
    
    if(stage == 6){ //player 1 wins
      p1Wins();
    }//close 3
    
    if(stage == 7){ //player 2 wins
      p2Wins();
    }//close 4
    

  
}//close draw

function keyPressed() {
  // console.log('keyPressed: ' + key);
}

function keyPressed() {
  // console.log('keyPressed: ' + key);
}

function keyReleased() {
  // console.log('keyReleased: ' + key);
}

function keyTyped(){
 //   cheatcode += key;  
  // console.log('keyTyped: ' + key);
}

function mousePressed(){
  // console.log('mousePressed'); 
  clicks ++;  
  capture = true;  
}

function mouseReleased(){
    console.log('mouseReleased');
    capture = false;
}

function mouseClicked(){
  // console.log('mouseClicked');
}

function mouseMoved(){
  // console.log('mouseMoved');
}

function mouseDragged(){
  // console.log('mouseDragged');
}

function mouseWheel(){
  // console.log('mouseWheel');
}

function displayInSplash(html){
    var textcontainer = document.getElementById("textcontainer");
    textcontainer.innerHTML = html;
    textcontainer.style.display = "block"; // show the textcontainer
}
function hideSplash(){
    var textcontainer = document.getElementById("textcontainer");
    textcontainer.style.display = "none"; // hide the textcontainer
}

function splash1(){
    var html = "Tap or Click <em>anywhere</em> to start";
    displayInSplash(html);
    fill(255);
}
function splash2(){
    var html = 'You are the ball in a city-based pinball game. <br><br> Bounce from bumper to bumper.<br><br>Unlock secrets and surprises.<br><br>Drift through our urban playfield.';
    displayInSplash(html);
    background(255);
}

function splash3(){
    //welcome screen
    var html = "    1. Walk through the city using the <strong>coordinates</strong> (hints) given in this website.<br><br>2. Once you arrive, open your Wi-Fi settings and connect to the <strong>hotspot</strong> whose name you'll also find here.<br><br>3. Go to your <strong>web browser</strong> and type the name of the hotspot as a url:  <strong>name.wlan/</strong>.<br><br>A hotspot is a local wireless access point. Within the context of this issue, however, a hotspot is not a regular Wi-Fi connection: it doesn't connect you to the Internet, but, instead, to our pinball game.";
    displayInSplash(html);
    background(255);
}

function splash4(){
    //welcome screen
    var html = 'Tap anywhere to launch a ball!';
    displayInSplash(html);
    background(255);
}


function p1Wins(){
  //P1 Win screen
  r = map(mouseX, 0, windowHeight, 0, 255); 
  g = map(mouseY, 0, windowHeight, 255, 0);
  b = map(mouseX, 0, windowWidth, 0, 255);
//  col = mouseX/2;  
  background(r, g, b);  
  fill(255);
  textSize(25);
  textFont(myFont);  
  text('Refresh to launch a new ball', width/2, height/2);
    
    
}//close P1


function p2Wins(){
  //P2 Win screen
  background(163);
  fill(255);
  
  textSize(20);
  textFont(myFont);
  text('Refresh to launch a new ball', width/2, height/2);
}//close P2


function windowResized() { 
    resizeCanvas(windowWidth, windowHeight); 
} 

function ball(){
  ballX = ballX + (ballDirectionX*ballSpeed);//move horizontally
  ballY = ballY + (ballDirectionY*ballSpeed);//move vertically

  noStroke();//turn off outline border
  fill(255); //fill set to white
  ellipse(ballX, ballY, ballwidth, ballheight);
  
  if(ballX < 0){//ball off the left of the screen
    ballDirectionX = ballDirectionX*-1;
  }
  if(ballX > width){//ball off the right of the screen
    ballDirectionX = ballDirectionX*-1;
    //insert a sound here  
  }
  if(ballY < 0){//ball off the left of the screen
    ballDirectionY = ballDirectionY*-1;
  }
  if(ballY > height){//ball off the top of the screen
    ballDirectionY = ballDirectionY*-1;
  }
}

function coordinateBall(){
  noStroke();//turn off outline border
  fill(0,0,0); //fill set to white
  let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
  ellipse(coordinateX,coordinateY, d, d);
}

function coordinateBallColored(){
  noStroke();
  r = map(ballX, 0, windowWidth, 0, 255); 
  g = map(ballY, 0, windowHeight, 255, 0);
  c = map(mouseX, -99 , windowHeight, 255, 0)
  let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
  fill(r,g,c);
  ellipse(coordinateX,coordinateY, d, d);
  
}
function pong() {
    
  let name = "Hotspot name:\nPLACE NOT FOUND";
  let coord = "52.07239, 4.31139";

  cpu(); //loop cpu function
      
  //if (PNF1.paused) {
   // PNF1.play();
  //}    


  //IN BETWEEN VARIABLES SHOWCASE
 
      r = map(ballX, 0, windowWidth, 0, 255); 
      g = map(ballY, 0, windowHeight, 255, 0);
      b = map(mouseX, 0, windowWidth, 0, 255);

      let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
      let e = int(dist(width/2, height/2, ballX, ballY)); 
  
    if (inside){
    
      hit = collideCircleCircle(coordinateX,coordinateY,d-ballwidth,ballX, ballY,ballwidth) 
      console.log(hit)
    } else {
      hit = collideCircleCircle(coordinateX,coordinateY,d,ballX, ballY,ballwidth) 
      console.log(hit)
    }
      if (hit == true){
          PNF1.play();
          inside = true;

      } else {
          if (inside){
            if (capture){
              //inside bounce
                ballDirectionX = ballDirectionX*-1;
                ballDirectionY = ballDirectionY*-1;               
            }  else {
                inside = false;
            }
          }  
      }
    
    
      fill(255);
//      text(cheatcode, 100, 100);          

    
      if (hit == false){
        background(r,g,b);
        coordinateBall();
        textSize(width/20);
        fill(255); 
        textFont(myFont); 
        textAlign(TOP);
        textLeading(width/20);   
text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a hotspot ", width/2, 70);
        textSize(width/35); 
        textFont(myFont); 
        textAlign(CENTER);
        textLeading(width/35);   
        text('Click/Press while the ball is inside the circle\n to get your coordinates', width/2, height-120);  
        fill(0);   
        ball();  
        //background(r, g, b); 
        } else if (hit == true) {
        background(0,0,0);
                    
        //click.loop = false;              
        //text('Your mouse is inside the hotspot range range at: '+ mouseX + ' pixels (x) /' + mouseY + ' pixels (y)', width/2, 280); 
        // clear();
            
        if(mouseIsPressed == true) {
            // if the mouse is pressed, while the ball is in the circle
            // big text at the top
            coordinateBallColored();
            ball();
            textSize(width/20);   
            fill(255);
            textFont(myFont); 
            textAlign(TOP);  
            textLeading(width/20);   
            text('I Don\'t Know Where We\'re Going, But\ngo and find a hotspot at:', width/2, 70); 
            
            // text at the bottom
            textFont(myFont);
            textAlign(CENTER); 
            textSize(width/20);
            textLeading(width/20);   
            text(name, width/2, height-100);
            textSize(width/17);
            text(coord , width/2, 150);
            fill(0);
            //layer1.play();//sirens
        } else {
            // if the mouse is not pressed, while the ball is in the circle
            // big text at the top
            coordinateBallColored();
            ball();
            textSize(width/20);   
            fill(255);
            textFont(myFont); 
            textAlign(TOP);  
            textLeading(width/20);   
            text('I Don\'t Know Where We\'re Going, But\ntouch or click find a hotspot!', width/2, 70); 
        }       
}

  if(mouseIsPressed == true) {
    textFont(myFont);
    textAlign(CENTER); 
    textSize(20); 
    fill(0);  
    //text('Sound Unlocked! (your mouse is currently pressed) ', width/2, height-90);
    //layer1.play();//sirens
  }
      
  if(mouseIsPressed){  
    if(mouseButton === RIGHT) {
      textFont(myFont);
      textAlign(CENTER); 
      textSize(20); 
      fill(255);  
      //text('Sound Unlocked! (your mouse is right clicked) ', width/2, height/2-160)
      //layer5.play();  
    }    
  }  

  if(keyIsPressed == true) {
    textAlign(CENTER);
    textFont(myFont);   
    fill(0);  
    textSize(50);    
    // // console.log("playlayer4");
  }

  if(ballX >= 900 && ballX <= 1100) {
    textAlign(CENTER); 
    textFont(myFont);   
    textSize(20);    
    fill(0);  
    // // console.log("playlayer6");  
  }

  if(ballY >= 50 && ballY <= 200) {
    textAlign(CENTER); 
    textSize(20); 
    // // console.log("playlayer2");          
  } 
      
  if(windowWidth < 800) {
    textAlign(BOTTOM);
    textFont(myFont); 
    textSize(20); 
    fill(0);  
    // // console.log("playlayer8");           
  
  }  

  if(windowHeight < 400) {
    textAlign(CENTER); 
    fill(0);  
    textSize(20); 
    // // console.log("playlayer8");          
  }

  
  if(ballX <= 0){
    //off left wall - p1 missed
    p2Score = p2Score+1;//add point
    //recenterball   
    ball1X = width/2; 
    ballY = height/2;
  }//close p2 scores
  
  if(ballX >= width){
    //off right wall - p2 missed
    p1Score = p1Score+1;//add point
    //recenterball
  //    ball1X = width/2; 
  //    ballY = height/2;
  }//close p1 scores
    
  if(p1Score >= 10000){
    stage = 6; //run p1wins
  }//close p1wins
  
    if(p2Score >= 10000){
    stage = 6; //run p2wins
        
  }//close p2wins
    
}//close pong


//UP
function keyTyped(){
  if(key == 'z' && keyIsPressed){
    p1Y = p1Y-pSpeed; 
  }//close w
//DOWN  
  if(key == 's' && keyIsPressed){
    p1Y = p1Y+pSpeed; 
  }//close s
  
}//close keytyped

function cpu(){
  //controls cpu player
  if(ballX < width/2){//has the ball crossed the court?
    if(p1Y <= ballY){
      p1Y = p1Y+cpuSpeed;
      //move down
    }//close above cel
  
  
    if(p1Y >= ballY){
      p1Y = p1Y-cpuSpeed;
    //move up     
    }//close bellow ball
  }//close move cpu
  else{
    p1Y = p1Y; //only move when ball is on cpu side
  }//close else
  
    
}//close cpu
hit