XPUB
/
prototyping-times
15
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
prototyping-times/launch_si14/index.html

902 lines
19 KiB
HTML
Raw Permalink Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink