XPUB
/
SI8
53
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 'a8bb35a395'
${ noResults }
SI8/Research/ciao.urca.tv/leaf_elements.js

324 lines
44 KiB
JavaScript
Raw Normal View History Unescape Escape

new standalone git repository for this Special Issue
3 years ago
var mainX = 40,
mainY = 220;
//IDEOLOGY
var theme1 = L.divIcon({ className:"themes", html:'<div><a href="javascript:void(0);" onclick="map.setView( [42, -72], 2);">IDEOLOGY</a></div>' });
var stheme1 = L.divIcon({ className:"sthemes", html:'<div style="width: 300px;">CALIFORNIAN IDEOLOGY</div>' });
var pdfIcon5 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/barbrook.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var barca = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Barbrook and Cameron</div>' });
var citgabo = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">"Not to lie about the future is impossible and <br>one can lie about it at will" - Naum Gabo</div>' });
var pdfIcon6 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/turner.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var ftu = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Fred Turner</div>' });
var countcu = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">counter-culture</div>' });
var cybcu = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">cyber-culture</div>' });
var stheme2 = L.divIcon({ className:"sthemes", html:'<div style="width: 150px;">MARXISM</div>' });
var pdfIcon1 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/marx.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var citrul = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">"The ideas of the ruling class <br> are in very epoch the ruling ideas.."</div>' });
var classes = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">classes</div>' });
var mareg = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Marx and Engels</div>' });
var pdfIcon2 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/gramsci.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var gram = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Antonio Gramsci</div>' });
var pris = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Prison Notebooks</div>' });
var subalt = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">subaltern</div>' });
var stheme3 = L.divIcon({ className:"sthemes", html:'<div style="width: 150px;">CULTURAL STUDIES</div>' });
var pdfIcon3 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/hall.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var stuha = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Stuart Hall</div>' });
var comthe = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">communication theory</div>' });
var encod = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">encoding</div>' });
var decod = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">decoding</div>' });
var tv = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">television</div>' });
var pdfIcon4 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/hebdige.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var dihe = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Dick Hebdige</div>' });
var subcu = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">subculture</div>' });
var style = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">style</div>' });
var punk = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">punk</div>' });
var stheme4 = L.divIcon({ className:"sthemes", html:'<div style="width: 150px;">MEDIA THEORY</div>' });
var pdfIcon8 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/mcluhan.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var marme = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Marshall McLuhan</div>' });
var undme = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">understanding media</div>' });
var medme = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">"the medium is the message"</div>' });
var pdfIcon9 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/durham.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var duke = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Durham and Kellnere</div>' });
var keywo = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">keywords</div>' });
var stheme5 = L.divIcon({ className:"sthemes", html:'<div style="width: 150px;">HEGEMONY</div>' });
var pdfIcon7 = L.divIcon({ className:"pdf", html:'<a href="./pdfs/mouffe.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var chant = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Chantel Mouffe</div>' });
var agon = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">agonism</div>' });
var artt = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">art</div>' })
var pspace = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">public space</div>' })
var video2 = L.divIcon({ className:"vid", html:'<iframe name="yt" src="https://www.youtube.com/embed/Pk8ibrfXvpQ" width="20" height="15"> </iframe>' });
var slav = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Zlazloj Zlizlek</div>' });
var andso = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">"and so on and so on.."</div>' });
var theyli = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">They Live</div>' });
var idX = mainX+100,
idY = mainY+100;
L.marker(new L.LatLng(idX, idY), {icon: theme1}).addTo(map);
L.marker(new L.LatLng(idX+25, idY+15), {icon: stheme1}).addTo(map);
L.marker(new L.LatLng(idX+35, idY+10), {icon: pdfIcon5}).addTo(map);
L.marker(new L.LatLng(idX+40, idY+15), {icon: barca}).addTo(map);
L.marker(new L.LatLng(idX+35, idY+30), {icon: citgabo}).addTo(map);
L.marker(new L.LatLng(idX+20, idY+35), {icon: pdfIcon6}).addTo(map);
L.marker(new L.LatLng(idX+13, idY+25), {icon: ftu}).addTo(map);
L.marker(new L.LatLng(idX+15, idY+55), {icon: countcu}).addTo(map);
L.marker(new L.LatLng(idX+10, idY+40), {icon: cybcu}).addTo(map);
L.marker(new L.LatLng(idX-4, idY+43), {icon: stheme2}).addTo(map);
L.marker(new L.LatLng(idX-15, idY+50), {icon: pdfIcon1}).addTo(map);
L.marker(new L.LatLng(idX-25, idY+60), {icon: citrul}).addTo(map);
L.marker(new L.LatLng(idX-3, idY+33), {icon: classes}).addTo(map);
L.marker(new L.LatLng(idX-12, idY+39), {icon: mareg}).addTo(map);
L.marker(new L.LatLng(idX+3, idY+60), {icon: pdfIcon2}).addTo(map);
L.marker(new L.LatLng(idX+3, idY+45), {icon: gram}).addTo(map);
L.marker(new L.LatLng(idX+8, idY+65), {icon: pris}).addTo(map);
L.marker(new L.LatLng(idX-5, idY+70), {icon: subalt}).addTo(map);
L.marker(new L.LatLng(idX-17, idY-28), {icon: stheme3}).addTo(map);
L.marker(new L.LatLng(idX-23, idY-10), {icon: pdfIcon3}).addTo(map);
L.marker(new L.LatLng(idX-33, idY-3), {icon: stuha}).addTo(map);
L.marker(new L.LatLng(idX-13, idY-10), {icon: comthe}).addTo(map);
L.marker(new L.LatLng(idX-23, idY-5), {icon: encod}).addTo(map);
L.marker(new L.LatLng(idX-30, idY-20), {icon: decod}).addTo(map);
L.marker(new L.LatLng(idX-40, idY-15), {icon: tv}).addTo(map);
L.marker(new L.LatLng(idX-19,idY-45), {icon: pdfIcon4}).addTo(map);
L.marker(new L.LatLng(idX-10,idY-53), {icon: dihe}).addTo(map);
L.marker(new L.LatLng(idX-27,idY-35), {icon: subcu}).addTo(map);
L.marker(new L.LatLng(idX-35,idY-45), {icon: style}).addTo(map);
L.marker(new L.LatLng(idX-25,idY-60), {icon: punk}).addTo(map);
L.marker(new L.LatLng(idX+10, idY-45), {icon: stheme4}).addTo(map);
L.marker(new L.LatLng(idX+25, idY-50), {icon: pdfIcon8}).addTo(map);
L.marker(new L.LatLng(idX+30, idY-60), {icon: marme}).addTo(map);
L.marker(new L.LatLng(idX+25, idY-40), {icon: undme}).addTo(map);
L.marker(new L.LatLng(idX+10, idY-75), {icon: medme}).addTo(map);
L.marker(new L.LatLng(idX, idY-30), {icon: pdfIcon9}).addTo(map);
L.marker(new L.LatLng(idX, idY-45), {icon: duke}).addTo(map);
L.marker(new L.LatLng(idX-10, idY-20), {icon: keywo}).addTo(map);
L.marker(new L.LatLng(idX-30, idY+20), {icon: stheme5}).addTo(map);
L.marker(new L.LatLng(idX-20, idY+25), {icon: pdfIcon7}).addTo(map);
L.marker(new L.LatLng(idX-15, idY+15), {icon: chant}).addTo(map);
L.marker(new L.LatLng(idX-23, idY+40), {icon: agon}).addTo(map);
L.marker(new L.LatLng(idX-40, idY+25), {icon: artt}).addTo(map);
L.marker(new L.LatLng(idX-20, idY+10), {icon: pspace}).addTo(map);
L.marker(new L.LatLng(idX+24, idY-17), {icon: video2}).addTo(map);
L.marker(new L.LatLng(idX+39, idY-20), {icon: slav}).addTo(map);
L.marker(new L.LatLng(idX+6, idY+12), {icon: andso}).addTo(map);
L.marker(new L.LatLng(idX+1, idY-17), {icon: theyli}).addTo(map);
var ontmyth = L.divIcon({ className:"themes", html:'<div style="width: 1500px">ONTOLOGY AND MYTHOLOGY</div>' });
var testo7 = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Infrastructures are one of the most hiding aspects of the architectures of <br>our society. Their hidden/hiding nature create a magical aura around them. A double <br>disappearance, from the outside and in the inside, which in part reflect the <br>debate around the 'black-box' and transforming the concept of infrastructure in <br>the unknown object hidden inside the box which is a black-box in itself. <br>Autonomy becomes the illusion made possible by a second layer (or infinite <br>layering) posed on a physical object, by the tangled complexity of a circuit or <br>network which forces us to reinvent those concepts in mythological ways. <br><br>The server we set up was just that: a black mythological object capable of <br>hiding worlds, both its physical content, a raspberry pi, and its software. <br>At the same time, with its mass of tangled cables, it is an object to hide in a <br>corner of a house. I still forget that have it there, attached to my modem, and <br>at the same time every day I connect to it through my computer.</p>"});
L.marker(new L.LatLng(idX+150, idY-80), {icon: testo7}).addTo(map);
L.marker(new L.LatLng(idX+155, idY-85), {icon: ontmyth}).addTo(map);
var countid = L.divIcon({ className:"themes", html:'<div style="width: 1500px">COUNTER-IDEOLOGY</div>' });
var testo8 = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Experiencing music is an extremely intimate act because the sense of distance, <br>typical of visual art, is collapsed in an immediate sense of embodiment. <br>Thinking about the relation between autonomy and contingency as an interplay <br>where the subject is posed in a 'liminal' zone opens a new perspective. <br>The subject, embodying the music, has the power to set their own experience <br>deciding where to put their boundaries. Subjectivity becomes the meter to <br>define freedom, against a pre-determinate thought and a 0-1 solution.<br><br>In the computer world subjectivity works in the same way embodying the whole <br>conception of the hardware-software dualism and reflecting its own condition of <br>'being a mind inside a body' in the software. The power of autonomy and <br>contingency as an interplay enhancing freedom becomes a way to re-read the <br>meaning of setting up a server and being autonomous in the web. A way to shape <br>our subjectivity in a world that reflects our inner being and gives us the <br>possibility to create a parallel place where our intimacy is projected, <br>represented and owned. </p>"});
L.marker(new L.LatLng(idX+30, idY+140), {icon: testo8}).addTo(map);
L.marker(new L.LatLng(idX+35, idY+135), {icon: countid}).addTo(map);
//MAPPING
var theme8 = L.divIcon({ className:"themes", html:'<div style="width: 800px;">MAPPING AND ABSTRACTIONS</div>' });
var mappa = L.divIcon({ html:'<iframe name="xpubmap"src="http://ciao.urca.tv/others/_proj/_SI8/map/map.html" width="20" height="15"> </iframe>' });
var mappa2 = L.divIcon({ html:'<iframe name="xpubmap" src="http://ciao.urca.tv/others/_proj/_SI8/map/mapIP.html" width="20" height="15"> </iframe>'});
var vis1 = L.divIcon({ className:"vis", html:'<img name="vis" src="./img/abstr/Abstractions_permutations-01.jpg" width="15" height="11">' });
var vis2 = L.divIcon({ className:"vis", html:'<img name="vis" src="./img/abstr/Abstractions_permutations-02.jpg" width="15" height="11">' });
var vis3 = L.divIcon({ className:"vis", html:'<img name="vis" src="./img/abstr/Abstractions_permutations-03.jpg" width="15" height="11">' });
var vis5 = L.divIcon({ className:"visb", html:'<img name="visb" src="./img/abstr/Abstractions_permutations-05.jpg" width="28" height="20">' });
var vis6 = L.divIcon({ className:"visb", html:'<img name="vis" src="./img/abstr/Abstractions_permutations-06.jpg" width="15" height="11">' });
var vis7 = L.divIcon({ className:"visb", html:'<img name="vis" src="./img/abstr/Abstractions_permutations-07.jpg" width="15" height="11">' });
var vis8 = L.divIcon({ className:"visb", html:'<img name="vis" src="./img/abstr/Abstractions_permutations-08.jpg" width="15" height="11">' });
var vis9 = L.divIcon({ className:"visb", html:'<img name="visb" src="./img/abstr/Abstractions_permutations-09.jpg" width="28" height="20">' });
var vis10 = L.divIcon({ className:"visb", html:'<img name="visb" src="./img/abstr/Abstractions_permutations-10.jpg" width="28" height="20">' });
var vis11 = L.divIcon({ className:"visb", html:'<img name="visb" src="./img/abstr/Abstractions_permutations-11.jpg" width="28" height="20">' });
var vis13 = L.divIcon({ className:"visb", html:'<img name="visb" src="./img/abstr/Abstractions_permutations-13.jpg" width="28" height="20">' });
var mapX = mainX-120,
mapY = mainY+150;
L.marker(new L.LatLng(mapX, mapY-40), {icon: theme8}).addTo(map);
L.marker(new L.LatLng(mapX+45, mapY-30), {icon: mappa}).addTo(map);
L.marker(new L.LatLng(mapX+45, mapY+10), {icon: mappa2}).addTo(map);
var visX = mapX-24,
visY = mapY-100;
L.marker(new L.LatLng(visX, visY+8), {icon: vis1}).addTo(map);
L.marker(new L.LatLng(visX-23, visY+8), {icon: vis2}).addTo(map);
L.marker(new L.LatLng(visX-46, visY+8), {icon: vis3}).addTo(map);
L.marker(new L.LatLng(visX-17, visY+33), {icon: vis5}).addTo(map);
L.marker(new L.LatLng(visX, visY+80), {icon: vis6}).addTo(map);
L.marker(new L.LatLng(visX-23, visY+80), {icon: vis7}).addTo(map);
L.marker(new L.LatLng(visX-46, visY+80), {icon: vis8}).addTo(map);
L.marker(new L.LatLng(visX-18, visY+105), {icon: vis9}).addTo(map);
L.marker(new L.LatLng(visX-2, visY+150), {icon: vis10}).addTo(map);
L.marker(new L.LatLng(visX-32, visY+150), {icon: vis11}).addTo(map);
L.marker(new L.LatLng(visX-18, visY+190), {icon: vis13}).addTo(map);
var theme9 = L.divIcon({ className:"themes", html:'<div style="width: 1500px">FROM MAPS TO ABSTRACTIONS</div>' });
var testo9 = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Experiencing music is an extremely intimate act because the sense of distance, <br>typical of visual art, is collapsed in an immediate sense of embodiment. <br>Thinking about the relation between autonomy and contingency as an interplay <br>where the subject is posed in a 'liminal' zone opens a new perspective. <br>The subject, embodying the music, has the power to set their own experience <br>deciding where to put their boundaries. Subjectivity becomes the meter to <br>define freedom, against a pre-determinate thought and a 0-1 solution.<br><br>In the computer world subjectivity works in the same way embodying the whole <br>conception of the hardware-software dualism and reflecting its own condition of <br>'being a mind inside a body' in the software. The power of autonomy and <br>contingency as an interplay enhancing freedom becomes a way to re-read the <br>meaning of setting up a server and being autonomous in the web. A way to shape <br>our subjectivity in a world that reflects our inner being and gives us the <br>possibility to create a parallel place where our intimacy is projected, <br>represented and owned. </p>"});
L.marker(new L.LatLng(visX+100, visY+300), {icon: testo9}).addTo(map);
L.marker(new L.LatLng(visX+105, visY+295), {icon: theme9}).addTo(map);
//AUTONOMY AND CONTINGENCY
var autX = mainX + 10,
autY = mainY - 510;
var theme2 = L.divIcon({ className:"themes", html:'<div style="width: 800px;">AUTONOMY AND CONTINGENCY</div>' });
var theme2_music = L.divIcon({ className:"sthemes", html:'<div style="width: 300px;">MUSIC</div>' });
var pdf_kramer = L.divIcon({ className:"pdf", html:'<a href="./pdfs/kramer.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var lawkr = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Lawrence Kramer</div>' });
var musmin = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">musical meaning</div>' });
var clas = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">classical</div>' });
var nois = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">noise</div>' });
var moder = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">modern</div>' });
var regfe = L.divIcon({ className:"subsub", html:'<div style="width: 300px;"><a href="https://noiserr.hotglue.me/regenerativefeedback/?fbclid=IwAR1-ZbEO_voMJmtR-V3GcXw9jYyzkijeeZwFmq-NR5fmKe5h4_MCxHKgYMY">noiserr + <br>regenerative feedback</a></div>' });
var shostak = L.divIcon({ className:"vid", html:'<iframe name="yt" src="https://www.youtube.com/embed/tby5aMrMu6Q" width="20" height="15"> </iframe>' });
var beth = L.divIcon({ className:"vid", html:'<iframe name="yt" src="https://www.youtube.com/embed/38DA-F1V0t8" width="20" height="15"> </iframe>' });
var noise = L.divIcon({ className:"vid", html:'<iframe name="yt" src="https://www.youtube.com/embed/AguPH0XBxdw" width="20" height="15"> </iframe>' });
var theme2_infrastr = L.divIcon({ className:"sthemes", html:'<div style="width: 300px;">INFRASTRUCTURES</div>' });
var pdf_larkin = L.divIcon({ className:"pdf", html:'<a href="./pdfs/larkin.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var brila = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Brian Larkin</div>' });
var polipoet = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">politics and poetics</div>' });
var actnet = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">actor-network theory</div>' });
var img_thek1 = L.divIcon({ className:"visb", html:'<img name="visb" src="./img/thek1.jpg" width="28" height="20">' });
var img_thek2 = L.divIcon({ className:"visb", html:'<img name="visb" src="./img/thek2.jpg" width="28" height="20">' });
var paute = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Paul Thek</div>' });
var lco = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">L-column</div>' });
var tecre = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">technological reliquaries</div>' });
var theme2_taz = L.divIcon({ className:"sthemes", html:'<div style="width: 300px;">TEMPORARY <br> AUTONOMOUS <br>ZONE</div>' });
var pdf_taz = L.divIcon({ className:"pdf", html:'<a href="./pdfs/taz.pdf"><img name="pdf" src="./pdf.png" width="10" height="15"></a>' });
var hacbe = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Hackim Bey</div>' });
var mapp = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">map</div>' });
var ster = L.divIcon({ className:"subsub", html:'<div style="width: 300px;"">"Sterling - islands in the net"</div>' });
var disap = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">disappearence</div>' });
var theme2_postaut = L.divIcon({ className:"sthemes", html:'<div style="width: 300px;">POST-AUTONOMIA</div>' });
L.marker(new L.LatLng(autX, autY), {icon: theme2}).addTo(map);
L.marker(new L.LatLng(autX+25, autY), {icon: theme2_music}).addTo(map);
L.marker(new L.LatLng(autX+15, autY-10), {icon: pdf_kramer}).addTo(map);
L.marker(new L.LatLng(autX+10, autY+5), {icon: lawkr}).addTo(map);
L.marker(new L.LatLng(autX+5, autY-20), {icon: musmin}).addTo(map);
L.marker(new L.LatLng(autX+50, autY+20), {icon: clas}).addTo(map);
L.marker(new L.LatLng(autX+20, autY-60), {icon: nois}).addTo(map);
L.marker(new L.LatLng(autX+60, autY-30), {icon: moder}).addTo(map);
L.marker(new L.LatLng(autX+10, autY-55), {icon: regfe}).addTo(map);
L.marker(new L.LatLng(autX+55, autY-40), {icon: shostak}).addTo(map);
L.marker(new L.LatLng(autX+55, autY-10), {icon: beth}).addTo(map);
L.marker(new L.LatLng(autX+30, autY-40), {icon: noise}).addTo(map);
L.marker(new L.LatLng(autX+15, autY+33), {icon: theme2_infrastr}).addTo(map);
L.marker(new L.LatLng(autX+25, autY+30), {icon: pdf_larkin}).addTo(map);
L.marker(new L.LatLng(autX+30, autY+30), {icon: brila}).addTo(map);
L.marker(new L.LatLng(autX+25, autY+40), {icon: polipoet}).addTo(map);
L.marker(new L.LatLng(autX+7, autY+36), {icon: actnet}).addTo(map);
L.marker(new L.LatLng(autX+25, autY+70), {icon: img_thek1}).addTo(map);
L.marker(new L.LatLng(autX+25, autY+110), {icon: img_thek2}).addTo(map);
L.marker(new L.LatLng(autX+25, autY+150), {icon: paute}).addTo(map);
L.marker(new L.LatLng(autX+30, autY+70), {icon: lco}).addTo(map);
L.marker(new L.LatLng(autX-5, autY+110), {icon: tecre}).addTo(map);
L.marker(new L.LatLng(autX-20, autY+10), {icon: theme2_taz}).addTo(map);
L.marker(new L.LatLng(autX-20, autY), {icon: pdf_taz}).addTo(map);
L.marker(new L.LatLng(autX-15, autY-5), {icon: hacbe}).addTo(map);
L.marker(new L.LatLng(autX-30, autY-8), {icon: mapp}).addTo(map);
L.marker(new L.LatLng(autX-40, autY+15), {icon: ster}).addTo(map);
L.marker(new L.LatLng(autX-25, autY+40), {icon: disap}).addTo(map);
L.marker(new L.LatLng(autX-10, autY-45), {icon: theme2_postaut}).addTo(map);
var theme7 = L.divIcon({ className:"themes", html:'<div style="width: 1500px">INFRASTRUCTOUR</div>' });
var testo = L.divIcon({ className:"text", html:"<p style='width: 1500px'>So, we were riding our bikes to my place, the last one of the Infrastructour. <br>Pedro and Rita couldn't self-host their servers and their house is near mine. <br>The idea was to set them up all together, connected to my router.<br><br>Once inside, it was easy to find my router; too easy. From the ground floor, <br>exactly on the left side of the entrance, one can find the ethernet plug; from <br>there I installed a long cable which runs along the side of the first flight of <br>stairs, arriving at the first floor where it enters through the door of my <br>apartment. The ethernet cable again sneaks snakily up the second flight of <br>stairs arriving on the second floor, passing the corridor and entering into the <br>main room where it finishes its two-floor journey to rest in the socket of my <br>router. We all followed this cable until its end and we started the process of <br>installing the servers. While Rita and I were using a Raspberry Pi as hardware <br>for our server, Pedro was using another machine labelled TIZEN SUNXI ALLWINNER <br>A20. He didn't have the possibility to set it up through SSH and he needed a <br>screen to connect his hardware via an HDMI cable, plus a mouse and a keyboard. <br>Fortunately, I had all he needed and we were positive on the success of these <br>last server configurations because my router was the same as Simon's, so we <br>already knew how to set it up and manage the port forwarding process. However, <br>after a while we noticed Rita's machine wasn't recognised on the home page of <br>the router (192.168.1.1), where you can check the connected devices and their <br>respective IPs. The physical router went from being a nice looking and clean <br>object, with a cable for the power and the snakey Ethernet cable, to resembling <br>a nest of connected objects with multiple lights and colors. I had a power <br>strip because I knew there was only one plug, and we needed another three to <br>supply the power to our machines. My idea was to hide that nest in a box but <br>actually it is still there. To find out what was the problem with Rita's server <br>we entered inside the tangled object with our eyes and our hands, and after we <br>checked the connections we realized two of the five plugs for Ethernet cables <br>(one was already taken by the two-storey long cable which enable the connection <br>in the web) were labeled as TV while the other two where labeled as Internet, <br>and that meant only two of the three servers could have been set.<br><br>Rita had to give up having her server hosted at my place and decided to set it <br>up at Artemis' instead. Apart from this problem related to the difference <br>between routers, the day ended well. Some went home, others continued the tour <br>in a pub with a beer, but this experience with technical problems and new <br>techie terms was the beginning of an ongoing process in discovering the <br>material and the digital aspects of a network that comprises hardware, software <br>and physical dependencies. We started to understand how difficult it is to <br>comprehend the complexity of it all. Even if the intention is to have something <br>independent, we understood that independence requires a knowledge which is both <br>technical and situated. In such circumstances one needs a teacher. There is not <br>only the knowledge of how it works, but also the practical knowledge of how <br>things work in particular circumstances. This was the starting point for my <br>thoughts on autonomy and contingency. The idea of having your autonomy on the<br> web – in our case through a server which is 'ours' – is always related to these <br>particular conditions and to the fact that you need to operate hardware and <br>software that will facilitate it... one has to balance the two different worlds <br>(autonomy vs contingency) and yet the notion of autonomy is based on both; <br>knowing terms and physical structures, protocols and how to apply them by <br>opening ports.<br><br>We can find
L.marker(new L.LatLng(mainX+80, mainY-250), {icon: testo}).addTo(map);
L.marker(new L.LatLng(mainX+85, mainY-255), {icon: theme7}).addTo(map);
var theme5 = L.divIcon({ className:"themes", html:'<div style="width: 1500px">MAGICAL INFRASTRUCTURES</div>' });
var testo3 = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Infrastructures are one of the most hiding aspects of the architectures of <br>our society. Their hidden/hiding nature create a magical aura around them. A double <br>disappearance, from the outside and in the inside, which in part reflect the <br>debate around the 'black-box' and transforming the concept of infrastructure in <br>the unknown object hidden inside the box which is a black-box in itself. <br>Autonomy becomes the illusion made possible by a second layer (or infinite <br>layering) posed on a physical object, by the tangled complexity of a circuit or <br>network which forces us to reinvent those concepts in mythological ways. <br><br>The server we set up was just that: a black mythological object capable of <br>hiding worlds, both its physical content, a raspberry pi, and its software. <br>At the same time, with its mass of tangled cables, it is an object to hide in a <br>corner of a house. I still forget that have it there, attached to my modem, and <br>at the same time every day I connect to it through my computer.</p>"});
L.marker(new L.LatLng(mainX+230, mainY-550), {icon: testo3}).addTo(map);
L.marker(new L.LatLng(mainX+235, mainY-555), {icon: theme5}).addTo(map);
var theme6 = L.divIcon({ className:"themes", html:'<div style="width: 1500px">MEANING IN MUSIC</div>' });
var testo4 = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Experiencing music is an extremely intimate act because the sense of distance, <br>typical of visual art, is collapsed in an immediate sense of embodiment. <br>Thinking about the relation between autonomy and contingency as an interplay <br>where the subject is posed in a 'liminal' zone opens a new perspective. <br>The subject, embodying the music, has the power to set their own experience <br>deciding where to put their boundaries. Subjectivity becomes the meter to <br>define freedom, against a pre-determinate thought and a 0-1 solution.<br><br>In the computer world subjectivity works in the same way embodying the whole <br>conception of the hardware-software dualism and reflecting its own condition of <br>'being a mind inside a body' in the software. The power of autonomy and <br>contingency as an interplay enhancing freedom becomes a way to re-read the <br>meaning of setting up a server and being autonomous in the web. A way to shape <br>our subjectivity in a world that reflects our inner being and gives us the <br>possibility to create a parallel place where our intimacy is projected, <br>represented and owned. </p>"});
L.marker(new L.LatLng(mainX+140, mainY-800), {icon: testo4}).addTo(map);
L.marker(new L.LatLng(mainX+145, mainY-805), {icon: theme6}).addTo(map);
// SERVER
var servX = mainX-200,
servY = mainY-400;
var serverthem = L.divIcon({ className:"themes", html:'<div style="width: 1500px">SERVER</div>' });
var boatr = L.divIcon({ className:"vid", html:'<iframe name="yt" src="https://www.youtube.com/embed/SfFMxJLYooM" width="20" height="15"> </iframe>' });
var embod = L.divIcon({ className:"vid", html:'<iframe name="yt" src="https://www.youtube.com/embed/tlcGjXje_kI" width="20" height="15"> </iframe>' });
var radnet = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">Radical Networks 2018</div>' });
var atrans = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">a transmaterial body</div>' });
var boattr = L.divIcon({ className:"subsub", html:'<div style="width: 300px;">boattr</div>' });
var techdict = L.divIcon({ className:"sthemes", html:'<div style="width: 300px;"><a href="https://pad.xpub.nl/p/newJargon">technical dictionary</a></div>' });
L.marker(new L.LatLng(servX, servY), {icon: serverthem}).addTo(map);
L.marker(new L.LatLng(servX+30, servY-40), {icon: boatr}).addTo(map);
L.marker(new L.LatLng(servX+30, servY-10), {icon: embod}).addTo(map);
L.marker(new L.LatLng(servX+40, servY), {icon: radnet}).addTo(map);
L.marker(new L.LatLng(servX, servY-45), {icon: atrans}).addTo(map);
L.marker(new L.LatLng(servX+40, servY-60), {icon: boattr}).addTo(map);
L.marker(new L.LatLng(servX-30, servY-10), {icon: techdict}).addTo(map);
var theme3 = L.divIcon({ className:"themes", html:'<div style="width: 1500px">SETTING UP A SERVER</div>' });
var testo1 = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Setting up a server is a quick and smart way to gain a certain level of <br>autonomy in the web. Quick because it gives you the possibility to own the <br>place in which your projects are hosted. Smart because it opens the doors to <br>acquire knowledges on how the web works. This DYI attitude reflects the hacker <br>mindset of being independent and autonomous questioning the role of mainstream <br>and mass-media circuits, while revealing a practical alternative. Learning <br>computer networks is not only a technical exercise but actually can be <br>considered as a political act questioning the role of internet in our society <br>and the ideologies involved in develop the computer itself. It shows how the <br>building blocks of the web and computer networks are based on physical objects <br>disrupting the idea of internet as a nowhere cloud in the air.<br><br>However setting up a server require technical skills in both hardware and <br>software's side plus a knowledge of how the web works. Without those expertise <br>it is very difficult to proceed alone. Sharing this knowledge and skills, and <br>make a community to provide it, become an essential point in building autonomy, <br>but an autonomy built on dependencies. </p>"});
L.marker(new L.LatLng(servX+50, servY-250), {icon: testo1}).addTo(map);
L.marker(new L.LatLng(servX+55, servY-255), {icon: theme3}).addTo(map);
var theme4 = L.divIcon({ className:"themes", html:'<div style="width: 1500px">SERVER/BODY/HOME</div>' });
var testo2 = L.divIcon({ className:"text", html:"<p style='width: 1500px'>When your home becomes your server, you realize that hosting people in real <br>life is the same as allowing people to enter inside your server. Open the door <br>becomes to open your HTTP ports, and rotocols are a series of allowed <br>behaviours, and of course, as the owner, you can do whatever you want in your <br>house. When someone is weaving in internet, is connecting as a client to <br>someone else’s house, but if you own a server you are both a client and a host. <br>The relation existing between you and your home allows to have a fixed place, <br>gaining an higher level of autonomy and the possibility to invite people <br>at yours.<br><br>But a server is not always an object in a fixed space and more than one person <br>needed a moving one. Who for the necessity to live on a boat, who to question <br>the relation between a person and his/her body, showing how a server can move <br>with you. Those examples are fascinating not only as they question the standard <br>fixed location of the server, but also because they are strictly related to an <br>inquiry on the meaning of home, as a moving house, and subjectivity, as an <br>embodied one.</p>"});
L.marker(new L.LatLng(servX-60, servY-60), {icon: testo2}).addTo(map);
L.marker(new L.LatLng(servX-55, servY-65), {icon: theme4}).addTo(map);
var intro = L.divIcon({ className:"themes", html:'<div style="width: 1500px">INTRODUCTION</div>' });
var textintro = L.divIcon({ className:"text", html:"<p style='width: 1500px'>The Internet is not any more the wild wide web meant to improve our lives and <br>increase democratic ideas but has become a worldwide weapon of control and <br>exploitation. Nowadays the hegemonic centralization is ruling on several layers.<br>When surfing was a free flow of motion, a matter of following rings made of links <br>and explore unknown islands, the selection of Google search based on sponsored and <br>indexed lands, replaced a shared equality with a mainstream selection of contents <br>making possible the rise of a top class web. Where web's communication was an <br>astonishing step in the cyberspace capable to connect the globe in shared-time and <br>an experience to shape through communities, Facebook and its empire of <br>communication systems is not only killing the value of the communal experience, <br>enclosing users in a prison called profile, but also stealing information to those <br>users by presenting them as second class data called metadata. Stolen data which <br>are sold and used strategically to program behaviour while being hidden to the <br>public and the academic world researches.<br>This narrative of the transformation of the web, from a place of freedom to one of <br>control, resumed in the nowadays role of centralizing corporations and the raise <br>of a metadata society, is a debate existing before internet itslef and reflecting <br>the more general issues of the computer world and the machine. This short and <br>oversimplification actually is far well wider and radiates its querying from <br>technical to philosophical aspects, from social to existential experiences, <br>without never forgetting the political view.<br><br>How can we escape from systematic control? <br><br>How can we build our ideal experience and media?<br><br>This way of thinking is intrinsic to the Experimental Publishing course at Piet <br>Zwart Institute, and the way of exploring solutions and alternatives floats from a <br>pure interest in experimentation to a more politically involved counter-reaction. <br>The hacker attitude become the way, and how computers and their software has been <br>shaped, with the struggles and fights of the early pioneers, became the lens <br>through which depict today's issues and examples of how to acquire the skills to <br>reinvent a vanishing future.<br>Actually the alternative dwells in the potential of the computer itself, a power <br>that has been hidden during building the blocks of its structure. As Ted Nelsons <br>points in all his career, the process of building technologies is a political one <br>made of fights and interests, and not a 'natural' process. What we <br>see of a computer, its hardware and software, are products of individuals which <br>developed projects based on certain ideologies. I'll talk later about ideology <br>but basically this means two things: on the one hand everyone can challenge the <br>existing structures of power because they are not the only one possible (rather <br>being usually mediated by a capitalist interest in profit and exclusion). On the other <br>hand ideally everyone, as individuals capable of critical thought, can build their <br>own world against the actual shared feeling of impossibility to react, freezing <br>thought in a constant nihilism and resumed both in Mark Fisher's life experience <br>and thought, with his book 'Capitalist Realism' (2011) and his recent suicide in <br>2017.<br>The economical interest behind the computer's world putted the inexpert user as <br>meter of judgment and means of profit imposing a well looking interface while <br>hiding and closing the potential of this media in a black box. This political <br>process of programmed disappearance has facilitate the immediate usage but raised <br>the standard computer's interface as the only way possible, banning the knowledge <br>of the code and erasing the idea of being able to develop another way.<br>What hacker mindset helps us to see, is not a mythological world fighting between <br>go
L.marker(new L.LatLng(servX+150, servY-530), {icon: textintro}).addTo(map);
L.marker(new L.LatLng(servX+155, servY-535), {icon: intro}).addTo(map);
var nuX = mainX + 80,
nuY = mainY - 650;
var emptsp = L.divIcon({ className:"themes", html:'<div style="width: 1500px">EMPTY SPACE AND NODES</div>' });
var textemptsp = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Experiencing music is an extremely intimate act because the sense of distance, <br>typical of visual art, is collapsed in an immediate sense of embodiment. <br>Thinking about the relation between autonomy and contingency as an interplay <br>where the subject is posed in a 'liminal' zone opens a new perspective. <br>The subject, embodying the music, has the power to set their own experience <br>deciding where to put their boundaries. Subjectivity becomes the meter to <br>define freedom, against a pre-determinate thought and a 0-1 solution.<br><br>In the computer world subjectivity works in the same way embodying the whole <br>conception of the hardware-software dualism and reflecting its own condition of <br>'being a mind inside a body' in the software. The power of autonomy and <br>contingency as an interplay enhancing freedom becomes a way to re-read the <br>meaning of setting up a server and being autonomous in the web. A way to shape <br>our subjectivity in a world that reflects our inner being and gives us the <br>possibility to create a parallel place where our intimacy is projected, <br>represented and owned. </p>"});
L.marker(new L.LatLng(nuX-380, nuY+480), {icon: emptsp}).addTo(map);
L.marker(new L.LatLng(nuX-385, nuY+485), {icon: textemptsp}).addTo(map);
var scalay = L.divIcon({ className:"themes", html:'<div style="width: 1500px">SCALE AND LAYERS</div>' });
var textscalay = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Experiencing music is an extremely intimate act because the sense of distance, <br>typical of visual art, is collapsed in an immediate sense of embodiment. <br>Thinking about the relation between autonomy and contingency as an interplay <br>where the subject is posed in a 'liminal' zone opens a new perspective. <br>The subject, embodying the music, has the power to set their own experience <br>deciding where to put their boundaries. Subjectivity becomes the meter to <br>define freedom, against a pre-determinate thought and a 0-1 solution.<br><br>In the computer world subjectivity works in the same way embodying the whole <br>conception of the hardware-software dualism and reflecting its own condition of <br>'being a mind inside a body' in the software. The power of autonomy and <br>contingency as an interplay enhancing freedom becomes a way to re-read the <br>meaning of setting up a server and being autonomous in the web. A way to shape <br>our subjectivity in a world that reflects our inner being and gives us the <br>possibility to create a parallel place where our intimacy is projected, <br>represented and owned. </p>"});
L.marker(new L.LatLng(nuX-350, nuY+800), {icon: scalay}).addTo(map);
L.marker(new L.LatLng(nuX-355, nuY+805), {icon: textscalay}).addTo(map);
var linkpara = L.divIcon({ className:"themes", html:'<div style="width: 1500px">LINKS AND PARANODES</div>' });
var textlinkpara = L.divIcon({ className:"text", html:"<p style='width: 1500px'>Experiencing music is an extremely intimate act because the sense of distance, <br>typical of visual art, is collapsed in an immediate sense of embodiment. <br>Thinking about the relation between autonomy and contingency as an interplay <br>where the subject is posed in a 'liminal' zone opens a new perspective. <br>The subject, embodying the music, has the power to set their own experience <br>deciding where to put their boundaries. Subjectivity becomes the meter to <br>define freedom, against a pre-determinate thought and a 0-1 solution.<br><br>In the computer world subjectivity works in the same way embodying the whole <br>conception of the hardware-software dualism and reflecting its own condition of <br>'being a mind inside a body' in the software. The power of autonomy and <br>contingency as an interplay enhancing freedom becomes a way to re-read the <br>meaning of setting up a server and being autonomous in the web. A way to shape <br>our subjectivity in a world that reflects our inner being and gives us the <br>possibility to create a parallel place where our intimacy is projected, <br>represented and owned. </p>"});
L.marker(new L.LatLng(nuX+200, nuY+350), {icon: linkpara}).addTo(map);
L.marker(new L.LatLng(nuX+195, nuY+355), {icon: textlinkpara}).addTo(map);