-
Notifications
You must be signed in to change notification settings - Fork 16
/
about.html
165 lines (127 loc) · 11.8 KB
/
about.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
<html>
<head>
<title>Jazzari - About</title>
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Voltaire" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style>
@import url("style.css");
@import url("third_party/fontello-f7426019/css/fontello.css");
@import url("third_party/fontello-f7426019/css/animation.css");
</style>
<!-- Facebook -->
<meta itemprop="name" content="JAZZARI">
<meta itemprop="description" content="A programmable band in your browser">
<meta itemprop="image" content="https://jackschaedler.github.io/jazzari/social/thumbnail.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@JackSchaedler">
<meta name="twitter:title" content="JAZZARI">
<meta name="twitter:description" content="A programmable band in your browser">
<meta name="twitter:creator" content="@JackSchaedler">
<meta name="twitter:image" content="https://jackschaedler.github.io/jazzari/social/thumbnail.png">
<!-- Open Graph -->
<meta property="og:title" content="JAZZARI">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jackschaedler.github.io/jazzari/">
<meta property="og:image" content="https://jackschaedler.github.io/jazzari/social/thumbnail.png">
<meta property="og:description" content="A programmable band in your browser">
</head>
<body onload="" style="margin: 0px; width: 100%; background-color: #1b160f">
<div style="text-align:center; background: linear-gradient(Lavender, PapayaWhip 30%, PeachPuff 50%); width: 1020px; margin-left: auto; margin-right: auto">
<div style="width: 100%; display: inline-block; text-align: center">
<div style="font-family: Voltaire; font-size: 45px; color: #222; padding-top: 45px; opacity: 0.85">
<a href="index.html" style="font-family: Bungee Shade; font-size: 55px; color:#ed5107; padding-top: 0px; opacity: 0.85; text-decoration: none">JAZZARI</a>
</div>
<div style="font-family: Voltaire; font-size: 18px; color: #777; padding-bottom: 30px">
<span style="color:#ed5107; opacity: 0.7">Certain Queries Answered</span>
</div>
<div style="width: 60%; margin-left: auto; margin-right: auto; padding-bottom: 80px; text-align: left; font-family: Voltaire; color: #b08266; font-size: 16px; font-weight: bold">
<h2> Where does the name come from? </h2>
<p>
The name is a riff on the 12<sup>th</sup> century scholar and inventor <a href="https://en.wikipedia.org/wiki/Ismail_al-Jazari">Ismail al-Jazari</a>. al-Jazari is thought to have invented one of the first programmable musical machines, a “musical automaton, which was a boat with four automatic musicians that floated on a lake to entertain guests at royal drinking parties.”
</p>
<h2> Why can I only create notes using code? Why can't I directly manipulate the notes using my mouse? </h2>
<p>
The limitation is a contrivance, born out of a desire to better understand what it feels like to design an environment for the reading and writing of computer programs. Let me try to explain.
</p>
<p>
Last year I tried to write an <a href="http://www.vpri.org/pdf/tr2009002_active_essays.pdf">active essay</a>. The active essay is a genre of literature which combines the “written essay, program fragments, and the resulting live simulations into a single cohesive narrative”. The format is designed to allow readers to perform exploratory programming, to answer “what if” questions by editing example programs as they read. Ted Kaehler wrote the first active essay in the mid-1990s using HyperCard. A recent example was written by Nicky Case, <a href="http://ncase.me/simulating/">Simulating the World in Emoji</a>.
</p>
<p>
Writing a coherent essay is hard enough. Interleaving one with programs that are approachable and editable is, for me anyway, a great challenge. After lots of disappointing attempts to author an active essay, I decided to attempt a more modest project: To create a simple browser-based experience where the main method of interaction involves reading, editing, and reusing example programs. JAZZARI is the result of that effort.
</p>
<h2> Is JAZZARI an educational tool? Are you attempting to teach programming or music theory?</h2>
<p>
Not really. While I find it conceivable that a motivated reader might be able to learn a bit about loops, variables, scales, or rhythms while using JAZZARI, I <i>don't</i> think that JAZZARI is a particularly good tool for learning about programming or music. Bret Victor has persuasively argued in <a href="http://worrydream.com/LearnableProgramming/">Learnable Programming</a>, that making conventional programming environments superficially friendlier, “adorning a JavaScript editor with badges and mascots” does little to support novice programmers. If people manage to learn a bit about quarter notes or JavaScript while using JAZZARI, it will be because they are motivated and patient, not because JAZZARI is well designed for educational purposes. There might be the slightest twinkle of a constructionist sandbox here, but even saying that is slightly disingenuous.
</p>
<p>
If you're interested in environments that have been designed specifically to teach programming, check out <a href="https://en.wikipedia.org/wiki/Logo_(programming_language)">LOGO</a> or <a href="https://scratch.mit.edu/">Scratch</a>. Sam Aaron’s <a href="http://sonic-pi.net/">Sonic Pi</a> is designed to teach programming through music composition.</a> <a href="https://earsketch.gatech.edu">Ear Sketch</a> is another.
</p>
<p>
If you're interested in interactive music tutorials, I recommend Ableton's <a href="https://learningmusic.ableton.com/">Learning Music</a>, NYU's <a href="https://musedlab.org/">musedlab</a>, and <a href="http://funklet.com/">Funklet</a>.
</p>
<h2> Can I suggest some changes to the example programs? </h2>
<p>
Yes, please do. I'm more than happy to add additional programs to the library, and/or change the existing ones.
</p>
<h2> Why JavaScript? </h2>
<p>
Early on, I spent a fair amount of time futzing around with <a href="https://pegjs.org/">PEG.js</a>, convinced that I would stumble upon a simple yet powerful domain specific language, my own little <a href="https://en.wikipedia.org/wiki/Logo_(programming_language)">LOGO</a> for music. I gave up when it occurred to me that I didn't know enough about music or programming language design to “Pull a <a href="https://en.wikipedia.org/wiki/Seymour_Papert">Papert</a>” and I was floundering like <a href="https://en.wikipedia.org/wiki/Landscape_with_the_Fall_of_Icarus">Bruegel’s Icarus</a>, making an ass of myself.
</p>
<p>
I decided that it was best to err on the side of openness and allow readers to construct their own musical representations using a generic programming language. Despite its eccentricities, Javascript is known by many, and is well supported by web-based tools. Technically, it would be very easy to use a tool like <a href="https://github.com/harc/ohm">Ohm</a> or <a href="https://pegjs.org/">PEG.js</a> to transpile from a different language into Javascript but I would need some advice on choosing or inventing a language that makes sense for this environment. Languages like <a href="https://en.wikipedia.org/wiki/Ixi_lang">ixi lang</a>, <a href="http://mimosa-pudica.net/memol/tutorial/">memol</a>, and <a href="https://tidalcycles.org/">Tidal Cycles</a> seem like great sources of inspiration.
</p>
<h2> What’s the ‘Tech’ Behind JAZZARI? </h2>
<p>
JAZZARI uses a number of free and open source software libraries. JAZZARI itself is a mush of unseemly JavaScript that shuttles data between these excellent pieces of software:
<ul>
<li><a href="https://codemirror.net/">CodeMirror</a> is used to provide the text editing workspaces</li>
<li><a href="https://tonejs.github.io/">Tone.js</a> is used to play all of the audio</li>
<li><a href="https://github.com/NeilFraser/JS-Interpreter">JS-Interpreter</a> is used to run JavaScript in a sand-boxed environment </li>
<li><a href="https://github.com/dingram/jsmidgen">Jsmidgen</a> is used to generate MIDI files </li>
<li><a href="https://lodash.com/">lodash</a> and <a href="https://github.com/jeromeetienne/microevent.js">MicroEvent</a> are used for basic code utilities</li>
<li><a href="http://fontello.com/">Fontello</a> provides the icon fonts</li>
<li>The little characters were drawn in <a href="https://inkscape.org/en/"> Inkscape</a></li>
</ul>
</p>
</div>
<div id="characters" style="display: flex; flex-direction: row; width: 100%; height: 100px">
<div style="position: relative; width: 340px">
<img src="images/defaultbody.png" width="110" height="110" style="position: absolute; bottom: 20px; left: 70px"></img>
<img src="images/drummachine.png" width="300" height="50" style="position: absolute; bottom: 0px; left: 0px"></img>
<img id="drummerHead" src="images/defaulthead.png" width="110" height="110" style="position: absolute; bottom: 20px; left: 70px"></img>
</div>
<div style="position: relative; width: 340px">
<img src="images/defaultbody.png" width="110" height="110" style="position: absolute; bottom: 10px; left: 120px"></img>
<img id="keysHead" src="images/defaultkeyshead.png" width="110" height="110" style="position: absolute; bottom: 10px; left: 120px"></img>
<img src="images/keysmachine.png" width="300" height="50" style="position: absolute; bottom: 0px; left: 20px"></img>
</div>
<div style="position: relative; width: 340px">
<img src="images/defaultbody.png" width="110" height="110" style="position: absolute; bottom: 20px; left: 140px"></img>
<img src="images/bassmachine.png" width="300" height="50" style="position: absolute; bottom: 0px; left: 20px"></img>
<img id="bassHead" src="images/defaultbasshead.png" width="110" height="110" style="position: absolute; bottom: 20px; left: 140px"></img>
</div>
</div>
<div style="width: 100%; font-family: Voltaire;">
<div style="width: 100%">
<div id="about" style="width: 100%; height:auto; background-color: #1b160f; font-family: Voltaire; font-size: 18px; line-height: 35px; color: #4f3a1f; padding-top: 30px; padding-bottom: 30px; background-color: none">
<div style="display: flex;">
<a href="index.html" class="aboutLink" style="cursor: pointer;">Back to <span>JAZZARI</span></a>
<div style="width: 100%"></div>
<a href="https://github.com/jackschaedler/jazzari">
<i style="font-size: 35px; margin: 5px; cursor: pointer" class="icon-github-circled-alt2 aboutLink"></i>
</a>
<a href="https://twitter.com/jackschaedler">
<i style="font-size: 35px; margin: 5px; cursor: pointer" class="icon-twitter aboutLink"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>