-
Notifications
You must be signed in to change notification settings - Fork 2
/
sketches.html
78 lines (72 loc) · 5.57 KB
/
sketches.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="Graham Wakefield">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/github.css" type="text/css" />
<style>
img {
max-height: 75vh;
}
td { vertical-align: top;}
header {
background-color:#f5f5f5;
font-size: 75%;
padding: 0.5em;
}
footer {
background-color:#f5f5f5;
font-size: 75%;
padding: 0.5em;
}
</style>
</head>
<body class="centremaxwidth960">
<header><a href="index.html">Foundations of Digital Media</a></header>
<h1 id="practice-session-1-interfaces-as-instruments-from-reactive-graphics-to-audio-visual-canvasses">Practice Session 1: Interfaces as instruments: From reactive graphics to audio-visual canvasses</h1>
<p>What makes the screen different from paper? What makes the mouse different from a pen?</p>
<p>Here's a classic illustration of the graphical space of the screen as <em>reactive</em>: <a href="http://www.graficaobscura.com/dyna/">Paul Haeberli's "Dynadraw"</a>. There's a web-based port of this <a href="http://www.rogerandwendy.com/roger/dynadraw/">here</a></p>
<p>Take <a href="https://en.wikipedia.org/wiki/John_Maeda">John Maeda</a>, the designer & MIT Media Lab professor, who pioneered reactive graphics in the era of the Macintosh and CD-ROM. <a href="reading/JohnMaedaDigitalDesignTheory.pdf">Read a statement here</a></p>
<p>Key insights:</p>
<ul>
<li>the most interesting pixels on the screen are the mouse</li>
<li>the mouse represents not just <em>space</em> but also <em>time</em> -- use it</li>
</ul>
<p>Maeda's courses and research in the Aesthetics & Computation group at MIT inspired a whole generation of creative coders. His <a href="https://en.wikipedia.org/wiki/Design_By_Numbers">Design By Numbers</a> software was the precursor of Processing (and thus P5.js). Maeda's courses challenged students to rethink the medium from its most basic elements. A typical assignment:</p>
<blockquote>
<p>Given a point in space over a finite rectangular area, create a parametric drawing that illustrates repetition, variety, or rhythm. <a href="https://acg.media.mit.edu/courses/mas964/presentation/panels.html">MAS 964 P</a></p>
</blockquote>
<p>One of Maeda's students -- <a href="http://www.flong.com">Golan Levin</a> -- now professor at Carnegie Mellon University, and a key figure in the Art & Code community. His <a href="http://www.flong.com/texts/publications/thesis/">Masters's thesis</a> focused specifically on the creation of audiovisual instruments, responding directly to Maeda's project. </p>
<p>For example, look at Curly and <a href="http://www.flong.com/texts/reports/report_yellowtail/">Yellowtail</a>.</p>
<p>Here's our script from this week:</p>
<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="rNevzbL" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/rNevzbL">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<hr>
<p>Scripts from last year:</p>
<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="qBWgeaZ" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/qBWgeaZ">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="VwZqazN" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/VwZqazN">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="wvwQOPm" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/wvwQOPm">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="gOYQyrd" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/gOYQyrd">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<ul>
<li><p>Making prompts: Mutate the code we built in class. </p>
<ul>
<li>See also the collection of interface-instruments at <a href="http://www.soundtoys.net">SoundToys</a> or other apps like <a href="http://nodalmusic.com">Nodal</a>, <a href="https://www.youtube.com/watch?v=63FyqOMpORI">SoundDrop</a> etc. Perhaps pick your favourite from these, and perhaps start trying to implement it, and we can take it further in class next week.</li>
</ul>
</li>
<li><p>Further reading: </p>
<ul>
<li>Papert, Seymour. "Mindstorms: Computers, children, and powerful ideas." NY: Basic Books (1980): 255.</li>
<li>Maeda, John. Design by numbers. MIT press, 2001.</li>
<li><a href="https://www.nime.org/proceedings/2005/nime2005_212.pdf">Magnusson, Thor. "ixi software: The Interface as Instrument." In Proceedings of the 2005 conference on New interfaces for musical expression, pp. 212-215. National University of Singapore, 2005.</a>. The software is also <a href="http://www.ixi-audio.net/content/software.html">described here</a>.</li>
</ul>
</li>
</ul>
<footer>DIGM5010 2021-22</footer>
</body>
<script src="js/connect.js"></script>
</html>