-
Notifications
You must be signed in to change notification settings - Fork 3
/
experience-generative-art.html
277 lines (275 loc) · 18.8 KB
/
experience-generative-art.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
<!DOCTYPE HTML>
<html>
<head>
<title>diyActive: Experience Generative Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Step-by-step guide to build a generative art platfrom from a Raspberry Pi, Philips Hue lights, ZynAddSubFX and other MIDI instruments.">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="js/diyactive.js"></script>
</head>
<body ng-app="diyActive">
<div ng-controller="InteractionCtrl">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.reelyactive.com">
<strong>reely</strong>Active
</a>
</div>
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"
ng-click="navCollapsed = true">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/"> diyActive </a></li>
<li class="dropdown" uib-dropdown on-toggle="toggled(open)">
<a href class="dropdown-toggle" uib-dropdown-toggle role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Quick links <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu">
<li role="menuitem">
<a href="https://github.com/reelyactive/" target="_blank">
reelyActive on GitHub
</a>
</li>
<li role="menuitem">
<a href="https://www.npmjs.com/~reelyactive" target="_blank">
reelyActive on npmjs
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://www.reelyactive.com" target="_blank">
reelyActive website
</a>
</li>
<li role="menuitem">
<a href="https://getpareto.com" target="_blank">
Pareto by reelyActive
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://shop.reelyactive.com" target="_blank">
Our online store
</a>
</li>
<li role="menuitem">
<a href="https://reelyactive.com/blog/" target="_blank">
Our blog
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
<h1> Experience Generative Art <br> <small> An open platform based on Raspberry Pi, Philips Hue, ZynAddSubFX and MIDI instruments </small> </h1>
<p> In this tutorial we'll take you step-by-step through building a standalone generative art platform from a virgin Pi 3. In short, <b>the project uses ambient Bluetooth packet traffic as a generative source for audio, lighting and visual outputs.</b> This project was initiated to celebrate <a href="http://www.iotday.org/">IoT Day</a> on April 9th, 2017, at which time it looked like <a href="https://www.instagram.com/p/BSrznK3AYZv/?taken-by=reelyactive" target="_blank">this</a>. </p>
<div class="well row">
<div class="col-sm-2">
<img src="images/generable-circle-of-hope.png"
class="img-responsive center-block">
</div>
<div class="col-sm-10">
<p> "Turn a Raspberry Pi 3 into a Generative Art Installation", is presented as a workshop on July 21st, 2018 at the Circle of HOPE in NYC. </p>
<p class="text-center">
<a href="https://youtu.be/qCWKalCzOpk"
target="_blank" class="btn btn-default"> Teaser Video </a>
<a href="https://www.hope.net/workshops.html#-turn-a-raspberry-pi-3-into-a-generative-art-installation-"
target="_blank" class="btn btn-default"> Workshop </a>
</p>
</div>
</div>
<div class="well row">
<div class="col-sm-2">
<img src="images/generable-presences-peripheriques.jpg"
class="img-responsive center-block">
</div>
<div class="col-sm-10">
<p> Présences Périphériques, an art installation based on GeneraBLE, is exhibited until February 17th, 2018 at Centre Clark in Montréal. </p>
<p class="text-center">
<a href="http://centreclark.com/en/projects/presences-peripheriques"
target="_blank" class="btn btn-default"> Exhibition </a>
<a href="https://jeffyactive.github.io/presences-peripheriques/"
target="_blank" class="btn btn-default"> Project </a>
<a href="https://github.com/jeffyactive/presences-peripheriques/"
target="_blank" class="btn btn-default"> Code </a>
</p>
</div>
</div>
<h2> The GeneraBLE playlist <br>
<small> An ever-evolving project </small> </h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe width="640" height="360" src="https://www.youtube.com/embed/videoseries?list=PL11WqaPQMVvMMTtCIRK1LqKuxw51aVDtj" frameborder="0" allowfullscreen></iframe>
</div>
<h2> Hardware Prerequisites </h2>
<p> You'll need a Raspberry Pi 3, a Philips Hue kit with bridge and lightbulbs, and a <a href="http://shop.reelyactive.com/products/starterkit-min" target="_blank">reelyActive minimal starter kit</a> (or <a href="https://upverter.com/reelyActive/006d92d0aafec138/pi-reel-module/" target="_blank">pi-reel-module</a>). The following architecture diagram illustrates how the pieces connect together. <i>Original napkin sketch <a href="images/generable-architecture.jpg" target="_blank">here</a>.</i> </p>
<img src="images/generable-architecture.png"
class="img-responsive center-block">
<h2> Preparing the Pi </h2>
<p> Follow our <a href="make-a-pi-hub.html" target="_blank"> Make a Pi Hub tutorial </a> up to and including the <i>Install Node.js and forever</i> step. Note that if you install from our SD card image, many (if not all) of these steps will already have been completed for you. </p>
<h3> DHCP server on eth0 </h3>
<p> In order to directly connect the Philips Hue bridge to the Pi and provide it an IP address, the Pi must be configured as a DHCP server on eth0. From the command line, run the following: </p>
<pre>
sudo apt-get install dnsmasq
sudo mv /etc/dnsmasq.conf /etc/dnsmasq.default
</pre>
<p> This will install the <i>dnsmasq</i> software which we'll configure by editing the <i>dnsmasq.conf</i> file by running <code>sudo nano /etc/dnsmasq.conf</code> from the command line. Paste in the following lines and save: </p>
<pre>
interface=eth0
dhcp-range=10.0.50.2,10.0.50.99,255.255.255.0,12h
</pre>
<p> This will configure the Ethernet interface to serve IP addresses in the range from 10.0.50.2-99 using DHCP, with a 12-hour lease. Restart the service from the command line for changes to take effect: </p>
<pre>
sudo service dnsmasq restart
</pre>
<h3> ALSA for MIDI </h3>
<p> The <i>midi</i> package depends on ALSA. Install the prerequisite by running the following from the command line: </p>
<pre>
sudo apt-get install libasound2-dev
</pre>
<h2> Installing GeneraBLE </h2>
<p> The <a href="https://www.npmjs.com/package/generable" target="_blank">generable package for Node.js</a> bundles all the code for the generative art platform. From the command line, run the following: </p>
<pre>
mkdir ~/reelyActive/generable
cd ~/reelyActive/generable
npm install generable
</pre>
<p> It may take a minute or two to install and build the software. Once this is complete, from the command line run <code>nano generable.js</code> to create a file called <i>generable.js</i>, then paste in the following contents and save: </p>
<pre>
var generable = require('generable');
var server = new generable( { httpPort: 3000 } );
</pre>
<h2> Running GeneraBLE </h2>
<p> Run the <i>generable.js</i> file you created by entering <code>node ~/reelyActive/generable/generable.js</code> from the command line. Then point the Pi's browser to localhost:3000, or, if your PC is on the same WiFi network as the Pi, point your favourite browser to port xxx.xxx.xxx.xxx:3000 where the Xs represent the Pi's IP address. </p>
<h3> Configure the Philips Hue bridge </h3>
<p> From the GeneraBLE webpage, follow the link to Hue (/hue) which will scan for a Philips Hue bridge connected to the Pi's Ethernet interface. When a bridge appears in the list, <i>first</i> press the button on the Hue bridge, <i>then</i> click the Connect button in the webpage. GeneraBLE will store the bridge credentials and automatically reconnect each time it is run. Only if the bridge's IP address changes will you need to repeat this step. </p>
<h3> Configure the MIDI interface </h3>
<p> From the GeneraBLE webpage, follow the link to MIDI (/midi) which will scan for connected MIDI interfaces. From the list, select the desired MIDI interface: you should find ZynAddSubFX here if it is running (see below). GeneraBLE will store this interface and automatically reconnect each time it is run. Only if the connected MIDI interfaces change will you need to repeat this step. </p>
<h3> Enjoy! </h3>
<p> If a reelyActive starter kit is connected and receiving BLE packets, you should observe generative behaviour on the lights and MIDI interface. If not, try restarting <i>generable.js</i>. Have fun! </p>
<h2> Optional: ZynAddSubFX <br>
<small> For an on-board MIDI-controlled synthesizer </small> </h2>
<p> In this <i>optional</i> step, we'll install <a href="http://zynaddsubfx.sourceforge.net/" target="_blank">ZynAddSubFX</a> which is "a fully featured open source software synthesizer capable of making a countless number of instruments". By directing the GeneraBLE MIDI output to ZynAddSubFX, the Raspberry Pi becomes a powerful sound machine over its (somewhat crappy) 3.5mm audio jack. Many, many thanks to Joshua Curry (<a href="https://lucidbeaming.com" target="_blank">lucidbeaming</a>) for <a href="https://lucidbeaming.com/blog/setting-up-a-raspberry-pi-3-to-run-zynaddsubfx-in-a-headless-configuration/" target="_blank">his detailed tutorial</a> which gave us the courage to even attempt this step! </p>
<h3> Installing ZynAddSubFX </h3>
<p> First, install all the required packages using the handy script provided by lucidbeaming. From the command line, run the following: </p>
<pre>
cd ~/reelyActive/generable
wget https://raw.githubusercontent.com/lucidbeaming/pi-synths/master/ZynAddSubFX/required-packages.sh
sudo chmod 755 required-packages.sh
./required-packages.sh
</pre>
<p> If <i>jack</i> prompts for real-time permissions, select <i>Yes</i>. The installation may take a few minutes. </p>
<p> Next, download and configure ZynAddSubFX by running the following from the command line: </p>
<pre>
cd ~/reelyActive
git clone https://github.com/zynaddsubfx/zynaddsubfx.git
cd zynaddsubfx
mkdir build
cd build
cmake ..
ccmake .
</pre>
<p> In the CMake options, delete BuildOptions_SSE and change NoNeonPlease to ON, as illustrated below. </p>
<img src="images/generable-zynaddsubfx-config.png"
class="img-responsive center-block"> <br>
<p> Press 'g' to generate and exit. Now, finally install ZynAddSubFX. From the command line, run the following: </p>
<pre>
sudo make install
</pre>
<p> The installation may take tens of minutes. During this time you can open another terminal and complete the other configuration steps below <i>— just check back that the installation is complete before any reboot!</i> </p>
<h3> Tweaking the Pi for real-time audio synthesis </h3>
<p> Add the default user (pi) to the <i>audio</i> group by running the following from the command line: </p>
<pre>
sudo usermod -a -G audio pi
</pre>
<p> Next assign augmented resources (real-time priority and memory) to the <i>audio</i> group. From the command line run <code>sudo nano /etc/security/limits.d/audio.conf</code> to create/edit a file called <i>audio.conf</i>, then paste in the following contents and save: </p>
<pre>
@audio - rtprio 80
@audio - memlock unlimited
</pre>
<p> Next, set the headphone volume to something decent at startup, and provide the CPU-hungry ZynAddSubFX optimal resources by configuring all four CPUs to operate in "performance" mode. From the command line run <code>sudo nano /etc/rc.local</code> to edit the <i>rc.local</i> file, then paste in the following contents and save: </p>
<pre>
# Set the built-in headphone volume to a decent level
# (IMPORTANT: comment out or change PCM if not using built-in audio!)
amixer set PCM -- 0
# Set each CPU to optimise performance
echo "performance" > /sys/devices/system/cpu/cpu0/cpufreq/scaling_governor
echo "performance" > /sys/devices/system/cpu/cpu1/cpufreq/scaling_governor
echo "performance" > /sys/devices/system/cpu/cpu2/cpufreq/scaling_governor
echo "performance" > /sys/devices/system/cpu/cpu3/cpufreq/scaling_governor
</pre>
<p> Finally, downgrade the virtual memory to limit swap activity. From the command line, run the following: </p>
<pre>
sudo /sbin/sysctl -w vm.swappiness=10
</pre>
<h3> Running ZynAddSubFX </h3>
<p> Once ZynAddSubFX is successfully installed <i>(check first!)</i> it can be started from the command line by running the following: </p>
<pre>
zynaddsubfx -U -A=0 -o 512 -r 96000 -b 512 -I alsa -O alsa -P 7777 -L "/usr/local/share/zynaddsubfx/banks/Noises/0065-Short noise.xiz" &
</pre>
<p> The oscillator size (-o), sample rate (-r) and buffer size (-b) options are all per lucidream's recommendations. The instrument (-L), <i>Short noise</i>, is selected to work well out-of-the-box with GeneraBLE. </p>
<p> To run ZynAddSubFX on boot, from the command line run <code>sudo nano /etc/rc.local</code> to again edit the <i>rc.local</i> file, this time pasting the above command. </p>
<p> <i>IMPORTANT:</i> if you're starting GeneraBLE in the rc.local file, make sure it is <i>after</i> ZynAddSubFX, and prefix the command with a few seconds of sleep to give ZynAddSubFX time to start up first: </p>
<pre>
sleep 8; sudo forever start /home/pi/reelyActive/generable/generable.js
</pre>
<h3> Alternative Audio Setups </h3>
<p> <b> USB Audio: </b> If you're using a USB audio device in place of the (crappy) 3.5mm audio jack of the Pi, you'll need to specify this as the default ALSA audio output. The easiest method we've found is to create/modify the <i>alsa-base.conf</i> file. From the command line, run <code>sudo nano /etc/modprobe.d/alsa-base.conf</code> to create/edit the file, and paste in the following lines: </p>
<pre>
# Set the index value of the cards so that USB audio is first in the list
options snd_usb_audio index=0
options snd_bcm2835 index=1
# Reorder the cards based on the index above
options snd slots=snd_usb_audio,snd_bcm2835
</pre>
<p> You can check the order and name of your sound cards by running <code> cat /proc/asound/modules </code> from the command line. The <tt>snd_bcm2835</tt> card is the built-in audio of the Pi. <i>Reboot the Pi for changes to the conf to take effect.</i> </p>
<br>
<img src="images/generable-pi-live.jpg" class="img-responsive">
<hr>
<h2> What's next? </h2>
<p> We'll be improving this tutorial to make getting set up even easier. We'll also improve and document the <a href="https://github.com/reelyactive/generable/blob/master/lib/generator.js" target="_blank">generator.js</a> file which defines the behaviour of the platform (and was hastily prepared on IoTDay!). </p>
<p> Our starter kits include a one-month trial of our <a href="https://getpareto.com" target="_blank">Pareto platform</a> which is the easiest way to put your data to good use. Also, if you expand on this platform and would like to share your work, <a href="http://www.reelyactive.com/contact/" target="_blank">please get in touch</a>! </p>
<p class="text-center">
<a class="btn btn-default" href="make-a-pi-hub.html"
role="button"> Make a Pi Hub </a>
<a class="btn btn-default" href="https://getpareto.com"
target="_blank" role="button"> Get Pareto </a>
<a class="btn btn-success" href="/"
role="button"> Return to diyActive </a>
</p>
</div>
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
</div>
</div>
<footer class="footer">
<a href="/"
uib-tooltip="Do-it-yourself with reelyActive"
tooltip-placement="left"> diyActive </a> |
<a href="https://www.reelyactive.com"
uib-tooltip="We believe in an open Internet of Things"
tooltip-placement="right">
© reelyActive 2017-2018
</a>
</footer>
</div>
</body>
</html>