prototyping-times/launch_si14/canvas.js

p5.disableFriendlyErrors = true;

var canvas;

var hit = false;

//little ball
var ballX = 600; //set starting point of ball
var ballY = 400;
var ballwidth = 25;//set size of ball
var ballheight = 25;

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 = 5;

//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 myFont, fontReady = false;

var song;

var hit = false;

//var sound1;
//var startOverSound;
//var layer1;
//var layer2;
//var layer3;
//var layer4;
//var layer5;
//var layer6;
//var layer7;
//var layer8;

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

var col = 0;

var hit = false;

let PNF; 

//var sliderRate,
//var sliderPan;

function fontRead(){
  fontReady = true;
}

function preload() {

  myFont = loadFont("brut_grotesque-text-webfont.ttf", fontRead);
      
  layer1 = document.getElementById("sound1");//ambaincz
  layer2 = document.getElementById("sound2");//sirens
  layer3 = document.getElementById("sound3");//pigeons
  layer4 = document.getElementById("sound4");//bell 1
  layer5 = document.getElementById("sound5");// truck
  layer6 = document.getElementById("sound6");//streetcrowd
  layer7 = document.getElementById("sound7");//walking
  layer8 = document.getElementById("sound8");//bikeonpath
  layer9 = document.getElementById("container2");//bikeonpath

  //  layer1 = loadSound("sounds/sirens.mp3");//if mouse goes somewhere  
  //  layer2 = loadSound("sounds/trafficjam.mp3");//if mouse goes somewhere  
  //  layer3 = loadSound("sounds/pigeons.mp3");  
  //  layer4 = loadSound("sounds/bell1.mp3");//how to randomize this with other bell sounds
  //  layer5 = loadSound("sounds/truckreversebeep.mp3");     
  //  layer6 = loadSound("sounds/streetcrowd.mp3");  
  //  layer7 = loadSound("sounds/walking.mp3");  
  //  layer8 = loadSound("sounds/bikeonpath.mp3"); 
    
   PNF =loadImage = ('images/PNF.png');
}



function setup() {  
  // // console.log(coordinateX);
  createCanvas(windowWidth, windowHeight).position(0,0).style('z-index','-10').style('display','fixed');
  width = windowWidth;
  height = windowHeight;  
  rectMode(CENTER);

  //textalignment
  textAlign(CENTER);
}



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

function draw(){ 





  // console.log("stage", stage);
      
    //pong(); //run pong function
    if (stage == 0){
      splash1();//run splash1
    }
    if(stage == 0 && mouseIsPressed == true){
      stage = 1;//startslide2  
    }//close 0    
    if (stage == 1){
      splash2();//run splash2
    }//close 1
    if(stage == 1 && keyIsPressed == true){
      stage = 2;//startslide2  
    }
    if (stage == 2){
      pong();//run pong
    }//close 2
    
    if(stage == 3){ //player 1 wins
      p1Wins();
    }//close 3
    
    if(stage == 4){ //player 2 wins
      p2Wins();
    }//close 4
  
}//close draw

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

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

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

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

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

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

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

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

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

function splash1(){
  //welcome screen
  background(0);
  fill(255);
  
  let lines= 'Navigate and find hidden hotspots within the cities of Den Haag or/and Rotterdam by interacting with your Web browser.\n These hotspots contain games and files made and shared by the 1st year students from Experimental Publishing Master Course (XPUB).\n This is part of the Special Issue 14 made in collaboration with Page Not Found (PNF) in Den Haag.\n In order to particiate to this geocatching experience, it is required from you be located in Den Haag (Netherlands).\n If you are not from one of these two cities, please contact us via mail to recieve a USB stick containing games from the students.Insert mail here';
  textSize(14);
        
  textLeading(16);
  textAlign(BOTTOM); 
  textFont(myFont);
  text(lines, width/2, height-100);
  textSize(25);
  textFont(myFont);
  text('SPECIAL ISSUE 14 WEB LAUNCHER\nClick anywhere', width/2, height/2 );
}//close spash

