You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
19 KiB
359 lines
19 KiB
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<title>Temporary Riparian Zone</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="Temporary%20Riparian%20Zone_files/style.css">
|
|
<script src="Temporary%20Riparian%20Zone_files/jquery.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
//ABOUT TEXT + INSERT TEXT
|
|
var introflag = true;
|
|
$("#about").click(function(){
|
|
if (introflag === true) {
|
|
$("#insert").css("display","block");
|
|
$("#about").css("color","#d1ffd0");
|
|
introflag = false;
|
|
} else {
|
|
$("#insert").css("display","none");
|
|
$("#about").css("color","black");
|
|
introflag = true;
|
|
}
|
|
});
|
|
$("#closeinsert").click(function(){
|
|
$("#insert").css("display","none");
|
|
$("#about").css("color","black");
|
|
introflag = true;
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
function rabbit() {
|
|
var x = document.getElementById("magic");
|
|
var y = document.getElementById("rabbit");
|
|
if (x.style.display === "none" || x.style.display === "") {
|
|
x.style.display = "block";
|
|
y.style.color = "#d1ffd0";
|
|
} else {
|
|
x.style.display = "none";
|
|
y.style.color = "black";
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="insert">
|
|
<div id="closeinsert">x</div>
|
|
<div class="insert">
|
|
<h1>Temporary Riparian Zone</h1>
|
|
|
|
<p>This is an interface by <a target="_blank" href="https://w-i-t-m.net/">Angeliki Diakrousi</a> and <a target="_blank" href="https://randomiser.info/">Cristina Cochior</a>
|
|
for exploring ways of "streaming" to each other by listening, waiting
|
|
and responding, both through text (via the collaborative editor
|
|
Etherpad), or through audio (via the streaming audio/video server
|
|
Icecast).</p>
|
|
|
|
<p>A stream is a body of water with surface water flowing within
|
|
the bed and banks of a channel. From this visual we imagined the
|
|
different ways of moving information the way a pad and icecast server
|
|
might. We used the pad you see in the top half of the screen to write
|
|
content together which we then transmitted live over a series of
|
|
broadcast channels in the live composition interface you see on the
|
|
bottom half of the screen.</p>
|
|
|
|
<p>The interface was first made for a workshop held on the 23rd of July 2020 as part of the <a target="_blank" href="https://www.hackersanddesigners.nl/s/Summer_Academy_2020">2020 Hackers and Designers summer school</a>.
|
|
The workshop happened remotely, while Angeliki was in Kefalonia,
|
|
Cristina in Rotterdam and the rest of the participants were in different
|
|
locations and timezones. You can still see, read and hear the traces
|
|
from this workshop on this site.</p>
|
|
|
|
<p>We started by listening to a pre-recorded audio file next to the word ENTER at the top of the bottom half of the page.</p>
|
|
|
|
<p>In the last 20 minutes of the workshop we performed and
|
|
listened to each other. You can listen back to some of the recordings
|
|
through this interface, they are highlighted in green.</p>
|
|
|
|
<p>You can also find the instructions we used <a target="_blank" href="http://82.199.133.204/files/trz/temporary_riparian_zone_script.html">here</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top">
|
|
<iframe id="tours" src="Temporary%20Riparian%20Zone_files/temporary%20riparian%20zone%20_%20Variapad.html" style="display: block; width: 100%; height: 100%;" frameborder="0"></iframe>
|
|
<!-- https://pad.vvvvvvaria.org/temporary_riparian_zone -->
|
|
</div>
|
|
<div class="down">
|
|
|
|
<div class="bg">
|
|
<img class="map" id="magic" src="Temporary%20Riparian%20Zone_files/World_map_of_submarine_cables.png">
|
|
<img class="pngimg" src="Temporary%20Riparian%20Zone_files/rivers.png">
|
|
</div>
|
|
|
|
<span class="enter">
|
|
ENTER
|
|
</span>
|
|
<span id="about">
|
|
ABOUT
|
|
</span>
|
|
<audio controls="controls">
|
|
<source src="Temporary%20Riparian%20Zone_files/enter_trz.mp3" type="audio/mpeg">
|
|
Your browser does not support the audio tag.
|
|
</audio>
|
|
<span onclick="rabbit()" class="rabbit" id="rabbit">A WARPED STREAM</span>
|
|
|
|
<span class="stream hydrophilic_plants">
|
|
<audio id="hydrophilic_plants" preload="none" src="Temporary%20Riparian%20Zone_files/hydrophilic_plants.html"> </audio>
|
|
<div>
|
|
<h4>hydrophilic_plants</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').pause();document.getElementById('hydrophilic_plants').src=document.getElementById('hydrophilic_plants').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream foreshoreway_networks">
|
|
<audio id="foreshoreway_networks" preload="none" src="Temporary%20Riparian%20Zone_files/foreshoreway_networks.html"> </audio>
|
|
<div>
|
|
<h4>foreshoreway_networks</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').pause();document.getElementById('foreshoreway_networks').src=document.getElementById('foreshoreway_networks').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream logging_operation">
|
|
<audio id="logging_operation" preload="none" src="Temporary%20Riparian%20Zone_files/logging_operation.html"> </audio>
|
|
<div>
|
|
<h4>logging_operation</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('logging_operation').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('logging_operation').pause();document.getElementById('logging_operation').src=document.getElementById('logging_operation').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('logging_operation').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('logging_operation').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream wake_pattern">
|
|
<audio id="wake_pattern" preload="none" src="Temporary%20Riparian%20Zone_files/wake_pattern.html"> </audio>
|
|
<div>
|
|
<h4>wake_pattern</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('wake_pattern').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('wake_pattern').pause();document.getElementById('wake_pattern').src=document.getElementById('wake_pattern').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('wake_pattern').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('wake_pattern').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream river_bank">
|
|
<audio id="river_bank" preload="none" src="Temporary%20Riparian%20Zone_files/trz-ariana.mp3"> </audio>
|
|
<div>
|
|
<h4>river_bank</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('river_bank').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('river_bank').pause();document.getElementById('river_bank').src=document.getElementById('river_bank').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('river_bank').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('river_bank').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream soil">
|
|
<audio id="soil" preload="none" src="Temporary%20Riparian%20Zone_files/trz-juliette.mp3"> </audio>
|
|
<div>
|
|
<h4>soil</h4>
|
|
<div>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('soil').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('soil').pause();document.getElementById('soil').src=document.getElementById('soil').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('soil').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('soil').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream wetland">
|
|
<audio id="wetland" preload="none" src="Temporary%20Riparian%20Zone_files/wetland.html"> </audio>
|
|
<div>
|
|
<h4>wetland</h4>
|
|
<div>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('wetland').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('wetland').pause();document.getElementById('wetland').src=document.getElementById('wetland').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('wetland').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('wetland').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream meander">
|
|
<audio id="meander" preload="none" src="Temporary%20Riparian%20Zone_files/trz_recording_maxi_backgroundambient_by_alexandermartinez.mp3"> </audio>
|
|
<div>
|
|
<h4>meander</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('meander').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('meander').pause();document.getElementById('meander').src=document.getElementById('meander').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('meander').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('meander').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream wildlife_corridors">
|
|
<audio id="wildlife_corridors" preload="none" src="Temporary%20Riparian%20Zone_files/wildlife_corridors.html"> </audio>
|
|
<div>
|
|
<h4>wildlife_corridors</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').pause();document.getElementById('wildlife_corridors').src=document.getElementById('wildlife_corridors').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream plant_litter">
|
|
<audio id="plant_litter" preload="none" src="Temporary%20Riparian%20Zone_files/p-trz_loes.mp3"> </audio>
|
|
<div>
|
|
<h4>plant_litter</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('plant_litter').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('plant_litter').pause();document.getElementById('plant_litter').src=document.getElementById('plant_litter').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('plant_litter').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('plant_litter').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream stream_buffer">
|
|
<audio id="stream_buffer" preload="none" src="Temporary%20Riparian%20Zone_files/p-trz-ben.mp3"> </audio>
|
|
<div>
|
|
<h4>stream_buffer</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('stream_buffer').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('stream_buffer').pause();document.getElementById('stream_buffer').src=document.getElementById('stream_buffer').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('stream_buffer').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('stream_buffer').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream root">
|
|
<audio id="root" preload="none" src="Temporary%20Riparian%20Zone_files/root.html"> </audio>
|
|
<div>
|
|
<h4>root</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('root').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('root').pause();document.getElementById('root').src=document.getElementById('root').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('root').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('root').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream flood_zone">
|
|
<audio id="flood_zone" preload="none" src="Temporary%20Riparian%20Zone_files/trz-angeliki.mp3"> </audio>
|
|
<div>
|
|
<h4>flood_zone</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('flood_zone').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('flood_zone').pause();document.getElementById('flood_zone').src=document.getElementById('flood_zone').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('flood_zone').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('flood_zone').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream streambed">
|
|
<audio id="streambed" preload="none" src="Temporary%20Riparian%20Zone_files/streambed.html"> </audio>
|
|
<div>
|
|
<h4>streambed</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('streambed').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('streambed').pause();document.getElementById('streambed').src=document.getElementById('streambed').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('streambed').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('streambed').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream watercourse">
|
|
<audio id="watercourse" preload="none" src="Temporary%20Riparian%20Zone_files/watercourse.html"> </audio>
|
|
<div>
|
|
<h4>watercourse</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('watercourse').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('streambed').pause();document.getElementById('watercourse').src=document.getElementById('watercourse').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('watercourse').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('watercourse').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream rock">
|
|
<audio id="rock" preload="none" src="Temporary%20Riparian%20Zone_files/rock.html"> </audio>
|
|
<div>
|
|
<h4>rock</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('rock').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('rock').pause();document.getElementById('rock').src=document.getElementById('rock').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('rock').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('rock').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream weeds">
|
|
<audio id="weeds" preload="none" src="Temporary%20Riparian%20Zone_files/weeds.html"> </audio>
|
|
<div>
|
|
<h4>weeds</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('weeds').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('weeds').pause();document.getElementById('weeds').src=document.getElementById('weeds').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('weeds').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('weeds').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream aquatic_animals">
|
|
<audio id="aquatic_animals" preload="none" src="Temporary%20Riparian%20Zone_files/aquatic_animals.html"> </audio>
|
|
<div>
|
|
<h4>aquatic_animals</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('aquatic_animals').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('aquatic_animals').pause();document.getElementById('aquatic_animals').src=document.getElementById('aquatic_animals').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('aquatic_animals').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('aquatic_animals').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="stream biofilters">
|
|
<audio id="biofilters" preload="none" src="Temporary%20Riparian%20Zone_files/trz_karl_auatic_animals_.m4a"> </audio>
|
|
<div>
|
|
<h4>biofilters</h4>
|
|
<div>
|
|
<button class="stream-button" onclick="document.getElementById('biofilters').play()">▶</button>
|
|
<button class="stream-button" onclick="document.getElementById('biofilters').pause();document.getElementById('biofilters').src=document.getElementById('biofilters').src;">❚❚</button>
|
|
<button class="stream-button" onclick="document.getElementById('biofilters').volume += 0.1"><b>+</b></button>
|
|
<button class="stream-button" onclick="document.getElementById('biofilters').volume -= 0.1"><b>-</b></button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body></html>
|