launch_of_martin

launch_si14/.gitignore

@@ -0,0 +1,2 @@
+*.
+!/.gitignore

launch_si14/canvas-Copy1.js

@@ -0,0 +1,498 @@
+p5.disableFriendlyErrors = true;
+
+var canvas;
+
+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 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 c = map(mouseX, 0, width, 100, 800);
+  // Scale the mouseX value from 0 to canvas width to a range between 40 and 300
+  var d = map(mouseY, 0, height, 100, 800);
+
+//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() {  
+  createCanvas(windowWidth, windowHeight).position(0,0).style('z-index','-10').style('display','fixed');
+  width = windowWidth;
+  height = windowHeight;  
+  rectMode(CENTER);
+    
+  background(r, g, b);   
+    
+ // sound1.playMode('restart');      
+      
+  //textalignment
+  textAlign(CENTER);
+}//close setup 
+
+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 pong() {
+   
+    //OTHER EXISTING EVENTS https://p5js.org/reference/
+  r = map(ballX, 0, windowWidth, 0, 255); 
+  g = map(ballY, 0, windowHeight, 255, 0);
+  b = map(mouseX, 0, windowWidth, 0, 255);
+      
+//  col = mouseX/2;  
+  background(r, g, b);  
+
+//hit = collideBallEllipse(ballX, ballY, 150, 200, 200, 100);
+    
+//   stroke(hit ? color('red') : 0);
+//   print('colliding?', hit);  
+    
+      //open pong
+  //call functions
+  keyTyped();//loop keytyped function
+  //keyPressed();//loop keypressed function
+  cpu(); //loop cpu function
+//  document.querySelector("audio").play()  
+  if (sound1.paused) {
+    sound1.play();
+  }    
+
+  noStroke();//turn off outline border
+  fill(255); //fill set to white
+  textSize(25);  
+  textAlign(BOTTOM); 
+    
+  text('Click while the ball is in the hotspot\n in order to get its coordinates!', width/2, height-100); 
+  textSize(40);
+  textFont(myFont);
+  textAlign(BOTTOM);    
+  //IN BETWEEN VARIABLES SHOWCASE
+  
+
+     
+    //if (mouseY >= height/2-200 && mouseY <= height/2+400) {     
+        //if (mouseX >= width/2-200 && mouseX <= width/2+400) {
+    var ell = ellipse(width/2, height/2, d, d);
+    
+          if (Math.sqrt((mouseX-width/2)*(mouseX-width/2) + (mouseY-height/2)*(mouseY-height/2)) < d) { 
+              textFont(myFont);
+                textAlign(CENTER); 
+                textSize(15);          
+                text('your mouse is inside a hot location at: '+ mouseX + ' pixels (x) /' + mouseY + ' pixels (y)', width/2, 280); 
+                layer7.play();//walking
+                    
+ }
+//}                         
+                  if(ballY >= height/2-200 && ballY <= height/2+400) {
+                        if(ballX >= width/200 && ballX <= width/2+400) {
+                            background(255, 255, 255);   
+                            textAlign(CENTER); 
+                            textSize(25); 
+                            fill(0,0,0);
+                            text('Click now to catch your hotspot location!', width/2, 200);
+                                if(mouseIsPressed == true) {
+
+}
+}
+}          
+      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");          
+}
+
+
+  
+  fill(r, g, c); 
+  
+    //var ell = ellipse(width/2+100, height/2+100, d, d);   
+   
+    
+  let e = int(dist(width/2+100, height/2+100, ballX, ballY)); 
+    
+  textAlign(CENTER); 
+  textSize(25);
+  fill(255);
+  text('You are at '+e+' meters away from the hotspot', width/2, 100);  
+    
+  //create our motion
+  ballX = ballX + (ballDirectionX*ballSpeed);//move horizontally
+  ballY = ballY + (ballDirectionY*ballSpeed);//move vertically
+  
+  //make a ball
+  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
+  }
+  //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
+
+// window.onresize = function() {
+//   var w = window.innerWidth;
+//   var h = window.innerHeight;  
+//   cnv.size(w,h);
+//   width = w;
+//   height = h;
+// }
+//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
+
+
+//function keyPressed(){
+//  if(keyCode == UP_ARROW && keyIsPressed){
+//    p2Y = p2Y-pSpeed;
+//  }//closedown
+
+//  if(keyCode == DOWN_ARROW && keyIsPressed){
+//    p2Y = p2Y+pSpeed;
+//  }//closedown
+//}
+