function splash2(){
  //welcome screen
  background(255);
  fill(0);
  
  let lines= 'How does it work?\n Launch a ball from your device in order for it to start finding a nearby hotspot in a city.\n While the ball is crossing a hotspot range, you will notice a message popping asking you to click/tap in order to catch you hotspot location.\n You are also invited to move your cursor/finger, type, press, grab, zoom , rotate, and resize to unlock various sounds from the hotspot you are redirected to\n You would like to know what is going on? Please click the help button.\nYou are not located in Den Haag, you can still get the files by sending us your adress at xpub mail!.\n';
  textSize(14);
       
  textLeading(16);
  textAlign(BOTTOM); 
  textFont(myFont);
  text(lines, width/2, height-100);
  textSize(25);
  textFont(myFont);
  text('LAUNCH A BALL IN THE CITY\nPress any key', width/2, height/2 );
}

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;
  }
  //collide with paddles
  if(ballX >= p1X-5 && ballX <= p1X+5 && ballY >= p1Y-100 && ballY <= p1Y+100){
    //hit the player
    ballDirectionX = ballDirectionX*-1; //change direction
  }
}

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() {

  // background()

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

  fill(255)
  textSize(25);
  textFont(myFont);
  textAlign(BOTTOM);    
  text('Click while the ball is in the hotspot\n in order to get its coordinates!', width/2, height-100); 

  //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
      hit = collideCircleCircle(coordinateX,coordinateY,d,ballX, ballY,ballwidth) 
      console.log(hit)
      
      if (hit == false){
        background(r,g,b);
        textFont(myFont);
        textAlign(CENTER); 
        textSize(15);   
        fill(255);       
        text('your mouse is inside a hot location at: '+ mouseX + ' pixels (x) /' + mouseY + ' pixels (y)', width/2, 280); 
        layer7.play();//walking
        coordinateBall();
        ball();
        //background(r, g, b); 
        } else if (hit == true) {
          fill(0);
          background(0,0,0)
          coordinateBallColored();
          ball();
        // clear();
       
      }

    
  if(mouseIsPressed == true) {
    textFont(myFont);
    textAlign(CENTER); 
    textSize(15);                   
    text('your mouse is currently pressed ', width/2, 220);
    layer1.play();//sirens
  }
      
  if(mouseIsPressed){  
    if(mouseButton === RIGHT) {
      textFont(myFont);
      textAlign(CENTER); 
      textSize(15); 
      text('your mouse is right clicked ', width/2, 240)
    }    
  }  

  if(keyIsPressed == true) {
    textAlign(CENTER); 
    textSize(15);    
    text('a key is currently pressed ', width/2, 300);
    layer4.play();//Bell
    // // console.log("playlayer4");
  }

  if(ballX >= 900 && ballX <= 1100) {
    textAlign(CENTER); 
    textSize(15);    
    text('The ball is crossing a hotspot at: ' + ballX +' pixels (x)', width/2, 400);   
    layer6.play();//streetcrowd
    // // console.log("playlayer6");  
  }

  if(ballY >= 50 && ballY <= 200) {
    textAlign(CENTER); 
    textSize(15); 
    text('The ball is crossing a hotspot at: '+ ballY +' pixels (y)', width/2, 420); 
    layer2.play();//sirens
    // // console.log("playlayer2");          
  } 
      
  if(windowWidth < 800) {
    textAlign(CENTER); 
    textSize(15); 
    text('canvas width has been resized to the hot size of: ' + width +' pixels (width)', width/2, 360);
    layer8.play();//pigeons
    // // console.log("playlayer8");           
  
  }  

  if(windowHeight < 400) {
    textAlign(CENTER); 
    textSize(15); 
    text('canvas height has been resized to the hot size of: ' + height +' pixels (height)', width/2, 380);
    layer8.play();//bikeonpath
    // // console.log("playlayer8");          
  }

  


  let e = int(dist(width/2, height/2, ballX, ballY)); 

  textAlign(CENTER); 
  textSize(25);
  fill(255);
  text('You are at '+e+' meters away from the hotspot', width/2, 100);  
    
  
  //draw players
  rect(p1X, p1Y, playerWidth, playerHeight);//p1
  rect(p2X, p2Y, playerWidth, playerHeight);//p2

  //window size refresh  
    //scoreboard
  textSize(10);
  text(p1Score, width/2 -10 , 20);
  text(p2Score, width/2 + 10, 20);
  
  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 >= 100){
    stage = 3; //run p1wins
  }//close p1wins
  
    if(p2Score >= 1){
    stage = 4; //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