-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
329 lines (263 loc) · 14.5 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
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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="https://use.typekit.net/ybl3yyx.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>Meesterproef eindopdracht</title>
</head>
<body id="home-pagina">
<header>
<nav>
<ul>
<li><img src="./images/de-correspondent-logo.png" alt="Logo van de correspondent"></li>
<li><a id="current" href="./index.html">Home</a></li>
<li><a href="./tweede-pagina.html">AI Generator</a></li>
<li><a href="./visie.html">Visie</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- De inleiding -->
<article>
<h1>Kunstmatige intelligentie is geen gevaar voor de kunstenaars; integendeel</h1>
<p>Robots, machines en kunstmatige intelligentie komen onze banen halen. Tenminste, deze angst
vlaagt
eens in de zoveel tijd in steeds een andere beroepsgroep op. Deze week was het de beurt aan
beeldende kunstenaars, dankzij de creatieve kracht van AI-beeldgenerators.
</p>
<a href="./tweede-pagina.html"> Probeer zelf de AI beeldgenerator</a>
</article>
<img src="./images/kunst-win.svg" alt="">
<img src="./images/pijl.svg" alt="pijl" class="swipe">
</section>
<section>
<!-- Illustraties van kunst is dood -->
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<article>
<p>
<span>Kunst is dood, dude,’</span> zei AI-Generated Art Won a Prize. Artists Aren’t Happy’, The
New York Timesde winnaar van een
kunstprijs onlangs tegen The New York Times. Jason Allen had gewonnen in de categorie ‘emerging
digital artists’ met een werk gemaakt met Midjourney, een AI-systeem waarin je simpelweg een
aantal woorden invoert, en dat vervolgens een unieke, artistieke afbeelding genereert.
</p>
<h2>Als machines nu ook al werkelijk creatief zijn wat heeft de mens dan nog op ze voor? </h2>
</article>
<img data-aos="slide-left" src="./images/kunst-is-dood.svg" alt="">
</section>
<section>
<article>
<h1>Hoeft niet zo te zijn, je kan AI gebruiken als een kunstmedium</h1>
<p> Op de redactie van de Correspondent<span> wekte DALL-E deze week een onstelpbaar
enthousiasme</span>. Nadat een collega <span>met de invoer</span> ‘renaissance-schilderij
van een teleurgestelde
garnaal
met een pruik’ een behoorlijk meesterwerk aan het algoritme ontlokte, brak de beeldenstorm los.
<span>
De resultaten variëren van ‘verbluffend’ en ‘dit wil ik boven mijn bank’, via ‘mooi
van
lelijkheid’ tot ‘oei’ en ‘verontrustend’ (DALL-E verdraait hoofden en handen van mensen soms
op
een
griezelige manier). Net echte kunst dus. Al heeft bijna alles wat je uit DALL-E tovert een
zekere
visuele herkenbaarheid; <span> het algoritme stelt je unieke kunstwerk immers samen uit de
honderden
miljoenen bestaande beelden die het eerder heeft verwerkt</span>. Wat domineert in de
beeldcultuur,
domineert in DALL-E.
</span>
</p>
</article>
<figure id="shrimp-animation"></figure>
<p data-aos="fade" data-aos-delay=" 1000">Renaissance schilderij van een teleurgestelde garnaal met een
pruik|</p>
</section>
<section>
<article>
<h1>Verlamd door mogelijkheden</h1>
<p>Spelen met DALL-E levert een gevoel op dat me doet denken aan de eerste keer dat ik een online
zoekmachine gebruikte of toen ik voor het eerst The Sims speelde. Eerst: die belofte van
eindeloze
mogelijkheden... En dan: de hopeloze beperkingen van de fantasie – als je eenmaal in de
categorie
schaaldieren en schilderkunst ben vervallen, kost het kracht om de verbeelding weer op een ander
spoor te trekken.
<span>
De meeste mensen verschillen nu eenmaal van computers; eindeloze mogelijkheden werken
verlammend. Toch ontkom je aanvankelijk nauwelijks aan de indruk dat deze uitvinding álles
gaat
veranderen.
Dat gevoel is het mediahaakje bij uitstek om over kunstmatige intelligentie te schrijven:
‘Gaat AI
[vul
hier een beroep in] nu echt vervangen?’ Met DALL-E is de kunstenaar aan de beurt. En zoals
altijd
zijn er degenen die de apocalyptische consequenties van de nieuwe technologie vrezen en
degenen
die
dat relativeren.
</span>
De uitspraak van de prijswinnende kunstenaar dat kunst nu echt dood is, werd met alarmisme
beantwoord door kunstenaars die vreesden voor hun baan. Sommigen van hen eisten dat hun werk
niet
zou worden gebruikt om het algoritme te trainen.</p>
</article>
<img src="./images/locked-down.svg" alt="Karakter is opgesloten ">
</section>
<!-- Tijldijn -->
<section>
<div id="set-height"></div>
<p id="time"></p>
<video id="v0" tabindex="0" autobuffer preload loop autoplay muted>
<source type="video/mp4" src="./animaties/hele-video-v2.mp4">
</source>
</video>
</section>
<section>
<article>
<h1 data-aos="slide-right">Altijd samenwerking tussen AI en Mens</h1>
<p>
In een uitgebreid stuk
‘What AI-Generated Art Really Means for Human Creativity’, Wiredin Wired legt journalist Kevin
Kelly
uit dat de creatieve producten die deze AI’s voortbrengen altijd een samenwerking zullen zijn
tussen mens en machine.<span> De beste beelden zijn bijna altijd het resultaat van een lange
dialoog
tussen
de AI en degene die de tekst invoert. </span>
<span>
In dat opzicht betekent deze AI eerder een nieuw medium voor kunstenaars ( velen
Meer daarover bij The Guardian.van hen zijn er al mee aan de slag) dan een bedreiging van
hun
bestaansrecht. Het vergt een grote en getrainde creativiteit, die van een mens, om met
applicaties
als DALL-E echt iets moois of interessants te maken.
</span>
</p>
</article>
<figure id="samenwerking-animatie"></figure>
<!-- <img src="./images/working-together.svg" alt=""> -->
</section>
<section>
<h1 data-aos="fade-right"><span>Jason Allen</span>, de winnaar van de kunstprijs, wilde
zijn<span> invoer </span>dan ook niet prijsgeven; het is een <span>geheim recept</span>. Een soort
poëzie, noemde een andere
maker het zelfs.</h1>
<!-- <img src="./images/shushing.svg" alt=""> -->
<figure id="shush-animation"></figure>
</section>
<section>
<p data-aos="slide-right">De kunst van omgaan met DALL-E is om je invoer, door eindeloos proberen, zo te
verfijnen dat het
algoritme je als het ware gecontroleerd verrast.
</p>
<figure id="massproduction-animatie"></figure>
<!-- <img src="./images/massproduce-artwork.svg" alt=""> -->
</section>
<section>
<h1>Mijn eigen AI kunstwerken</h1>
<article>
<figure class="container">
<img src="./images/dancing-with-salad.png" alt="">
<div class="overlay">
<figcaption class="text">“A woman dancing in the rain with a bowl of salad, digital art”
</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/flower-vase.png" alt="">
<div class="overlay">
<figcaption class="text">“An oil painting of flower in a vase”</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/sushi-head-with-fork.png" alt="">
<div class="overlay">
<figcaption class="text">“An sushi head holding a fork standing on a bed, neoclassism
painting”</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/ice-queen.png" alt="">
<div class="overlay">
<figcaption class="text">“A neoclassism painting of an ice queen sitting on her throne with
alot of pillars ”</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/isometric-room.png" alt="">
<div class="overlay">
<figcaption class="text">“a pixel art of a isometric room with a gaming station”
</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/old-city.png" alt="">
<div class="overlay">
<figcaption class="text">“A neoclassicism oil painting of a city”</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/black-woman.png" alt="">
<div class="overlay">
<figcaption class="text">“An black Caribbean woman being crowned as queen in the 18th
centuries, realism painting”</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/black-woman-2.png" alt="">
<div class="overlay">
<figcaption class="text">“An black Caribbean woman being crowned as queen in the 18th
centuries, digital art”</figcaption>
</div>
</figure>
<figure class="container">
<img src="./images/flying-woman.png" alt="">
<div class="overlay">
<figcaption class="text">“A woman with a super hero costume flying through the sky, pop
art.”</figcaption>
</div>
</figure>
</article>
<div class=" boxes boxes-one"></div>
<div class="boxes boxes-two"></div>
<div class="boxes boxes-three"></div>
<div class="boxes boxes-four"></div>
<div class="boxes boxes-five"></div>
</section>
<section>
<article>
<h1>Ga jij AI gebruiken als een nieuwe kunstmedium?</h1>
<a
target="_blank" href="https://decorrespondent.nl/14006/kunstmatige-intelligentie-is-geen-gevaar-voor-de-kunstenaar-integendeel/43693678246174-9c1c01e6">Lees het Correspondent artikel</a>
</article>
<figure id="waving-animation"></figure>
</section>
</main>
<!-- lottie player -->
<script src="./scripts/lottie.js"></script>
<!-- Animaties -->
<script src="./scripts/shrimp-animation.js"></script>
<script src="./scripts/samenwerking-animatie.js"></script>
<script src="./scripts/stil-blijven-animatie.js"></script>
<script src="./scripts/massproduction-animatie.js"></script>
<script src="./scripts/waving-animation.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 2000
});
</script>
<script src="./scripts/script.js"></script>
</body>
</html>