launch_si14/canvas.js

@@ -0,0 +1,500 @@
+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
+

launch_si14/index.html

@@ -0,0 +1,901 @@
+
+<!DOCTYPE html>
+
+<html>
+
+<head>
+<meta charset="utf-8">
+      
+<!--------------- TITLE (OPTIONAL) ---------------------------------->  
+    
+<title>Pongball</title>
+
+<!--------------- LINKS --------------------------------------------->  
+      
+<link rel="stylesheet" type="text/css" href="style.css">
+<script src="p5.min.js"></script>
+<script src="p5.dom.min.js"></script>
+<script src="p5.sound.js"></script>
+<script defer src="https://unpkg.com/p5.collide2d"></script> 
+        
+<!---------------  PRINT BUTTON (OPTIONAL)----------------------------->
+    
+<script>
+function myFunction() {
+    window.print(); 
+}
+</script>
+</head>
+    
+<audio id="myAudio">
+  <source src="loop7.mp3" type="audio/mp3" loop controls>
+</audio>    
+    
+<!---------------  COLOR OF EVERY TEXTS ----------------------------->
+
+
+<body style="color: white">
+
+<!--------------- AUTO-CLOSING INTRO PAGE (OPTIONAL) -------------------------------------
+    
+<div id="container2">
+<div id="intro">
+Pong prototype ↔ ⤡ ↕</div>
+</div>
+-->
+
+<!--------------- HELP POP UP WINDOW (OPTIONAL) ------------------------------------------>
+    
+<div id="BOX3">
+<a href="#openModal"><img src="symboles/HELP.png"></a></div> 
+<div id="openModal" class="modalDialog">
+<div><a href="#close" title="Close" class="close">X</a>
+<p2>
+How to play?<br><br>  
+This geocathing game prototype aims to detect and transform your hidden browser setups, events and interactions into playful interactions allowing find hidden hotspots within the cities of Den Haag and Rotterdam. These hotspot were settled by the 1st year students from Experimental Publishing Master Course (XPUB) within the conception and publication of the SPECIAL ISSUE 14 made in collaboration with Page Not Found (PNF).
+<br><br>
+List of unlockables interactions:<br><br>
+🡢&emsp; player has clicked the canvas<br>
+🡢&emsp; player has pressed a key<br>
+🡢&emsp; player has resized the canvas<br>
+🡢&emsp; player has positioned cursor inside a hotspot range<br>
+🡢&emsp; ball position crossed a hotspot range<br>
+🡢&emsp; player has right-clicked the canvas<br>
+<br><br>
+Secret unlock:<br><br>
+🡢&emsp; defeat the robot<br>
+</p2>    
+</div>
+</div>
+    
+<!---------------  PRINT BUTTON (OPTIONAL)----------------------------
+
+  <div id="BOX4">
+<a href="" onclick="myFunction()"><img src="symboles/PRINT.png"></a>
+</div>  
+
+
+
+<!---------------  SWITCH ON/OFF GAME (OPTIONAL)-------------------------
+
+
+<label class="switch"><input type="checkbox">
+  <span class="slider"></span>
+</label>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+
+<div id="container">
+ 
+<div id="a">
+<p>
+    45.468228937788° N <br>  64.478486044168° W </p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+       
+<div id="b">
+<p>
+-69.535547433524° N <br>  -21.770328652084° W<br>
+<!--<audio src="loop24.mp3" loop controls></audio>  --->
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+        
+<div id="c">
+<p>
+83.817037622062° N <br>  75.547655902884° W<br> 
+<!---<audio src="loop20.mp3" loop controls></audio>  --->
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="d">
+<p>
+-69.211285312414° N <br>  -156.987831368971° W<br> 
+<!--<audio src="loop5.mp3" loop controls></audio>  --->
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="e">
+<p>
+65.207652244681° N <br>  -78.411406682262° W<br> 
+<!--<audio src="loop7.mp3" loop controls></audio>  --->
+</p>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+</div>
+<div id="f">
+<p>
+4.232622685038° N <br>  -22.562460870461° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="g">
+<p>
+-23.000585864846° N <br>  39.862909125727° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="h">
+<p>
+28.473805854111° N <br>  -138.849370487980° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+      
+<div id="i">
+<p>
+83.177715343767° N <br>  67.878286808521° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+        
+<div id="j">
+<p>
+2.878686901313° N <br>  -29.679525615756° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="k">
+<p>
+45.682175158387° N <br>  111.384834223637° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="l">
+<p>
+57.807816757038° N <br>  118.117456827798° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="m">
+<p>
+-13.967108875166° N <br>  -112.987485813303° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="n">
+<p>
+46.199042731130° N <br>  163.551497381635° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="o">
+<p>
+-34.288040266637° N <br>  -4.741791206255° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="p">
+<p>
+-75.843776132435° N <br>  -145.381086130236° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="q">
+<p>
+84.978435189236° N <br>  -124.246753320727° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="r">
+<p>
+-56.662992489559° N <br>  -14.597053461260° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+  
+    
+<div id="s">
+<p>
+-59.442800166152° N <br>  2.730408063197° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="t">
+<p>
+-4.482452562896° N <br>  -123.068291204214° W
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="u">
+<p>
+-47.653624934975° N <br>  -24.061542292983° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="v">
+<p>
+-28.457456781856° N <br>  -123.734568178159° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="w">
+<p>
+73.705182470725° N <br>  60.628732263882° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="x">
+<p>
+10.264445360194° N <br>  92.159397796655° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="y">
+<p>
+-11.215738027354° N <br>  -46.510920351757° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="z">
+<p>
+-66.072157421715° N <br>  13.363156654771° W</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aa">
+<p>
+-74.667155559237° N <br>  -172.544212247451° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+
+ <div id="ab">
+<p>
+64.476851856871° N <br>  -4.606347790522° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="ac">
+<p>
+-72.892127570348° N <br>  -172.804647787628° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ad">
+<p>
+-54.276955498487° N <br>  17.647786461482° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ae">
+<p>
+18.176722479252° N <br>  21.457335762132° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="af">
+<p>
+-56.363631195247° N <br>  -105.744017632325° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ag">
+<p>
+77.814914934196° N <br>  87.534661568671° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+
+<div id="ah">
+<p>
+-86.769686144288° N <br>  -80.201807134688° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="ai">
+<p>
+80.008841078854° N <br>  34.738928653157° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aj">
+<p>
+48.482824341545° N <br>  -157.398706033397° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="ak">
+<p>
+2.386215112346° N <br>  -94.538854418162° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="al">
+<p>
+-59.034001742551° N <br>  -52.427644225466° W 
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="am">
+<p>
+-12.948615404242° N <br>  174.161222733845° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+    
+<div id="an">
+<p>
+26.866196353649° N <br>  -53.936251122288° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ao">
+<p>
+44.624224761601° N <br>  -153.876421378534° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ap">
+<p>
+77.485722643657° N <br>  134.931448483754° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aq">
+<p>
+-13.373757182202° N <br>  -39.081784212068° W
+</p>
+</div>
+    
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ar">
+<p>
+-12.387335466461° N <br>  -179.402877744986° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="as">
+<p>
+39.336754849664° N <br>  38.458784172220° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="at">
+<p>
+76.035821530357° N <br>  114.669211863165° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="au">
+<p>
+25.388650722631° N <br>  136.368348837615° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="av">
+<p>
+-67.440746320146° N <br>  -109.487249512887° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aw">
+<p>
+-11.112781859245° N <br>  10.604647494726° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ax">
+<p>
+-9.595634901583° N <br>  9.931657614432° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="ay">
+<p>
+-62.821554800275° N <br>  -140.285137516074° W
+</p>
+
+<div id="az">
+<p>
+-2.298507267226° N <br>  143.232580777820° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaa">
+<p>
+67.342436188378° N <br>  -103.523267441824° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aab">
+<p>
+63.649385636362° N <br>  24.719823920836° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aac">
+<p>
+-53.734856404616° N <br>  -13.512759106225° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aad">
+<p>
+76.625897815147° N <br>  -94.051275717883° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aae">
+<p>
+-8.297518455316° N <br>  36.054677675136° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaf">
+<p>
+25.443689335202° N <br>  145.481395143235° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aag">
+<p>
+-19.515357396658° N <br>  -150.965590192377° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aah">
+<p>
+-59.693665825354° N <br>  76.838421363654° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aai">
+<p>
+-47.568447239715° N <br>  -111.879831677949° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaj">
+<p>
+-59.696488285485° N <br>  48.859520428871° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aak">
+<p>
+39.781514110663° N <br>  -26.459986191184° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aal">
+<p>
+-70.851878611638° N <br>  -27.355336262705° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aam">
+<p>
+-90.639425322052° N <br>  -153.866121822174° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aan">
+<p>
+33.463220540489° N <br>  164.155623146130° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aao">
+<p>
+19.836137838514° N <br>  -55.241648232675° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aap">
+<p>
+-69.153658232054° N <br>  32.363573014693° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaq">
+<p>
+46.475468531423° N <br>  21.436063383728° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aar">
+<p>
+-50.222887287823° N <br>  -93.864436120359° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aas">
+<p>
+-38.203050982173° N <br>  -40.531977664460° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aat">
+<p>
+-72.258604743111° N <br>  11.927836724246° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aau">
+<p>
+-61.846794871726° N <br>  -48.251740897586° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aav">
+<p>
+47.413686201573° N <br>  10.273720353081° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaw">
+<p>
+-35.552846236252° N <br>  89.530874754364° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aax">
+<p>
+39.758555676374° N <br>  13.835214433172° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aay">
+<p>
+Antonymique.
+<br><br>
+Minuit. Il pleut. Les autobus passent presque vides. Sur le capot d'un ai du côté de la bastille, un vieillard
+qui a la tête rentrée dans les épaules et ne porte pas de chapeau remercie une dame placée très loin de
+lui parce qu'elle lui caresse les mains. Puis il va se mettre debout sur les genoux d'un monsieur qui
+occupe toujours sa place.
+Deux heures plus tôt, derrière la gare de Lyon, ce vieillard se bouchait les oreilles pour ne pas entendre
+un clochard qui se refusait à dire qu'il lui fallait descendre d'un cran le bouton inférieur de son caleçon.
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaz">
+<p>
+-71.534477214412° N <br>  -50.761556829127° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaaa">
+<p>
+-44.628785127764° N <br>  159.584914796637° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaab">
+<p>
+-19.377542237346° N <br>  96.181178400656° W</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaac">
+<p>
+-87.008832725547° N <br>  -75.714654661147° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaad">
+<p>
+-68.697436255881° N <br>  44.096134083742° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaae">
+<p>
+12.331660854886° N <br>  -144.047423278574° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaaf">
+<p>
+-83.426857854031° N <br>  -98.573854582339° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaag">
+<p>
+Injurieux.
+<br><br>
+-71.416737764893° N <br>  -101.712365074560° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaah">
+<p>
+-85.021595965957° N <br>  -42.146058250356° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaai">
+<p>
+22.256079354344° N <br>  -179.193810321226° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaaj">
+<p>
+-85.504271682565° N <br>  -148.681173377631° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaak">
+<p>
+-59.143281767381° N <br>  48.143282720366° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaal">
+<p>
+-84.182561344556° N <br>  -176.389466508257° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaam">
+<p>
+7.393542179649° N <br>  38.334321566515° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaan">
+<p>
+10.809125653588° N <br>  -72.021318336168° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaao">
+<p>
+24.931024757485° N <br>  55.548121376550° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaap">
+<p>
+37.252881355956° N <br>  -169.137576567745° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaaq">
+<p>
+24.368682155479° N <br>  -21.253524457075° W
+</p>
+</div>
+
+<!--------------- CONTENT  ------------------------------------------>
+
+<div id="aaar">
+<p>
+-16.754178920866° N <br>  48.376738558733° W
+</p>
+</div>
+
+
+</div>
+
+    
+<div id="audio">
+    <audio controls loop id="sound1" src="sounds/cityambiance.mp3"></audio>
+    <audio controls loop id="sound2" src="sounds/sirens.mp3"></audio>
+    <audio controls loop id="sound3" src="sounds/pigeons.mp3"></audio>
+    <audio controls loop id="sound4" src="sounds/bell1.mp3"></audio>
+    <audio controls loop id="sound5" src="sounds/truckreversebeep.mp3"></audio>
+    <audio controls loop id="sound6" src="sounds/streetcrowd.mp3"></audio>
+    <audio controls loop id="sound7" src="sounds/walking.mp3"></audio>
+    <audio controls loop id="sound8" src="sounds/bikeonpath.mp3"></audio>
+
+    
+    </div>    
+    
+    <!--    
+//  myFont = loadFont("brut_grotesque-text-webfont.ttf", fontRead);
+//  sound1 = loadSound("sounds/cityambiance.mp3");//basic ambaice
+//  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"); -->
+    </div>
+<script src="canvas.js"></script>
+
+</body>
+</html>
+
+
+

