master
poni 3 years ago
parent fac780d247
commit afa9879c06

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 867 KiB

@ -0,0 +1,579 @@
function fontRead(){
fontReady = true;
}
function preload() {
footsteps = document.getElementById("footsteps");//walking
PNF1 = document.getElementById("PNF1");
myFont = loadFont("ApfelGrotezk-Regular.ttf", fontRead);
myFont2 = loadFont("typefaces/TINY5x3-40.ttf", fontRead);
myFont3 = loadFont("typefaces/TINY5x3-60.ttf", fontRead);
myFont4 = loadFont("typefaces/TINY5x3-80.ttf", fontRead);
myFont5 = loadFont("typefaces/TINY5x3-100.ttf", fontRead);
myFont6 = loadFont("typefaces/TINY5x3-120.ttf", fontRead);
myFont7 = loadFont("typefaces/TINY5x3-140.ttf", fontRead);
myFont8 = loadFont("typefaces/TINY5x3-160.ttf", fontRead);
myFont9 = loadFont("typefaces/TINY5x3-180.ttf", fontRead);
myFont10 = loadFont("typefaces/TINY5x3-200.ttf", fontRead);
myFont11 = loadFont("typefaces/TINY5x3-220.ttf", fontRead);
myFont12 = loadFont("typefaces/TINY5x3-240.ttf", fontRead);
myFont13 = loadFont("typefaces/TINY5x3-260.ttf", fontRead);
myFont14 = loadFont("typefaces/TINY5x3-280.ttf", fontRead);
sou = PNF1
};
// Place not found 1
// Place not found 2
// Lobster Lounge 1
// Lobster Lounge 1
// The Secret Garden
// Sonic the Sellout1
// Sonic the Sellout 2
// Pigeon Plaza 1
// Pigeon Plaza 2
p5.disableFriendlyErrors = true;
var canvas;
var hit = false;
//little ball
var ballX = Math.random() * window.innerWidth; //set starting point of ball
var ballY = Math.random() * window.innerHeight;
var ballwidth = 35;//set size of ball
var ballheight = 35;
var ballDirectionX = -1;
var ballDirectionY = -1;
var ballSpeed = 5;
//player1 is CPU
var p1X = 5;//set a distance from left border***
var p1Y = 250;
var cpuSpeed = 40;
//player 2
var p2X = -5;//set a distance from right border***
var p2Y = -5;
//player 2
var p3X = -20;//set a distance from right border***
var p3Y = -20;
//playersize
var playerWidth = 10;
var playerHeight = 200;
var pSpeed = 15;
//scoreboard
var p1Score = 0;
var p2Score = 0;
//FUNCTIONS
var stage = 0;
//0 =splash
//1 =pong
var coordinateX = Math.random() * window.innerWidth;
var coordinateY = Math.random() * window.innerHeight;
var letterSize = 50;
var myFont, fontReady = false;
var clicks = 0;
var song;
var hit = false;
var inside = false;
var capture = true;
var r = 0;
var g = 0;
var b = 0;
var col = 0;
var img;
//var _createImg2;
//let cheatcode = '';
//var sliderRate,
//var sliderPan;
function setup() {
// // console.log(coordinateX);
createCanvas(windowWidth, windowHeight).position(0,0).style('z-index','-10').style('display','fixed');
width = windowWidth;
height = windowHeight;
rectMode(CENTER);
textSize(30);
//textalignment
textAlign(CENTER);
//img = loadImage =('INTRO.gif');
}
// function loaded(){
// song.play();
// }
function draw(){
footsteps.play();
//pong(); //run pong function
if (stage == 0){
splash1();//run splash1
}
if(stage == 0 && clicks== 2){
stage = 1;//startslide1
document.getElementById("GIF").style.visibility = "hidden";
}//close 0
if (stage == 1){
splash2();//run splash2
}
if(stage == 1 && clicks == 3){
stage = 2;//run splash2
}//close 1
if (stage == 2){
splash3();//run splash3
}
if(stage == 2 && clicks == 4){
stage = 3;//run splash3
}//close 2
if (stage == 3){
splash4();//run splash4
}
if(stage == 3 && clicks == 5){
stage = 4;//run splash4
}//close 3
if (stage == 4){
hideSplash(); // added by mb
pong();//run pong
noStroke();
fill(255);
textSize(80);
textAlign(CENTER, CENTER);
//displaying number of clicks
//text(clicks, width/2, height/2);
}//close 2
if(stage == 6){ //player 1 wins
p1Wins();
}//close 3
if(stage == 7){ //player 2 wins
p2Wins();
}//close 4
}//close draw
function keyPressed() {
// console.log('keyPressed: ' + key);
}
function keyPressed() {
// console.log('keyPressed: ' + key);
}
function keyReleased() {
// console.log('keyReleased: ' + key);
}
function keyTyped(){
// cheatcode += key;
// console.log('keyTyped: ' + key);
}
function mousePressed(){
// console.log('mousePressed');
clicks ++;
capture = true;
}
function mouseReleased(){
console.log('mouseReleased');
capture = false;
}
function mouseClicked(){
// console.log('mouseClicked');
}
function mouseMoved(){
// console.log('mouseMoved');
}
function mouseDragged(){
// console.log('mouseDragged');
}
function mouseWheel(){
// console.log('mouseWheel');
}
function displayInSplash(html){
var textcontainer = document.getElementById("textcontainer");
textcontainer.innerHTML = html;
textcontainer.style.display = "block"; // show the textcontainer
}
function hideSplash(){
var textcontainer = document.getElementById("textcontainer");
textcontainer.style.display = "none"; // hide the textcontainer
}
function splash1(){
var html = "Tap or Click <em>anywhere</em> to start";
displayInSplash(html);
fill(255);
}
function splash2(){
var html = 'You are the ball in a city-based pinball game. <br><br> Bounce from bumper to bumper.<br><br>Unlock secrets and surprises.<br><br>Drift through our urban playfield.';
displayInSplash(html);
background(255);
}
function splash3(){
//welcome screen
var html = " 1. Walk through the city using the <strong>coordinates</strong> (hints) given in this website.<br><br>2. Once you arrive, open your Wi-Fi settings and connect to the <strong>hotspot</strong> whose name you'll also find here.<br><br>3. Go to your <strong>web browser</strong> and type the name of the hotspot as a url: <strong>name.wlan/</strong>.<br><br>A hotspot is a local wireless access point. Within the context of this issue, however, a hotspot is not a regular Wi-Fi connection: it doesn't connect you to the Internet, but, instead, to our pinball game.";
displayInSplash(html);
background(255);
}
function splash4(){
//welcome screen
var html = 'Tap anywhere to launch a ball!';
displayInSplash(html);
background(255);
}
function p1Wins(){
//P1 Win screen
r = map(mouseX, 0, windowHeight, 0, 255);
g = map(mouseY, 0, windowHeight, 255, 0);
b = map(mouseX, 0, windowWidth, 0, 255);
// col = mouseX/2;
background(r, g, b);
fill(255);
textSize(25);
textFont(myFont);
text('Refresh to launch a new ball', width/2, height/2);
}//close P1
function p2Wins(){
//P2 Win screen
background(163);
fill(255);
textSize(20);
textFont(myFont);
text('Refresh to launch a new ball', width/2, height/2);
}//close P2
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function ball(){
ballX = ballX + (ballDirectionX*ballSpeed);//move horizontally
ballY = ballY + (ballDirectionY*ballSpeed);//move vertically
noStroke();//turn off outline border
fill(255); //fill set to white
ellipse(ballX, ballY, ballwidth, ballheight);
if(ballX < 0){//ball off the left of the screen
ballDirectionX = ballDirectionX*-1;
}
if(ballX > width){//ball off the right of the screen
ballDirectionX = ballDirectionX*-1;
//insert a sound here
}
if(ballY < 0){//ball off the left of the screen
ballDirectionY = ballDirectionY*-1;
}
if(ballY > height){//ball off the top of the screen
ballDirectionY = ballDirectionY*-1;
}
}
function coordinateBall(){
noStroke();//turn off outline border
fill(0,0,0); //fill set to white
let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
ellipse(coordinateX,coordinateY, d, d);
}
function coordinateBallColored(){
noStroke();
r = map(ballX, 0, windowWidth, 0, 255);
g = map(ballY, 0, windowHeight, 255, 0);
c = map(mouseX, -99 , windowHeight, 255, 0)
let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
fill(r,g,c);
ellipse(coordinateX,coordinateY, d, d);
}
function pong() {
let name = "Hotspot name:\nPLACE NOT FOUND";
let coord = "52.07239, 4.31139";
cpu(); //loop cpu function
//if (PNF1.paused) {
// PNF1.play();
//}
//IN BETWEEN VARIABLES SHOWCASE
r = map(ballX, 0, windowWidth, 0, 255);
g = map(ballY, 0, windowHeight, 255, 0);
b = map(mouseX, 0, windowWidth, 0, 255);
let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
let e = int(dist(width/2, height/2, ballX, ballY));
if (inside){
hit = collideCircleCircle(coordinateX,coordinateY,d-ballwidth,ballX, ballY,ballwidth)
console.log(hit)
} else {
hit = collideCircleCircle(coordinateX,coordinateY,d,ballX, ballY,ballwidth)
console.log(hit)
}
if (hit == true){
PNF1.play();
inside = true;
} else {
if (inside){
if (capture){
//inside bounce
ballDirectionX = ballDirectionX*-1;
ballDirectionY = ballDirectionY*-1;
} else {
inside = false;
}
}
}
fill(255);
// text(cheatcode, 100, 100);
if (hit == false){
background(r,g,b);
coordinateBall();
textSize(width/20);
fill(255);
textFont(myFont);
textAlign(TOP);
textLeading(width/20);
text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a hotspot ", width/2, 70);
textSize(width/35);
textFont(myFont);
textAlign(CENTER);
textLeading(width/35);
text('Click/Press while the ball is inside the circle\n to get your coordinates', width/2, height-120);
fill(0);
ball();
//background(r, g, b);
} else if (hit == true) {
background(0,0,0);
//click.loop = false;
//text('Your mouse is inside the hotspot range range at: '+ mouseX + ' pixels (x) /' + mouseY + ' pixels (y)', width/2, 280);
// clear();
if(mouseIsPressed == true) {
// if the mouse is pressed, while the ball is in the circle
// big text at the top
coordinateBallColored();
ball();
textSize(width/20);
fill(255);
textFont(myFont);
textAlign(TOP);
textLeading(width/20);
text('I Don\'t Know Where We\'re Going, But\ngo and find a hotspot at:', width/2, 70);
// text at the bottom
textFont(myFont);
textAlign(CENTER);
textSize(width/20);
textLeading(width/20);
text(name, width/2, height-100);
textSize(width/17);
text(coord , width/2, 150);
fill(0);
//layer1.play();//sirens
} else {
// if the mouse is not pressed, while the ball is in the circle
// big text at the top
coordinateBallColored();
ball();
textSize(width/20);
fill(255);
textFont(myFont);
textAlign(TOP);
textLeading(width/20);
text('I Don\'t Know Where We\'re Going, But\ntouch or click find a hotspot!', width/2, 70);
}
}
if(mouseIsPressed == true) {
textFont(myFont);
textAlign(CENTER);
textSize(20);
fill(0);
//text('Sound Unlocked! (your mouse is currently pressed) ', width/2, height-90);
//layer1.play();//sirens
}
if(mouseIsPressed){
if(mouseButton === RIGHT) {
textFont(myFont);
textAlign(CENTER);
textSize(20);
fill(255);
//text('Sound Unlocked! (your mouse is right clicked) ', width/2, height/2-160)
//layer5.play();
}
}
if(keyIsPressed == true) {
textAlign(CENTER);
textFont(myFont);
fill(0);
textSize(50);
// // console.log("playlayer4");
}
if(ballX >= 900 && ballX <= 1100) {
textAlign(CENTER);
textFont(myFont);
textSize(20);
fill(0);
// // console.log("playlayer6");
}
if(ballY >= 50 && ballY <= 200) {
textAlign(CENTER);
textSize(20);
// // console.log("playlayer2");
}
if(windowWidth < 800) {
textAlign(BOTTOM);
textFont(myFont);
textSize(20);
fill(0);
// // console.log("playlayer8");
}
if(windowHeight < 400) {
textAlign(CENTER);
fill(0);
textSize(20);
// // console.log("playlayer8");
}
if(ballX <= 0){
//off left wall - p1 missed
p2Score = p2Score+1;//add point
//recenterball
ball1X = width/2;
ballY = height/2;
}//close p2 scores
if(ballX >= width){
//off right wall - p2 missed
p1Score = p1Score+1;//add point
//recenterball
// ball1X = width/2;
// ballY = height/2;
}//close p1 scores
if(p1Score >= 10000){
stage = 6; //run p1wins
}//close p1wins
if(p2Score >= 10000){
stage = 6; //run p2wins
}//close p2wins
}//close pong
//UP
function keyTyped(){
if(key == 'z' && keyIsPressed){
p1Y = p1Y-pSpeed;
}//close w
//DOWN
if(key == 's' && keyIsPressed){
p1Y = p1Y+pSpeed;
}//close s
}//close keytyped
function cpu(){
//controls cpu player
if(ballX < width/2){//has the ball crossed the court?
if(p1Y <= ballY){
p1Y = p1Y+cpuSpeed;
//move down
}//close above cel
if(p1Y >= ballY){
p1Y = p1Y-cpuSpeed;
//move up
}//close bellow ball
}//close move cpu
else{
p1Y = p1Y; //only move when ball is on cpu side
}//close else
}//close cpu
hit

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAUNCHER</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="overlay">
<a href="https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/test.zip">GET YOUR BONUS FILES</a>
</div>
</body>
</html>

@ -0,0 +1,58 @@
*{
/* Prevent any object from being highlighted upon touch event*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
@font-face {
font-family: "ApfelGrotezk-Regular";
src: url("../../ApfelGrotezk-Regular.ttf");
}
.display-none {
display:none;
}
.display-flex {
display:flex;
}
.display-block{
display:block;
}
body{
font-size: 1.5em;
background-color: black;
color: white;
font-family: "ApfelGrotezk-Regular";
text-align: center;
}
.overlay{
z-index: 2;
position: fixed;
}
#code-input{
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
}
#input{
visibility: hidden;
}
a{
text-decoration: none;
color: white
}
a:hover{
text-decoration: none;
color: blue;
cursor: pointer;
}

Binary file not shown.

@ -0,0 +1,74 @@
function openInput(){
document.getElementById("input").style.visibility = "visible";
document.getElementById("code-input").style.visibility = "hidden";
document.getElementById("fname").focus();
}
let toxt = document.querySelector ("input[type='toxt']");
function checkCode (e) {
if (e.key == "Enter") {
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "PPRGM") {
location='ZIPFILES/pprgm/';
}//OK
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "BORDERS") {
location='ZIPFILES/BORDERS.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "LIFE") {
location='ZIPFILES/LIFE.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "FUTURE") {
location='ZIPFILES/FUTURE.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "DIALOGUE") {
location='ZIPFILES/DIALOGUE.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "BREATH") {
location='ZIPFILES/BREATH.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "CAPITALISM") {
location='ZIPFILES/CAPITALISM.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "GAMES") {
location='ZIPFILES/CAPITALISM.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "SYNERGY") {
location='ZIPFILES/SINERGY.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "DEATH") {
location='ZIPFILES/DEATH.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "VIRUS") {
location='ZIPFILES/VIRUS.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "THEWHOLE") {
location='ZIPFILES/THEWHOLE.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "CAT") {
location='https://hub.xpub.nl/sandbot/PrototypingTimes/sketches/Euna/';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "APPOINTMENT") {
location='ZIPFILES/appointment/';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "PRAXIS") {
location='ZIPFILES/PRAXIS.zip';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "OFFLINE") {
location='ZIPFILES/OFFLINE.zip';
} //OK
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "POISON") {
location='ZIPFILES/poison/';
}
if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "THISISNOTART") {
location='ZIPFILES/THISISNOTART.zip';
}
else {
console.log("NO GOOD");
}
}
}
toxt.addEventListener("keydown", checkCode );

@ -1,8 +1,200 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<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 src="https://unpkg.com/p5.collide2d"></script>
<script type="text/javascript"></script>
<title>I Don't Know Where We're Going, But..</title>
<!--------------- INPUT CODE ---------------------------------->
<div class="overlay">
<button id="code-input" value="myimage" onclick="openInput()">Enter code
</button>
</div>
<div id="input">
<input type="toxt" id="fname" name="firstname" placeholder="">
</div>
<!--------------- PRINT BUTTON (OPTIONAL)----------------------------->
</head>
<!--------------- textcontainer (mb) ------------------------------------------>
<div id="textcontainer"></div>
<body>
test+
<div>
<img src="INTRO.gif" alt="" id="GIF"/></div>
<div id="BOX3">
<img src="symboles/HELP.png">
</div>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<p2>
Another lockdown; shops closed, museums closed, bars closed, cafés closed, restaurants closed.
You turn to escapist media, in another attempt to climb the inner walls of a deflating castle.
All that is left is the city in its rawest form and the people inhabiting its shut down structures.
Where can you go if everything is closed? What could you encounter along the way?
Locked within the walls of a comatose town, you are missing direction. If the city is your new playground, who are the players and what is the objective?
<br><br>
Special Issue #14 from Piet Zwart Institute's Master of Experimental Publishing is born from the never-realised seventh issue of The Situationist Times, a magazine edited and published by the Dutch artist Jacqueline de Jong from 1962 to 1964. We began by delving into the material De Jong had gathered for the prospective issue, which revolved around pinball machines and their female player.
<br><br>
With this in mind, "I Don't Know Where We're Going, But" intends to explore these themes by situating our emerging experiments in a more contemporary medium: hyper-stimulating video games. We took a deep dive into their history throughout the years and, (from this,) started making prototypes of retro arcade games. The result is an exploration of video game mechanics as a tool for narration. To anchor our digital games into the reality of the city, we felt it was appropriate to lean into the method of dérive, a term coined by The Situationists that refers to the wandering of the city without a set destination. The notion of going against predetermined structures resonated with our theoretical research on feminism, socialism & counter play. In the spirit of Situationism, we are stepping into psychogeographic methods of publishing, encouraging the exploration of urban environments through playfulness and dérive.
<br><br>
Find new trajectories or get lost within the many paths of this coordinate-based Special Issue, and discover the hidden signals we are sending out to you all across town. Bounce within a spontaneous rearrangement of situations and nodes, as the only way to experience the local network-based publication. In a battle of chance and control, let your personal path unravel an ensemble of concrete and fictitious publishing environments, where the shared notion of network is flipped-out.
<hr>
You receive coordinates in the city of Den Haag. On arrival at the given location, you log into a local wifi network with your mobile phone. This gives you access to parts of the content of this Issue, only to be directed to the next location. This game is playable within a day or spread out over days, as it will be running for the month of April. We hope that the content you will gather on your devices during your escape will last you for longer than that.
<small>A short note on the interface: The sounds you are hearing were recorded at the location of the hotspots that you need to find.</small>
<br><br>
<strong>Colophon</strong>
<br><br>
Conceptualised, designed, created, edited, produced, published and distributed by XPUB1 class of 2020.
<br><br>
Kendal Beynon, Martin Foucaut, Camilo García A., Clara Gradel, Nami Kim, Euna Lee, Jacopo Lega, Federico Poni, Louisa Teichmann, Floor van Meeuwen
<strong>Tutors</strong>: Manetta Berends, Aymeric Mansoux, Michael Murtaugh, Lídia Pereira, Steve Rushton, Marloes de Valk
<br><br>
<strong>Special thanks to</strong>: Sébastien Tien , Ola Vasiljeva,Jacqueline de Jong
<br><br>
<strong>and all the great people we met along the way</strong>: Kishonna Gray, Ellef Prestsæter, David Maroto, Anne-Marie Schleiner, Jamie Woodcock
<br><br>
<strong>Thanks to</strong>: Anesca and colleagues Hanny, Vincent and Wim Kenny.The Seafood service for hosting our hotspots.
<br><br>
<strong>Typeface: </strong> Apfel Grotezk, TINY
<br><br>
Rotterdam, NL <br>
Spring, 2021
<br><br>
Published by the Master Experimental Publishing at Piet Zwart Institute and Page Not Found
<br><br>
<strong>Licensing</strong>
<br><br>
XPUB - “I Dont Know Where Were Going, But” <br>
A Local Network CityQuest <br>
A Situationist times license<br>
© 2021 XPUB - SPECIAL ISSUE 14
<br><br>
All deformation, reproduction, modification, derivation and transformation of the "I Don't Know Where We're Going, But..." is permitted. This refers to all the games, images, texts, and videos created for this local network city quest.
<br><br>
This license does not apply to the materials that were created by third party creators. Third party materials will be marked with this symbol : ⨂.
</p2>
</div>
</div>
<div id="audio">
<audio autoplay loop id="footsteps" src="sounds/walking.mp3"></audio>
<!-- <audio controls loop id="PNF1" src="sounds/PNF_01.mp3"></audio>
<audio controls loop id="PNF2" src="sounds/PNF_02.mp3"></audio>
<audio controls loop id="PNF3" src="sounds/PNF_03.mp3"></audio>
<audio controls loop id="PNF4" src="sounds/PNF_04.mp3"></audio> -->
<audio controls loop id="PNF1" src="sounds/PNF_05.mp3"></audio>
<audio controls loop id="PNF2" src="sounds/PNF_06.mp3"></audio>
<!-- <audio controls loop id="Chinatown1" src="sounds/chinatown_01.mp3"></audio> -->
<audio controls loop id="LOBS1" src="sounds/chinatown_02.mp3"></audio>
<audio controls loop id="LOBS2" src="sounds/chinatown_03.mp3"></audio>
<audio controls loop id="SONIC1" src="sounds/schoolstraat_01.mp3"></audio>
<audio controls loop id="SONIC2" src="sounds/schoolstraat_02.mp3"></audio>
<!-- <audio controls loop id="Schoolstraat3" src="sounds/schoolstraat_03.mp3"></audio>
<audio controls loop id="Schoolstraat4" src="sounds/schoolstraat_04.mp3"></audio> -->
<!-- <audio controls loop id="pigeonsquare1" src="sounds/pigeonsquare_01.mp3"></audio>
<audio controls loop id="pigeonsquare2" src="sounds/pigeonsquare_02.mp3"></audio>
<audio controls loop id="pigeonsquare3" src="sounds/pigeonsquare_03.mp3"></audio>-->
<audio controls loop id="PIGEON1" src="sounds/pigeonsquare_04.mp3"></audio>
<audio controls loop id="PIGEON2" src="sounds/pigeonsquare_05.mp3"></audio>
<audio controls loop id="GARDE" src="sounds/spinoza_01.mp3"></audio>
<!-- <audio controls loop id="spinoza2" src="sounds/spinoza_02.mp3"></audio>
<audio controls loop id="spinoza3" src="sounds/spinoza_03.mp3"></audio> -->
</div>
<div id="container">
<div id="a">
</div>
</div>
<script defer src="canvas.js"></script>
<script defer src="codes.js"></script>
</body>
<script>
var button = document.getElementById('BOX3'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('openModal');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 849 KiB

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAUNCHER</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="GIF">
<img src="INTRO.gif" alt="whatever" id="gif"/></div>
<div class="overlay">
<button id="code-input" value="myimage" onclick="openInput()">enter codeword
</button>
</div>
<div id="input">
<input type="text" id="fname" name="firstname" placeholder="">
</div>
<script>
function openInput(){
document.getElementById("input").style.visibility = "visible";
document.getElementById("code-input").style.visibility = "hidden";
document.getElementById("fname").focus();
}
let text = document.querySelector ("input[type='text']");
function checkCode (e) {
if (e.key == "Enter") {
if (document.querySelector ("input[type='text']").value === "codeword") {
location='https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/index.html';
console.log("codeword works because of checkCode");
} else {
console.log("NO GOOD");
}
}
}
text.addEventListener("keydown", checkCode );
</script>
</body>
</html>

@ -0,0 +1,99 @@
*{
/* Prevent any object from being highlighted upon touch event*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
@font-face {
font-family: "ApfelGrotezk-Regular";
src: url("../ApfelGrotezk-Regular.ttf");
}
.display-none {
display:none;
}
.display-flex {
display:flex;
}
.display-block{
display:block;
}
body{
font-size: 1.5em;
background-color: black;
color: white;
font-family: "ApfelGrotezk-Regular";
}
.overlay{
z-index: 2;
position: fixed;
}
#code-input{
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 0.8em;
}
#code-input:hover{
color: blue;
cursor: pointer;
}
#input{
visibility: hidden;
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 0.8em;
}
#fname{
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 1em;
}
img { opacity: 1;
z-index: 0;
display: block;
position: fixed;
}
#gif {
visibility: visible;
position: absolute;
height: 50%;
top: 48%;
text-align: center;
left: 50%;
transform: translate(-50%,-50%);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 849 KiB

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAUNCHER</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="overlay">
<a href="https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/test.zip">GET YOUR BONUS FILES</a>
</div>
</body>
</html>

@ -0,0 +1,58 @@
*{
/* Prevent any object from being highlighted upon touch event*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
@font-face {
font-family: "ApfelGrotezk-Regular";
src: url("../../ApfelGrotezk-Regular.ttf");
}
.display-none {
display:none;
}
.display-flex {
display:flex;
}
.display-block{
display:block;
}
body{
font-size: 1.5em;
background-color: black;
color: white;
font-family: "ApfelGrotezk-Regular";
text-align: center;
}
.overlay{
z-index: 2;
position: fixed;
}
#code-input{
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
}
#input{
visibility: hidden;
}
a{
text-decoration: none;
color: white
}
a:hover{
text-decoration: none;
color: blue;
cursor: pointer;
}

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAUNCHER</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="overlay">
<a href="https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/test.zip">GET YOUR BONUS FILES</a>
</div>
</body>
</html>

@ -0,0 +1,58 @@
*{
/* Prevent any object from being highlighted upon touch event*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
@font-face {
font-family: "ApfelGrotezk-Regular";
src: url("../../ApfelGrotezk-Regular.ttf");
}
.display-none {
display:none;
}
.display-flex {
display:flex;
}
.display-block{
display:block;
}
body{
font-size: 1.5em;
background-color: black;
color: white;
font-family: "ApfelGrotezk-Regular";
text-align: center;
}
.overlay{
z-index: 2;
position: fixed;
}
#code-input{
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
}
#input{
visibility: hidden;
}
a{
text-decoration: none;
color: white
}
a:hover{
text-decoration: none;
color: blue;
cursor: pointer;
}

Binary file not shown.

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAUNCHER</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="GIF">
<img src="INTRO.gif" alt="whatever" id="gif"/></div>
<div class="overlay">
<button id="code-input" value="myimage" onclick="openInput()">enter codeword
</button>
</div>
<div id="input">
<input type="text" id="fname" name="firstname" placeholder="">
</div>
<script>
function openInput(){
document.getElementById("input").style.visibility = "visible";
document.getElementById("code-input").style.visibility = "hidden";
document.getElementById("fname").focus();
}
let text = document.querySelector ("input[type='text']");
function checkCode (e) {
if (e.key == "Enter") {
if (document.querySelector ("input[type='text']").value === "codeword") {
location='https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/index.html';
console.log("codeword works because of checkCode");
} else {
console.log("NO GOOD");
}
}
}
text.addEventListener("keydown", checkCode );
</script>
</body>
</html>

@ -0,0 +1,99 @@
*{
/* Prevent any object from being highlighted upon touch event*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
@font-face {
font-family: "ApfelGrotezk-Regular";
src: url("../ApfelGrotezk-Regular.ttf");
}
.display-none {
display:none;
}
.display-flex {
display:flex;
}
.display-block{
display:block;
}
body{
font-size: 1.5em;
background-color: black;
color: white;
font-family: "ApfelGrotezk-Regular";
}
.overlay{
z-index: 2;
position: fixed;
}
#code-input{
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 0.8em;
}
#code-input:hover{
color: blue;
cursor: pointer;
}
#input{
visibility: hidden;
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 0.8em;
}
#fname{
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 1em;
}
img { opacity: 1;
z-index: 0;
display: block;
position: fixed;
}
#gif {
visibility: visible;
position: absolute;
height: 50%;
top: 48%;
text-align: center;
left: 50%;
transform: translate(-50%,-50%);
}

@ -0,0 +1,12 @@
#textcontainer{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
background-color: yellow;
font-size: 72px;
text-align: center;
color: blue;
}

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

1
p5.dom.min.js vendored

File diff suppressed because one or more lines are too long

38
p5.min.js vendored

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.

@ -0,0 +1,12 @@
#textcontainer{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
background-color: pink;
font-size: 72px;
text-align: center;
color: red;
}

@ -0,0 +1,369 @@
img { opacity: 1;
z-index: 0;
display: block;
position: fixed;
}
a span.unclickable { text-decoration: none;
}
a span.unclickable:hover { cursor: default;
}
/*----------------- CANVAS FROM P5.JS--------------------*/
canvas{
z-index: 20;
}
#GIF {
visibility: visible;
position: absolute;
height: 50%;
top: 48%;
text-align: center;
left: 50%;
transform: translate(-50%,-50%);
}
/*----------------- CONTAINING ALL CONTENTS--------------------*/
/*----------------- WHAT IS THIS? THE MODAL BOX MAYBE--------------------*/
@keyframes disparition {
0% {opacity:1; z-index: 15000;}
10%, 90% { opacity: 0; z-index: -100;}
100% {opacity : 0; z-index: -100;}
}
/*----------------- HELP POP UP WINDOW--------------------*/
#openModal {
display:none;
font-family: 'ApfelGrotezk-Regular';
color: #000;
z-index: 99999;
}
.modalDialog {
position: absolute;
font-family: 'ApfelGrotezk-Regular';
color: #FFFF;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 1);
z-index: 99999;
cursor: url(symboles/CURSEUR.png), pointer;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
cursor: url(symboles/CURSEUR.png), pointer;
}
.modalDialog > div {
font-family: 'ApfelGrotezk-Regular';
url('ApfelGrotezk-Regular.woff') format('woff');
width: 100%;
color: white;
position: fixed;
margin: 1% auto;
padding: 1% 1% 1% 1%;
background: #000;
cursor: url(symboles/CURSEUR.png), pointer;
}
/*----------------- CLOSE POP UP --------------------*/
*{
/* Prevent any object from being highlighted upon touch event*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
@font-face {
font-family: "ApfelGrotezk-Regular";
src: url("../ApfelGrotezk-Regular.ttf");
}
.display-none {
display:none;
}
.display-flex {
display:flex;
}
.display-block{
display:block;
}
body{
font-size: 1.5em;
background-color: black;
color: white;
font-family: "ApfelGrotezk-Regular";
}
.overlay{
z-index: 2;
position: fixed;
}
#code-input{
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 0.8em;
}
#code-input:hover{
color: white;
cursor: pointer;
}
#input{
visibility: hidden;
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 5vw;
}
#fname{
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 5vw;
}
.close {
font-family: 'ApfelGrotezk-Regular';
color: #FFF;
font-size: 200%;
position: fixed;
right: -0.7%;
bottom: 1.5%;
width:40px;
text-decoration: none;
cursor: url(symboles/CURSEUR.png), pointer;
}
.close:hover {
color: #FFF;
cursor: url(symboles/CURSEUR.png), pointer;
}
/*----------------- FONTS --------------------*/
@font-face {
font-family: 'ApfelGrotezk-Regular';
font-weight: normal;
font-style: normal;
}
/*----------------- CURSOR --------------------*/
html {
cursor: url(symboles/NOcursor.png), pointer; min-height: 100%;
background: black;
}
/*----------------- AUDIO --------------------*/
#audio {
display: none;
}
#BOX4 img{
width:60px;
height: 60px;
position:absolute;
bottom:0;
left: 0;
cursor: url(symboles/CURSEUR.png), pointer;
}
#BOX4{
opacity:0;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
cursor: url(symboles/CURSEUR.png), pointer;
}
#BOX4:hover {
opacity:1;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
cursor: url(symboles/CURSEUR.png), pointer;
}
/*-----------------HELP/ABOUT BUTTON---------------------------------*/
#BOX3 img{
display: block;
width:40px;
height: 50px;
position: absolute;
bottom:0;
right: 0;
cursor: url(symboles/CURSEUR.png), pointer;
z-index: 9999;
}
#BOX3{
opacity:0.5;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
cursor: url(symboles/CURSEUR.png), pointer;
}
#BOX3:hover {
opacity:1;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
cursor: url(symboles/CURSEUR.png), pointer;
}
@media screen and (max-width: 768px) {
#textcontainer{
display: none;
position: absolute;
top: 0;
left: 0;
right:0;
width: auto;
height: auto;
font-size: 4.5vw;
text-align: center;
color: black;
margin-top: 70px;
padding: 5%;
}
#container2{
font-family: 'ApfelGrotezk-Regular';
width:100%;
z-index: 15000;
position: relative;
color: white;
display: block;
flex-direction: column;
justify-content: center;
align-items:center;
animation: disparition 1s ease-in forwards;
animation-delay: 10s;
}
p2 {
text-align: center;
font-size: 3vw;
line-height: 110%;
padding-left:10%;
padding-right:10%;
} }
@media screen and (min-width: 768px) {
#textcontainer{
width: calc(100% - 4em);
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
font-size: 3vw;
text-align: center;
color: black;
margin-top: 70px;
}
#container2{
font-family: 'ApfelGrotezk-Regular';
width:100%;
z-index: 15000;
position: relative;
color: white;
display: block;
flex-direction: column;
justify-content: center;
align-items:center;
animation: disparition 1s ease-in forwards;
animation-delay: 10s;
}
p2 {
text-align: center;
font-size: 3vw;
line-height: 110%;
padding-left:10%;
padding-right:10%;
} }

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

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
<meta name="generator" content="distribusi" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.image{max-width: 100%;}
.pdf object{width:640px;height: 640px;}
.dir::before{content:"📁 ";font-size:18px;}
.filename{display:block;font-family:mono;}
.unkown-file::before{content:"📄 ";font-size:18px;}
div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
video {width:640px;max-height:640px;}
@media screen {
@font-face {
font-family: wfdtf;
src: url(Fonts/wftfs-Regular.otf)
}
@font-face {
font-family: EBGaramond;
src: url(Fonts/EBGaramond-Italic.ttf)
}
body {
background-image: none;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: black;
margin: 5mm;
color: white;
font-family: monospace;
font-size: 10pt;
text-justify: inter-word;
columns: 3;
}
}
</style>
</head>
<body>
<div id="CURSEUR" class="png"><figure><img class="image" src="CURSEUR.png"><figcaption>CURSEUR.png</figcaption></figure></div>
<div id="HELP" class="png"><figure><img class="image" src="HELP.png"><figcaption>HELP.png</figcaption></figure></div>
<div id="PRINT" class="png"><figure><img class="image" src="PRINT.png"><figcaption>PRINT.png</figcaption></figure></div>
<div id="REFRESH" class="png"><figure><img class="image" src="REFRESH.png"><figcaption>REFRESH.png</figcaption></figure></div>
<a href="../">../</a>
</body>
</html>

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.

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.

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.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.
Loading…
Cancel
Save