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.

210 lines
8.4 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<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="p5.collide2d.js"></script>
<script type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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>
<div>
<img src="INTRO.gif" alt="" id="GIF"/></div>
<a href="#colophon" id="colophonX"><button>?</button></a>
<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="GARDE1" src="sounds/spinoza_01.mp3"></audio>
<audio controls loop id="GARDE2" 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>
<div id="openModal" class="modalDialog">
<div><a href="#colophonX" id="colophon"><button>Back to top</button></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 a symbol.
<br><br>
<br><br>
</p2>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#colophon").click(function(){
$('.modalDialog').fadeIn(600);})
$("#colophonX").click(function(){
$('.modalDialog').fadeIn(600);})
});
//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>