diff --git a/README.md b/archive/03/README.md similarity index 100% rename from README.md rename to archive/03/README.md diff --git a/atlas-map.svg b/archive/03/atlas-map.svg similarity index 100% rename from atlas-map.svg rename to archive/03/atlas-map.svg diff --git a/contents.js b/archive/03/contents.js similarity index 100% rename from contents.js rename to archive/03/contents.js diff --git a/fonts/fengardoneue_black-webfont.woff b/archive/03/fonts/fengardoneue_black-webfont.woff similarity index 100% rename from fonts/fengardoneue_black-webfont.woff rename to archive/03/fonts/fengardoneue_black-webfont.woff diff --git a/fonts/fengardoneue_regular-webfont.woff b/archive/03/fonts/fengardoneue_regular-webfont.woff similarity index 100% rename from fonts/fengardoneue_regular-webfont.woff rename to archive/03/fonts/fengardoneue_regular-webfont.woff diff --git a/archive/03/index.html b/archive/03/index.html new file mode 100644 index 0000000..8a06490 --- /dev/null +++ b/archive/03/index.html @@ -0,0 +1,379 @@ + + + + + + + + + + + + Emergent Opera + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
The Emergent Opera
+
10.05.2022
+
SI18#3
+
+ +
+
+
+
+ 10.05.2022
+ SI18 Weekly Release #3 +
+

Emergent Opera

+
+ What does it mean? This week we invite you to make content within a common + structure, instead of finding a structure when the contents have already + been made! An emergent opera where each property is part of a bigger whole, + that comes together in the becoming... +
+ +
+
Contribution by
+
+ Kimberley, Chae, Kamo, Supi, Emma,
+ Miri, Carmen, Alex, Gersande, Jian +
+ +
Caretakers
+
Erica, Gersande, Kamo
+
+ +
+ + +
+

Index

+
+ + +
+
+ + +
+
+ ~ + +
+

Overture Atlas

+
description
+
+ + +
+
+
+
+
+ + diff --git a/interface.css b/archive/03/interface.css similarity index 100% rename from interface.css rename to archive/03/interface.css diff --git a/print.css b/archive/03/print.css similarity index 100% rename from print.css rename to archive/03/print.css diff --git a/style.css b/archive/03/style.css similarity index 100% rename from style.css rename to archive/03/style.css diff --git a/archive/04/index.html b/archive/04/index.html new file mode 100644 index 0000000..2a3fcdd --- /dev/null +++ b/archive/04/index.html @@ -0,0 +1,42 @@ + + + + + + + The Parliament + + + + +

The Jingle Board Parliament

+
?
+
+

SI18 - Weekly Release #4

+

17—05—2022

+
+

The format of this week's release is a jingle board arranged in the layout of a parliament! Each seat is a button that plays an audio snippet when pressed. There is no linear or predefined outcome but the listener can create a unique parliament conference themselves. Therefore, the meaning of the audio contributions can be changed and recontextualised. The contributions include a range from self-made recordings, movie quotes, excerpts and re-enactments of political speeches, sound effects, audio snippets from well-known videos on the internet and covers of European anthems.

+

Our take on this idea of the parliament is rooted in the influence that elements of pop-culture have on politics, and more precisely on shaping the characters and the voices that then inhabit a parliament. While much of the politics happens outside of official institutional buildings, yet the idea of the parliament remains a pure symbol of the place in which democracy is being performed. Let's renew the voices that are usually heard in political discourses!

+
+
Contribution by:
+
Supisara Burapachaisri, Kimberley Cosmilla, Francesco Luzzana, Miriam Schöb, Mitsa Chaida-Michelakou, Ål Nik (Alexandra Nikolova), Gersande Schellinx, Jian Haake, Emma Prato, Carmen, Erica Gargaglione
+
+
Caretakers:
+
Erica Gargaglione, Miriam Schöb, Mitsa Chaida-Michelakou
+
+ +
+
+
+

