2 changed files with 1113 additions and 0 deletions
@ -0,0 +1,359 @@ |
|||||
|
<!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> |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue