launch_of_martin

master
pnofrc 4 years ago
parent fce603c1a4
commit b4cca856c0

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

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

@ -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
//}

@ -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

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

@ -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>

@ -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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Loading…
Cancel
Save