launch_si14/myTools.js

@@ -0,0 +1,137 @@
+/*
+ myTools  KLL
+ use extra js file here in root
+ name: myTools.js
+ idea is to develop it here ( master ) and download / upload to other projects.
+ content: 
+ 
+ functions to call:
+
+ logo(x,y,radius,speed);
+ 
+ mysong( true/false ); //________________ from anywhere to start stop song
+ //______________________________________ here as example linked into the Button press action
+
+
+//_________________________________ !!
+<!-- 
+ need 
+    <script src="myTools.js"></script>  
+ inside index.html
+-->
+
+*/
+
+//________________________________________________________ FUNCTIONS MYSOUND
+
+
+let song;
+
+function preload() {
+  song = loadSound('sound/loop5.mp3');
+}
+
+function mysong( go ) {
+  if ( go && !song.isLooping() ) song.loop();
+  if ( !go && song.isLooping() ) song.pause();
+}
+
+
+function mouseVolume() {//___ test a simple mouse slider for volume
+   if ( song.isLooping() ) {
+     fill(200);
+     triangle(10,height-10, width-10,height-30,width-10,height-10);
+     let amp = map(mouseX, 0, width,0,1);
+     fill(200,0,0);
+     rect( amp*width,height-30,5,20);
+     //print(amp);
+     masterVolume(amp);
+   }
+}
+
+
+
+//________________________________________________________ FUNCTION LOGO
+var ang = 0;
+
+function logo(x, y, r, dang) {
+  var d1 = 2 * r;
+  var d2 = 2 * r / sqrt(2);
+  ang += dang; //__________________ animation
+  push();
+  fill(255); //____________________ fill same all 3 shapes
+  strokeWeight(4);
+  stroke(200, 200, 0); //__________ here same as main background gives a nice effect
+  ellipseMode(CENTER);
+  rectMode(CENTER);
+  translate(x + r, y + r); //______ CENTER thinking
+  push();
+  rotate(-ang); //__________________ animate first bigger rect
+  rect(0, 0, d1, d1);
+  pop();
+  ellipse(0, 0, d1, d1);
+  rotate(ang); //_________________ animate second smaller rect  
+  rect(0, 0, d2, d2);
+  textAlign(CENTER, CENTER);
+  textSize(20);
+  text("K L L", 0, 0);
+  pop();
+}
+
+/*
+ __________________________________ classes declared:
+ 
+ class Button
+ declare:
+  var button;
+  Button button(x, y, w, h, sel, textFalse, textTrue, id);
+ methods:
+  button.draw(); //_______________ from draw
+  button.mousePressed(); //_______ local use global mymouseClicked
+  boolean button.over(); //_______ local
+  
+*/
+
+class Button { //____________________________________ begin class
+  constructor(xi, yi, wi, hi, seli, atextisel,atextinosel, idi) {
+    this.xb = xi;
+    this.yb = yi;
+    this.wb = wi;
+    this.hb = hi;
+    this.selb = seli;
+    this.textbsel = atextisel;
+    this.textbnosel = atextinosel;
+    this.idb = idi;
+  }
+
+  draw() {
+    this.mousePressed();
+    strokeWeight(3);
+    if (this.selb) fill(0, 200, 0);
+    else fill(0, 0, 200);
+    if (this.over()) stroke(200, 0, 200);
+    else stroke(0, 200, 200);
+    rect(this.xb, this.yb, this.wb, this.hb);
+
+    noStroke();
+    fill(200);
+    textSize(30);
+    if ( this.selb ) text(this.textbnosel, this.xb + 5, this.yb + this.hb - 8);
+    else text(this.textbsel, this.xb + 5, this.yb + this.hb - 8);
+  }
+
+  over() {
+    return (mouseX > this.xb & mouseX < this.xb + this.wb & mouseY > this.yb & mouseY < this.yb + this.hb);
+  }
+
+  mousePressed() {
+    //    if (this.over() && mouseIsPressed) {
+    if (this.over() && mymouseClicked) {
+      mymouseClicked = false; // reset global
+      this.selb = ! this.selb; // toggle;
+      mysong( this.selb ); //__________________________ start stop sound
+    }
+  }
+
+} //___________________________________________________ end class
+