-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
270 lines (228 loc) · 10.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<meta property="og:title" content="tYPOtOPICS" />
<meta property="og:type" content="website" />
<meta property="og:url" content="typotopics.musikinformatik.net" />
<meta property="og:site_name" content="tYPOtOPICS" />
<meta property="og:description" content="LiveCoding / 2023-07-01 / Erkratherstraße 365" />
<meta property="og:image" content="https://typotopics.musikinformatik.net/assets/teaser.png" />
<meta property="og:image:alt" content="tYPOtOPICS" />
<meta name="description" content="tYPOtOPICS / 2023-07-01 / Erkratherstraße 365" />
<title>tYPOtOPICS</title>
</head>
<body>
<div id="main">
<div class="content mono">
<h1 id="name">TypoTOpics</h1>
<dialog id="dialog" style="max-width: 800px; min-width: 60%; overflow-y: initial !important;">
<div id="wrapper" style="display: flex;">
<div id="left" style="flex: 0 0 65%;"><h2 id="dialog-name">artist name</h2></div>
<div id="right" style="flex: 1;"><span id="close-dialog" style="float: right;">close</span></div>
</div>
<span id="dialog-text"></span>
</dialog>
<div class="artists">
<ul class="artist">
<span class="time">17:00 - 19:00</span>
<li>Camila Agudelo Mejía</li>
<span class="time">17:30, 20:30</span>
<li>Sebastián Fecke Díaz<br/>   & David Hanraths</li>
<span class="time">18:00, 19:30</span>
<li>Natalia Molina Bohórquez</li>
<span class="time">18:15</span>
<li>Pamela Soria</li>
<span class="time">19:00</span>
<li key="SchMetaling">SchMetaling<br/>
   Tobias Rink<br/>
   Yasuko Yui<br/>
   Oleg Krokhalev
