-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (134 loc) · 8.72 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
<html>
<head>
<title>Twinklr - A Modern Music Box</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.1/release/featherlight.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--
<div id="strap">
<div class='inner'>
Twinklr is on display from 9th-12th June at <a href="http://mv.works/events/">Into The Wild</a>, Somerset House, London
</div>
</div>
-->
<div id="container">
<h1><span class='inner'>Twinklr<span class='hidden'> - </span><span>A Modern Music Box</span></span></h1>
<nav>
<ul id="menu">
<li><a href="#about">About Twinklr</a></li>
<li><a href="#making">Making Twinklr</a></li>
<li><a href="#notebook">Notebook</a></li>
<li><a href="#opensource">Open Source</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#creators">Creators</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#support">Support</a></li>
<li><a href="http://github.com/twinklr">Github</a></li>
</ul>
</nav>
<section>
<a name="about" id="about"></a>
<div class='right major'>
<div class='media'><iframe src='https://player.vimeo.com/video/169159249?title=0&byline=0&portrait=0' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
<div class='left minor'>
<p>Twinklr is a modern music box: a physical, digital musical instrument. </p>
<p>Instead of punching holes in paper, players enter notes onto a touchscreen. Twinklr makes it easy to write tunes in any scale or key, changing them at will - and any mistakes can be quickly corrected with a tap or two. Melodies can be saved into one of eight slots in the device.</p>
<p>It allows the user to have multiple 'playheads' running at once, playing multiple versions of the same melody, leading to new interpretations of an existing tune.</p>
</div>
<span class='clear'> </span>
<p>Twinklr can also control any other MIDI-enabled device, opening up new ways to play existing instruments.</p>
<p>Developed in collaboration with composer and designer Richard Birkin, Twinklr is a tool for performance, improvisation and composition, built using computer-controlled manufacturing techniques - and it’s entirely open source.</p>
</section>
<section>
<a name="making" id="making"></a>
<h2>Making Twinklr</h2>
<div class='right major'>
<div class='media'><iframe src='https://player.vimeo.com/video/168676512?title=0&byline=0&portrait=0' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
<div class='left minor'>
<p>Twinklr is built using computer-controlled techniques. Its case is fabricated from laser-cut ply and acrylic, designed in CAD software. Its interface is built around a Raspberry Pi and touchscreen, and connected using a custom-built circuit board. A focus of this iteration of Twinklr has been on making it easy to make more of them: by using readily available components and on-demand fabrication, tiny-scale manufacture becomes a possibility.</p>
</div>
<span class='clear'> </span>
<p>All the hardware is open source, and licenced as as <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>: you can download the <a href="https://github.com/twinklr/cad">CAD files</a> and the <a href="https://github.com/twinklr/main_pcb">electronics schematics</a> in EAGLE format from <a href="https://github.com/twinklr">the Twinklr Github account</a>. You'll also find <a href="https://github.com/twinklr/twinklr_pde">the Processing code for the software</a> there, open-sourced under the <a href="http://www.gnu.org/licenses/gpl-3.0.en.html">GPL</a>.</p>
</section>
<section>
<a name="notebook" id="notebook"></a>
<h2>Notebook</h2>
<p>Throughout the project, <a href='http://twinklr-notebook.tumblr.com/'>I kept a notebook on Tumblr</a>. It details some of the process and work involved in the project as it happened, as well as serving as a scrapbook of things that seemed pertinent.</p>
<p><a href="http://twinklr-notebook.tumblr.com/">You can find it here.</a></p>
</section>
<section>
<a name="opensource" id="opensource"></a>
<h2>Open Source</h2>
<p>Twinklr is Open Hardware; its code is Open Source. You'll find all code and plans for hardware in <a href="https://github.com/twinklr">the Twinklr Github organisation</a> - along with even the code for this site.</p>
<p>Why Open Source? Well, why not? Twinklr is built on a foundation of open software - like <a href="https://processing.org/">Processing</a>, <a href="http://www.beadsproject.net/">the Beads framework</a>, and <a href="https://www.raspbian.org/">Raspbian</a> - and everything we've learned from building it has come from open sources. It only felt right to share alike. Sharing the knowledge involved and gained in making an object is not the same as giving it away; we continue to explore ways of building more Twinklrs in the future ourselves.
</section>
<section>
<a name="images" id="images"></a>
<h2>Images</h2>
<div class='row'>
<div class='half left'><a href="#" data-featherlight="img/twinklr-web.jpg"><img src="img/twinklr-web.jpg" /></a></div>
<div class='half right'><a href="#" data-featherlight="img/pics/twinklr-hand.jpg"><img src="img/pics/twinklr-hand.jpg" /></a></div>
</div>
<span class='clear'> </span>
<div class='row'>
<div class='half left'><a href="#" data-featherlight="img/pics/twinklr-things.jpg"><img src="img/pics/twinklr-things.jpg" /></a></div>
<div class='half right'><a href="#" data-featherlight="img/pics/twinklr-things-two.jpg"><img src="img/pics/twinklr-things-two.jpg" /></a></div>
</div>
<span class='clear'> </span>
</section>
<section>
<a name="creators" id="creators"></a>
<h2>Creators</h2>
<div class='left minimus'>
<img src="img/tom.jpg" />
</div>
<div class='right maximus'>
<h3>Tom Armitage</h3>
<p>Tom Armitage is a technologist, designer and writer based in London. He makes systems, tools, toys, and art out of hardware, software, and the network.</p>
<p>Find him on the web at <a href="http://tomarmitage.com/">tomarmitage.com</a>.</p>
</div>
<span class='clear'> </span>
<div class='left minimus'>
<img src="img/richard.jpg" />
</div>
<div class='right maximus'>
<h3>Richard Birkin</h3>
<p>Richard Birkin is a composer and creative technologist, known for combining his own modern classical music with touch-sensitive installations and experimental digital manifestations.</p>
<p>Music: <a href="http://rjbirkin.co.uk/">rjbirkin.co.uk</a><br/>Installations and experiments: <a href="http://www.timetravelopps.co.uk">timetravelopps.co.uk</a></p>
</div>
<span class='clear'> </span>
</section>
<section>
<div class='half left'>
<a name="support" id="support"></a>
<h2>Support</h2>
<p>Twinklr was built as part of the 2016 <a href="http://mv.works">MV Works</a> cohort at <a href="http://makerversity.com">Makerversity</a>.</p>
<p>An <a href="https://vimeo.com/165561401">early version</a> was supported by <a href="http://www.d-lab.org.uk/">D-Lab</a>.</p>
<p>The "multiple playheads" feature was inspired by <a href='https://alexandernaut.com/fuguemachine/'>Fugue Machine</a>.</p>
</div>
<div class='half right'>
<a name="contact" id="contact"></a>
<h2>Contact</h2>
<p>If you'd like to know more about Twinklr, are interested in your own Twinklr, would like high-res images for press purposes, or just want to say hello to the creators, <a href="mailto:[email protected]?subject=Twinklr">drop us a line</a>.</p>
</div>
<span class='clear'> </span>
</section>
<footer>
© Tom Armitage 2016.
</footer>
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.4.1/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-678083-7', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>