-
Notifications
You must be signed in to change notification settings - Fork 0
/
client.html
309 lines (274 loc) · 12.3 KB
/
client.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Code & Art</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<style>
.reveal h1,
.reveal h2,
.reveal h3,
.reveal small,
.reveal p,
.reveal blockquote {
text-shadow: 3px 3px 0px #000000;
}
</style>
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="images/raven-bird.jpg">
<h1>Code & Art</h1>
<h3>New Frontiers</h3>
<p>
<small>Curated by Raven Eyex</small>
</p>
</section>
<section data-background="images/art-history-collage.jpg">
<h2>WTH is Art anyway?</h2>
<p class="fragment">Del latín ars, y este del griego téchnē [τέχνη].</p>
<blockquote class="fragment">The principles or methods employed in making something or attaining an objective.</blockquote>
<aside class="notes">
Ars: Skill
Techne: "Craftmanship"
In terms of understanding.
</aside>
</section>
<section data-background="images/art-history-collage.jpg">
<h2>WTH is Art anyway?</h2>
<blockquote class="fragment">
Any <span class="fragment highlight-red">human</span> activity or product made with an aesthetic and/or communicative purpose
through which ideas, emotions, concepts -or in general: <span class="fragment highlight-red">worldviews</span>- are expressed
through the use of <span class="fragment highlight-red">diverse resources and means</span>
</blockquote>
<p class="fragment">Merriam-Webster / Oxford</p>
<aside class="notes">
Art as Discipline: the process/skill
Art as Activity: The drive behind the work
Art as Objects: The product
Art as Experience: Implied by above: The conveyed meaning + interpretation. The Use
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Code as the Medium</h2>
<blockquote class="fragment">
Code is used to create the Artwork but the code itself is not the artwork
</blockquote>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Video Games</h2>
<img src="images/ananias-playing.gif" width="80%" height="auto !important">
<p><small><a href="http://ananiasgame.com/">Ananias Game by Slash</a></small></p>
<aside class="notes">
Made with JS.
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Computer Animation</h2>
<img src="images/mighty-octopus-Ana-Tudor.gif">
<p><small><a href="https://codepen.io/thebabydino/full/oGPGxw/">Mighty Octopus by Ana Tudor</a></small></p>
<aside class="notes">
Pure SCSS and HAML
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Computer Animation</h2>
<img src="images/pentagramflip.gif" width="60%" height="auto !important">
<aside class="notes">
Pure CSS and SVG
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Video Mapping</h2>
<img src="images/lightson.gif">
<p><small><a href="https://devart.withgoogle.com/#/catalogued/4873111233101824?t=catalogued">Lights On</a></small></p>
<aside class="notes">
Videomapping software for projecting on surfaces
Audio processing software for converting music into color changes
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Experimental</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/kkRsTEu4O3s?rel=0" frameborder="0" allowfullscreen></iframe>
<p><small><a href="https://devart.withgoogle.com/#/catalogued/6280486116655104?t=catalogued">The Rythm of City</a></small></p>
<aside class="notes">
Given a location, a crawler searches for publicly available media content with geotags.
The ammount of geotags in a given location and time period is then translated into oscillations and fed
to the metronome
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Code as the Artwork</h2>
<blockquote class="fragment">
Code is used to create the Artwork and the code itself is a part of
</blockquote>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>The Algorithm Auction</h2>
<div class="fragment">
<blockquote>
The world’s first auction celebrating the art of code was held on March 27, 2015
at the Cooper Hewitt, Smithsonian Design Museum.
It featured several prints of historically important algorithms as well as some early designs of important chipsets.
</blockquote>
<p ><small><a href="https://www.artsy.net/feature/the-algorithm-auction">Ruse Laboratories</a></small></p>
</div>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Turtle Geometry</h2>
<img src="images/turtlegeometryhalabelson.jpg" width="60%" height="auto !important">
<p><small><a href="https://en.wikipedia.org/wiki/Hal_Abelson">Hal Albeson</a></small></p>
<aside class="notes">
MIT
Creative Commons
Free Software Foundation
Center for Democracy and Technology
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Hypothetical Beats</h2>
<img src="images/hypotheticalbeats.jpg" width="70%" height="auto !important">
<p><small><a href="https://www.artsy.net/artwork/anthony-ferraro-hypothetical-beats?auction_id=the-algorithm-auction">Anthony Ferraro</a></small>
<aside class="notes">
An algorithm that converts other algorithms into music.
does not directly translate bytes into notes.
Rather it recognizes patterns in other codes and interprets these as rhythmic sound.
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h3>var t;</h3>
<blockquote class="fragment">
Learning about art, using JavaScript.
http://vart.institute/
</blockquote>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<iframe class="stretch" src="https://vart-magritte.glitch.me/"></iframe>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<img src="images/ArtByMachine.jpg">
</section>
<section data-background="images/mappinggabriellericci.jpg">
<img src="images/putin.gif">
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Machine-Made Art</h2>
<blockquote class="fragment">
The Artwork is created by a Robot or AI;
the process is not subject to strict guidance and the aesthethic decisions
are left to the Machine.
</blockquote>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>AARON</h2>
<img width="45%" height="auto !important" src="images/AARON2.png">
<p><small><a href="http://www.aaronshome.com/aaron/aaron/index.html">Harold Cohen</a></small></p>
<aside class="notes">
Autonomous
Trained AI.
Creates original paintings.
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h3>Interactive Robot Painting Machine</h3>
<!-- <img src="images/irbm.png"> -->
<img width="45%" height="auto !important" src="images/irpm2.png">
<p><small><a href="https://bengrosser.com/">Benjamin Grosser</a></small></p>
<aside class="notes">
Makes decisions based on sound.
Can use its own sound as source.
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>The Painting Fool</h2>
<img src="images/paintingfool1.png">
<!-- <img src="images/paintingfool2.png"> -->
<p><small><a href="http://ccg.doc.gold.ac.uk/simoncolton/">Simon Colton</a></small></p>
<aside class="notes">
Given a mood, the software will find an associated adjective
and then paints a portrait that it "knows" is representative of said adjective.
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>Shelley.ai</h2>
<blockquote>
I remember his face in a look of horror, and it was agony and malice.
I was trapped. I was trapped in this hospital bed.
</blockquote>
<p><small><a href="http://shelley.ai/#team">MIT Media Lab</a></small></p>
<aside class="notes">
Neural Network trained in reddit /nosleep.
Pulls fragments to create her own short story
or, Continues the story on twitter
</aside>
</section>
<section data-background="images/mappinggabriellericci.jpg">
<h2>It does raises a few questions, doesn't it?</h2>
<aside class="notes">
Sapience: knowledge
Sentience: to feel/to perceive
Worldviews? -> Originate from perceptions
Does Sinergy ammounts to Sentience?
In relation to humans:
Inspiration vs Seed
Senses vs Sensors?
Culture vs Params/Boundaries
</aside>
</section>
<!-- <section>
<h2>Due Credit</h2>
<ul>
<li>Raven Bird: <a href="http://www.publicdomainpictures.net/view-image.php?image=139677&picture=raven-bird">source</a></li>
<li>Art History Collage by <a href="https://duquets.wordpress.com/">Samantha Duquette</a></li>
<li>Code Wallpaper: <a href="https://alpha.wallhaven.cc/wallpaper/437226">source</a></li>
<li>Ananias Game: Graphics by Juan David Camacho: <a href="http://ananiasgame.com/">source</a></li>
<li>Modeled Dinos: public domain image</li>
<li>Mighty Octopus by <a href="https://codepen.io/thebabydino/">Ana Tudor</a></li>
<li>Baphomet by <a href="https://es.wikipedia.org/wiki/H._R._Giger">>H.R. Giger</a></li>
<li>Pentagram Flip by <a href="https://codepen.io/raveneyex/">Raven Eyex</a></li>
<li>CFP Bauer Mapping by <a href="http://www.gabrielericci.com/en/works/cfp-bauer-video-mapping-3d/">Gabrielle Ricci</a></li>
<li>Lights On Mapping by <a href="https://devart.withgoogle.com/#/catalogued/4873111233101824?t=catalogued">Zach Lieberman</a></li>
<li>The Rhythm of City by <a href="https://devart.withgoogle.com/#/catalogued/6280486116655104?t=catalogued">Varvara Guljajeva & Mar Canet</a></li>
<li>Wires Wallpaper: <a href="http://www.valortop.com/img/uploads/2015/08/cool-tech-pic.jpg">source</a></li>
<li>Art Auction at Sotheby's by <a href="http://news.wolframkastl.com/">Wolfram Kastl / AP</a></li>
<li>Turtle Geometry by <a href="https://en.wikipedia.org/wiki/Hal_Abelson">Hal Albeson</a></li>
<li>Hypothetical Beats by <a href="https://www.artsy.net/artwork/anthony-ferraro-hypothetical-beats?auction_id=the-algorithm-auction">Anthony Ferraro</a></li>
<li>Pixel Babe #5 by <a href="http://jennmoney.biz/art/">Jennmoneydollars (Jenn Schiffer)</a></li>
<li>The Agony of JavaScripting Magritte by <a href="http://vart.institute">vart;</a></li>
</ul>
</section> -->
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
multiplex: {
secret: null, // Obtained from the socket.io server. Gives this (the master) control of the presentation
id: '7aa10210ba2621ba', // Obtained from socket.io server
url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
},
dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true }
]
});
</script>
</body>
</html>