</li>
<span class="time">20:00</span>
<li>Dennis Scheiba</li>
<li> </li><br />
<span class="time">21:00</span>
<li>Xayíde y la reina de las legumbres</li>
<span class="time">21:30</span>
<li>Entidades polimórficas</li>
</ul>
</div>
<div class="event">
<a href="https://www.openstreetmap.org/way/124976477">
<ul class="venue">
<li>Samstag, 01.07.2023</li>
<li>17.00 bis 22.00 Uhr</li>
<li>ES365</li>
<li>Erkratherstraße 365</li>
<li>40231 Düsseldorf</li>
</ul>
</a>
</div>
</div>
<div id="container"></div>
</div>
</body>
<style>
@font-face {
font-family: "MajorMono";
src: url(./assets/MajorMonoDisplay-Regular.ttf) format("truetype");
}
/* dialog:not([open]) {
display: none;
} */
@keyframes bg {
0% {
filter: invert(0.0);
}
50% {
filter: invert(0.15);
}
55% {
filter: invert(0.85);
}
100% {
filter: invert(1.0);
}
}
html {
background-color: white;
color: black;
animation: bg;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-direction: alternate;
overflow: hidden;
}
h1 {
font-size: 10.5vw;
;
font-weight: bolder;
margin-top: 10px;
/* width: 100%; */
}
ul {
list-style-type: none;
}
.event {
position: absolute;
bottom: 0;
font-size: 2.5vh;
}
span.time {
color: aqua;
}
ul.artist {
rotate: 6deg;
color: red;
font-size: 2.5vh;
}
body {
margin: 0;
font-family: 'MajorMono', Courier, monospace;
}
.mono {
color: black;
/* mix-blend-mode: difference; */
}
.content {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#main {
max-height: 100%;
min-height: 100%;
}
a {
color: inherit;
text-decoration: inherit;
}
#dialog-name {
font-size: 4.5vh;
}
#close-dialog {
font-size: 2.5vh;
}
#dialog-text {
font-size: 2.5vh;
}
</style>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const randomSeed = Math.random();
const data = {
"Camila Agudelo Mejía": `Musik für den Innenhof
„Musik für den Innenhof“ ist eine Mehrkanalinstallation für 6 Lautsprecher und 1 Performerin, die das Ergebnis eines Beobachtungsprozess im Innenhof zeigt. Camila Agudelo Mejía erforscht in diesem Projekt die Dynamik zwischen privatem und öffentlichem Raum sowie die Verlauf der Zeit von der Perspektive eines Beobachters.
Um die Klänge und Geräusche der Nachbarschaft aus der Ferne aufzufangen, richtete Camila für mehrere Tage lang ihr Haus als Abhörzentrale ein. Die vom Innenhof gemachten Aufnahmen bilden die Partitur des Stücks, in dem jedes Ereignis vom Performerin live neu interpretiert und abstrahiert wird.
`,
"Entidades polimórficas": `Paulo Simón García und Martin Guis
Entidades polimórficas ist ein experimentelles Duo, das im Jahr 2023 im Seminar für Computermusik am Institut für Musik und Medien der Robert Schumann Musikhochschule Düsseldorf von Martin Gius und Paulo Simón gegründet worden ist. Es stellt eine Möglichkeit dar, die Signale der unmittelbaren Umgebung zu entschlüsseln, sie durch Improvisation zu verändern und sie in rhythmische Entitäten mit fließenden Bewegungen umzucodieren, die aus Live-Coding, Performance oder analoge Instrumente entstehen können und die die etablierten Beziehungen zwischen kulturellen, logischen und technologischen Strukturen in Frage stellen. Sie haben bereits Auftritte in Veranstaltungsorten wie The Pool im Rahmen der vom Toplap Düsseldorf organisierten Code-Konzerte zusammen mit dem ICLC und im WP8 im Rahmen eines Konzerts zum Thema experimenteller Anti-Folklore, das von der Künstlerverein Düsseldorf unterstützt wurde, gehabt.
`,
"Natalia Molina Bohórquez": `I'm sitting in a flute
I'm sitting in a flute ist das Soloprojekt von Natalia Molina, einer Flötistin, deren Interessen zwischen Improvisation, experimentelle Musik, Klangkunst und künstlerische Forschung schwanken.
"Klangen durch der Flöte: aus der Flöte" "Flöte als Raum" und "Feedback in der Flöte/mit der Flöte zu erzeugen": sind die Ideen, dass sie in ihrem Projekt untersucht.
`,
"Sebastián Fecke Díaz & David Hanraths": `Hy·a·la·lie: von altgriechisch hyalos, „Glas“ und griechisch laléō „ich rede“`,
"Dennis Scheiba": `Klingelton-Manie
Das Publikum kann mit seinem Smartphone ein Teil eines Netzwerkes aus Lautsprechern werden. Das Lautsprecher-Netzwerk wird über das Internet koordiniert und wird Live aus dem Raum heraus gecodet.`,
"Xayíde y la reina de las legumbres": `Lustiger ? Kichererbseneintopf
Das von Camila Agudelo und Danielle Muñoz entstande Duo forscht die Kapazitätsmatrix einiger lateinamerikanischen Rhythmen und Gewürzen, um durch improvisation neue Gerichte zu schaffen.`,
"Pamela Soria": "Theatrics: Ein kleines elektroakustisches Stück für 2 Lautsprecher und 1 Performer. Es war als Experiment konzipiert, bei dem eine Komponistin versucht, SuperCollider als Leerraum zu nutzen, um den Klang entsprechend dem Publikum und dem Raum zu verlängern.",
"SchMetaling": `Das Projekt SchMetaling ist ein "Ökosystem", das auf dem Prinzip des Schmetterlingseffekts beruht. Es wurde von Edward Lorenz entdeckt und zeigt ein System, das auf Kausalität basiert. Jede kleine Entscheidung kann zu einer dramatischen Veränderung des Systems führen, die von jedem Zuhörer anders aufgenommen und verarbeitet wird. Der erzeugte Klang durchläuft mehrere Filter, digitale und akustische Effekte, welche ihn formen. Alle drei Interpreten sind bei der Erzeugung eines gemeinsamen Klangs miteinander verbunden.`,
}
Array.from(document.querySelectorAll('.artist li')).forEach((x) => {
const artistName = x.textContent;
const artistLookup = x.getAttribute("key") ?? artistName;
x.addEventListener("click", () => {
console.log(artistLookup);
document.getElementById("dialog-name").textContent = artistName;
document.getElementById("dialog-text").textContent = data[artistLookup] ?? "no info" ;
document.getElementById("dialog").showModal();
});
});
// document.getElementById("show-modal-dialog").addEventListener("click", () => {
// document.getElementById("dialog").showModal();
// });
document.getElementById("close-dialog").addEventListener("click", () => {
document.getElementById("dialog").close();
});
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, 200, 400])
// .style("max-width", "00px");
const g = svg.append("g").attr("transform", "translate(100,250)");
const changeText = (text) => {
return text.toLowerCase().split('').map(function (c) {
return Math.random() < .5 ? c : c.toUpperCase();
}).join('');
}
const draw = () => {
if (Math.random() < 0.1) {
const newText = changeText("TypoTOpics");
document.getElementById("name").textContent = newText;
document.title = newText;
};
const spiral = Array.from({ length: 35 }, (_, i) => [
((Math.PI / 3) * i) * (Date.now() / 100000), // angle (in radians)
(2 * i % 10) * i * 2 // radius
]);
const spiralData = d3.lineRadial()(spiral);
d3.selectAll("g > path").remove();
svg.select("g").append("path")
.attr("class", "radial")
.attr("d", spiralData)
.attr("stroke", "black")
.attr("fill", "none");
};
container.append(svg.node());
setInterval(function () {
draw(); // call the function you created to update the chart
}, 1000 / 60);
</script>