-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweallscreamforicecream
297 lines (245 loc) · 10.4 KB
/
weallscreamforicecream
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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html>
<head>
<title>Niels Gercama | We All Scream For Ice Cream</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="../Styles/projectPage.css"/>
<style>
#viewport-container {
background-color:white;
}
#header1 {
position: relative;
top: 70px;
height: 40px;
width: 100%;
}
#header2 {
position: relative;
top: 100px;
height: 50px;
width: 100%;
}
.folder {
position:absolute;
left:0;
top:200px;
width:92%;
left:8%;
}
.description {
position:absolute;
top:0;
left:65%;
width:22%;
}
.image {
width:60%;
}
.dclogo {
position:relative;
display: inline;
width:auto;
height:100%;
}
.selector {
position: relative;
display: inline;
width: auto;
height: auto;
left: 0;
padding-right: 5%;
font-size: 14px;
text-decoration: none;
}
.selector:hover {
text-decoration: underline;
}
hr.solid {
border-top: 1px solid lightgrey;
}
body {
margin-left:8%;
margin-right:5%;
}
.infobox {
border-radius: 25px;
background: #f3f3f3;
padding: 20px;
width:100%;
height: 150px;
}
@keyframes colorshift {
0% {background-color: darkred;}
50% {background-color: white;}
100% {background-color:darkred;}
}
</style>
</head>
<body style="background-color: #ffe6e6">
<script>
if (screen.width <= 699) {
document.location = "https://nielsgercama.com/mobile/weallscreamforicecream";
}
function folder_to(idx) {
var elements = document.getElementsByClassName("folder");
for (var i=0, max=elements.length; i < max; i++) {
elements[i].style.opacity=0;
elements[i].style.pointerEvents = 'none';
}
elements[idx].style.opacity=1;
elements[idx].style.pointerEvents = 'auto';
var elements = document.getElementsByClassName("selector");
for (var i=0, max=elements.length; i < max; i++) {
elements[i].style.opacity=0.4;
}
elements[idx].style.opacity=1;
window.scrollTo({top: 0})
}
function load_url(url) {
window.location.href = url;
}
function random_number(len) {
return Math.random().toString().substring(2,2+len);
}
function random_cur() {
const currencies = "$€£¥₣₹₫₲฿₼₴";
const idx = Math.round(Math.random()*(currencies.length-1))
return currencies.substring(idx,idx+1);
}
function random_stars(len) {
const stars = ["★","☆"];
var result = [];
for (kk = 0, kkmax=len; kk<kkmax;kk++) {
if (result.length > 0) {
if (result.slice(-1) == stars[0]) {
result.push(stars[Math.round(Math.random())]);
} else {
result.push(stars[1]);
}
} else {
result.push(stars[Math.round(Math.random())]);
}
}
return result.join(" ");
}
function randomize_text() {
var txt2change = document.getElementsByName("randominfo");
var price2change = document.getElementsByName("randomprice");
var rat2change = document.getElementsByName("randomrating");
var ll = [];
var result="";
for (var i=0, imax=txt2change.length; i < imax; i++) {
ll = txt2change[i].innerHTML.split(" ");
result="";
for (var j=0, jmax=ll.length; j < jmax; j++) {
result += Math.random().toString(36).substring(2, ll[j].length+2) + " ";
}
txt2change[i].innerHTML = "ⓘ " + result.substring(2, result.length);
}
for (var m=0, mmax=price2change.length; m < mmax; m++) {
price2change[m].innerHTML = random_cur() + random_number(2) +".<sup>" + random_number(2) + "</sup>";
}
for (var k=0, kmax=rat2change.length; k<kmax; k++) {
rat2change[k].innerHTML = random_stars(5) + " (" + random_number(3) + ")";
}
}
window.onscroll = function() {randomize_text()};
function like(element) {
if (element.innerHTML == "<b>♡</b>") {
element.innerHTML = "<b>–</b>";
} else if (element.innerHTML == "<b>–</b>"){
element.innerHTML = "<b>♡</b>";
} else {
console.log(element.innerHTML);
}
}
</script>
<div id="header2">
<p class="selector" onclick="folder_to(0)"><b>Mood</b></p>
<p class="selector" onclick="folder_to(1)"><b>CTM / Transmediale</b></p>
<p class="selector" onclick="folder_to(2)"><b>MANIFEST:IO</b></p>
<p class="selector" onclick="folder_to(3)"><b>Tech specifications</b></p>
<hr class="solid"></hr>
<p style="position:relative; display:inline; left:0; color:darkgrey;">...</p>
<p style="position:relative; display:inline; left:0; color:darkgrey;">/</p>
<a class="selector" style="font-size:12px; color:grey; padding:0;" href="https://nielsgercama.com">niels gercama</a>
<p style="position:relative; display:inline; left:0; color:darkgrey;">/</p>
<a class="selector" style="font-size:12px; color:grey; padding:0;" href="">We All Scream For Ice Cream!</a>
<p style="position:relative; display:inline; left:0; color:darkgrey;">/</p>
</div>
<div class="folder">
<div class="description">
<p style="font-size:20px; margin-bottom:0; left:100%; position:absolute; margin-top:-5px;" onclick="like(this)"><b>♡</b></p>
<p style="font-size:15px; margin-bottom:0; margin-top:0;"> <b>We All Scream For Ice Cream! (2023)</b></p>
<p style="font-size:15px; color:darkgrey; margin-top:7px;">Niels Gercama and <a href="https://www.jasonandrewclark.com/" style="color:darkgrey">Jason Clark<a></p>
<p style="font-size:15px; color:darkgrey; margin-top:7px;">Video and sound installation (iPhone, projector, laptop, steel, glass, silicone, human hair, plastic, waste paper) <br><br>Dimensions: Material ~(1x1x1 mtrs.), Projection (1.80x1.80 mtrs.)</p>
<p style="font-size:30px; margin-top:7px; margin-bottom:0px;" name="randomprice">$XX.<sup>xx</sup></p>
<p style="font-size:14px; margin-top:5px;" name="randomrating">★ ★ ★ ★ ☆ (441)</p>
<p style="font-size:12px; margin-top:5px; color:darkgrey;" name="randominfo">ⓘ Light bulb sold separately. IKEA recommends LED bulb E27 globe opal white.</p>
<div class="infobox"></div>
<div class="infobox" style="animation-name: colorshift; animation-duration: 8s; animation-iteration-count: infinite;
margin-top:10px;"></div>
</div>
<p style="font-size:25px" class="image">In Jim Jarmusch' seminal film "Down By Law" three prisoners, in a momentary lapse of reason speaking in Babylonian tongues, form a bond over repeating the phrase "I scream, you scream, we all scream for ice cream!". Ice cream, its figure in advertising and screaming children running to gather around the ice cream truck produce a sense of community, all to a recognizable dinky tune. In Taiwan, this moment is reproduced in the management of waste: rather than the indiscriminate beep-beep hidden by the morning fog, Taiwanese garbage trucks ring with beautiful simple melodies, letting people know it is time to gather and dispose of their communal waste. Meanwhile, as internet platforms wage war over dominance of the access portal, we find ourselves as prisoners stuck conversing from bubbles, doomscrolling in the prison of internet noise - down by law. <em>We all scream for ice cream!</em> explores the ice-cream model of Taiwanese waste management and the ethereal apparition of community amidst the access portal war. As an audiovisual installation, it combines found social media footage, waste and prison material to communicate the proposed narrative.
<br><br>
<em>We all scream for ice cream!</em> will be shown during the <i>CTM / Transmediale 2023 Vorspiel</i> at Mahalla Berlin and will take part in <i>MANIFEST:IO - The Symposium for New Media and Electronic Art</i> Below are a selection of images capturing an early-stage mood:
</p>
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/mood1.jpg">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. Mood 1</span>
<p></p>
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/mood2.jpg">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. Mood 2</span>
<p></p>
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/mood3.jpg">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. Mood 3</span>
<p></p>
</div>
<div class="folder">
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/CTM2023/1.png">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. CTM / Transmediale 2023</span>
<p></p>
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/CTM2023/2.png">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. CTM / Transmediale 2023</span>
<p></p>
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/CTM2023/3.png">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. CTM / Transmediale 2023</span>
<p></p>
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/CTM2023/4.png">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. CTM / Transmediale 2023</span>
<p></p>
</div>
<div class="folder">
<p class="image" style="font-size:50px">COMING SOON</p>
</div>
<div class="folder">
<p class="image" style="font-size:12px"><strong> Technical details </strong><br><br>
Video and sound installation <br>
(iPhone, projector, laptop, steel, glass, silicone, human hair, plastic, waste paper) <br><br>
</p>
<p class="image" style="font-size:12px"><strong>Dimensions</strong><br><br>
Material ~(1x1x1 mtrs.)<br>
Projection (1.80x1.80 mtrs.)<br><br>
</p>
<p class="image" style="font-size:12px"><strong>Tech rider</strong>
<br><br>
Long throw projector (HD)<br>
2 Speakers<br>
2 Speaker stands<br>
Studio light<br>
</p>
<img class="image" src="../Media/Projects/WeAllScreamForIceCream/plan.png">
<span><em><strong></strong>We all scream for ice cream!</em> [2023]. Plan</span>
</div>
<div class="bar" style="background-color:black">
<img src="../Media/Misc/logo.gif" class="logo" />
<p class="homebutton"><a href="https://nielsgercama.com" class="link">NIELS GERCAMA     |     New Media</a></p>
<p class="homebutton" style="left:86%"><a href="mailto:nielsgercama@gmail.com" class="link">CONTACT</a>     |     <a href="https://www.instagram.com/niels_gercama/?hl=nl" class="link"> @niels_gercama </a></p>
</div>
<p class="copyright">© copyright Niels Gercama</p>
<script>
folder_to(0);
window.scrollTo(0, 0);
</script>
</body>
</html>