+
+
+ +
name
+
+
+
+
+ + +l \ No newline at end of file diff --git a/archive/04/script.js b/archive/04/script.js new file mode 100644 index 0000000..a53506b --- /dev/null +++ b/archive/04/script.js @@ -0,0 +1,84 @@ +let source_url = "" +let partyRef = document.getElementById("partyRef") +let seatRef = document.querySelector(".seat") +let hemicycle = document.getElementsByClassName("hemicycle")[0] +let row = 5 + +let btn = document.getElementById("info-btn") +let info = document.getElementById("info") + +fetch("https://hub.xpub.nl/soupboat/the-parliament/") + .then((response) => response.json()) + .then((data) => { + source_url = data.base_url; + populateSeats(data.parliament) + }); + +function populateSeats(parliament) { + for (const group of Object.keys(parliament)){ //gets the parent's keys + let party = partyRef.cloneNode(true); + let partyName = party.querySelector("h4") + party.id = group; + + partyName.innerHTML = group; + for (representative of parliament[group]){ + let seat = seatRef.cloneNode(true); + seat.querySelector(".label").innerHTML = representative.who; + seat.id = representative.who; + let filename = source_url + group + '/' + representative.filename; + let audio = new Audio(filename) + audio.addEventListener("canplaythrough", (e) => { + console.log(filename); + let mic = seat.querySelector(".mic"); + mic.innerHTML = "Talk"; + mic.addEventListener("click", () => { + console.log(filename); + if (audio.paused) { + audio.play(); + mic.innerHTML="Pause"; + mic.style.color ="white"; + mic.style.background = "red" + } else { + audio.pause(); + mic.innerHTML="Talk" + + } + }); + audio.addEventListener("ended", () => { + audio.pause(); + audio.currentTime = 0; + mic.style.background = "white" + mic.style.color ="red"; + }); + }); + party.appendChild(seat); + } + + hemicycle.appendChild(party); + + } +} + +// info +btn.addEventListener("click", showInfo) + + +function showInfo(){ + + if (info.style.display === "none"){ + btn.innerHTML = "X"; + console.log("click"); + info.style.display = "block"; + } else { + btn.innerHTML = "?"; + info.style.display = "none"; + } +} + +/* + TODO + - upload svg + - loop through the elements to associate seat to each of them + - create label + - rotation? +*/ \ No newline at end of file diff --git a/archive/04/style.css b/archive/04/style.css new file mode 100644 index 0000000..aef8508 --- /dev/null +++ b/archive/04/style.css @@ -0,0 +1,109 @@ + +:root{ + --color1: rgb(105, 105, 255); +} + +* { + box-sizing: border-box; +} + +body, html{ + margin: 0; + padding: 0; + color: var(--color1); + font-family: sans-serif; +} +.btn{ + position: fixed; + z-index: 99; + top: 16px; + left: 16px; + font-size: 36px; + font-family: sans-serif; + text-align: center; + border: solid 2px var(--color1); + width: 48px; + height: 48px; + border-radius: 50%; + background-color: white; + padding: 2px 0; +} +.btn:hover{ + cursor: pointer; +} +.info{ + display: none; + font-size: 2.5ch; + position: fixed; + top: 0; + left: 0; + z-index: 1; + width: 50vw; + height: 100vh; + background-color: white; + border: solid 2px var(--color1); + overflow: auto; + padding-left: 16px; +} +h2{ + margin: 0; + margin-top: 96px; + font-weight: normal; +} + +dt { + font-style: italic; +} + +.hemicycle{ + display: flex; + flex-flow: column wrap; + align-content: stretch; + justify-content: right; + /* width: 100vw; */ + margin: 0 auto; +} +h1{ + font-size: 60px; + text-align: center; +} + +#partyRef, +#seatRef{ + display: none; +} +.party{ + /* border: solid 1px black; */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-start; + justify-content: center; + margin: 8px 0; +} + +h4{ + width: 160px; +} + + +.seats{ + display: flex; + flex-direction: row; + align-content: center; + margin: 4px 4px; +} + +.seat .mic{ + width: 80px; + height: 80px; + border-radius: 10%; + border: solid 3px var(--color1); + background-color: white; + color: currentColor; +} +.label{ + width: 90px; + overflow-wrap: break-word; + font-size: 1.5ch; +} diff --git a/index.html b/index.html index 8a06490..84920b0 100644 --- a/index.html +++ b/index.html @@ -1,379 +1,2133 @@ - - - - - - - - - - - Emergent Opera - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
The Emergent Opera
-
10.05.2022
-
SI18#3
-
- -
-
-
-
- 10.05.2022
- SI18 Weekly Release #3 -
-

Emergent Opera

-
- What does it mean? This week we invite you to make content within a common - structure, instead of finding a structure when the contents have already - been made! An emergent opera where each property is part of a bigger whole, - that comes together in the becoming... -
- -
-
Contribution by
-
- Kimberley, Chae, Kamo, Supi, Emma,
- Miri, Carmen, Alex, Gersande, Jian -
- -
Caretakers
-
Erica, Gersande, Kamo
-
- -
- - -
-

Index

-
- - -
-
- - -
-
- ~ - -
-

Overture Atlas

-
description
-
- - -
-
-
-
-
- + + + +Nested narratives: what is left to discuss? + + + + + + + + + + + + + + + + +
+
+

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

+
Loading…
+
+ + + diff --git a/music/five-mix.mp3 b/music/five-mix.mp3 new file mode 100644 index 0000000..4934fc6 Binary files /dev/null and b/music/five-mix.mp3 differ