<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ollie Glass</title>
	<atom:link href="http://ollieglass.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://ollieglass.com</link>
	<description></description>
	<lastBuildDate>Mon, 30 Apr 2012 22:01:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Breakage &#8211; a machine learning drum machine</title>
		<link>http://ollieglass.com/2012/04/23/breakage-a-machine-learning-drum-machine/</link>
		<comments>http://ollieglass.com/2012/04/23/breakage-a-machine-learning-drum-machine/#comments</comments>
		<pubDate>Mon, 23 Apr 2012 18:17:45 +0000</pubDate>
		<dc:creator>Ollie</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Breakage]]></category>
		<category><![CDATA[machine learning]]></category>
		<category><![CDATA[music]]></category>
		<category><![CDATA[neural networks]]></category>

		<guid isPermaLink="false">http://ollieglass.com/?p=136</guid>
		<description><![CDATA[Neural networks and drum machines Neural networks are a remarkably versatile machine learning technology which can find patterns in just about anything. In a nutshell, you train a neural net by showing it a set of input and output pairs, and it works out how the outputs relate to the inputs. Then you can show [...]]]></description>
			<content:encoded><![CDATA[<h2>Neural networks and drum machines</h2>
<p>Neural networks are a remarkably versatile machine learning technology which can find patterns in just about anything. In a nutshell, you train a neural net by showing it a set of input and output pairs, and it works out how the outputs relate to the inputs. Then you can show it a new input it&#8217;s not seen before and it will produce an output for it. There&#8217;s all sorts of complexities and caveats in practice, but the central idea is that you give it data to train on, it finds patterns in it, then it can create new outputs from fresh input by itself &#8211; it&#8217;s a supervised machine learning technology.</p>
<p><img src="http://dl.dropbox.com/u/19419/blog/images/net.gif" alt="Neural net" /></p>
<p>Around the time I learned about these things I was playing with Propellerhead Software&#8217;s <a href="http://www.vintagesynth.com/misc/rb338.php">ReBirth</a>, a software music studio which simulates two 303s synthesisers, and the 808 and 909 drum machine. Each of these instruments has a row of sixteen buttons, one for each note in a pattern. All four instruments play in sync, and every control in ReBirth can be edited live. It looks good, sounds great, has a very intuitive UX and is a delight to perform with.</p>
<p><span style="text-align:center; display: block;"><a href="http://ollieglass.com/2012/04/23/breakage-a-machine-learning-drum-machine/"><img src="http://img.youtube.com/vi/yP7jTfn_ZgQ/2.jpg" alt="" /></a></span></p>
<p>I got to wondering what would happen if ReBirth could learn how you used it, detecting patterns in your performances. If it could spot a correlation between how you used the instruments, treating them as inputs and outputs, then it could learn to drop the bass when you triggered a kick drum. I wondered how feasible this was, and what it would be like to perform with. Would it feel like having an extra pair of hands, or would the machine seem to have a mind of its own, familiar to yours but different in some way?</p>
<p>I also wanted to test out what I&#8217;d learned about neural networks in theory by building and using one in practice, so I went and made a drum machine with a neural network inside it. I called it Breakage.</p>
<h2>Breakage</h2>
<p><a href="http://dl.dropbox.com/u/19419/blog/images/breakage.png"><img src="http://dl.dropbox.com/u/19419/blog/images/breakage-small.png" alt="Breakage" /></a></p>
<p>Breakage is a four channel drum machine, usually set to play kick, snare, open and closed hi-hat samples on each channel. If you&#8217;ve not used software like this before, the grid of circles in the middle is called a step-sequencer. This is where you write drum patterns by turning hits on or off at each time step in each channel.</p>
<p>To train the neural network in Breakage, you&#8217;d write a collection of patterns, tell the net which ones to use as inputs and outputs, then set it to train. By default the kick and snare are inputs, open and closed hats are outputs. After training you can switch the net into performance mode. When performing, it will create new hi hat parts as you change the kick and snare hits.</p>
<p>Here&#8217;s an example. In this pattern, there are drum hits set in the kick, snare channels and closed hi-hat channels:<br />
<img src="http://dl.dropbox.com/u/19419/blog/images/breakage/1.png" alt="Pattern 1" /></p>
<p>This pattern has an extra kick drum hit in the fourteenth step, and hits on every other step in the closed hat channel:<br />
<img src="http://dl.dropbox.com/u/19419/blog/images/breakage/2.png" alt="Pattern 2" /></p>
<p>This one has another hit in the eighth kick step, and hits on every closed hat step:<br />
<img src="http://dl.dropbox.com/u/19419/blog/images/breakage/3.png" alt="Pattern 3" /></p>
<p>The kick and snare channels are inputs for the neural net, and the closed hats are outputs. After training with these three patterns, it learns the correlations between them. If we change the kick hits in performance mode, it produces this hi-hat pattern:<br />
<img src="http://dl.dropbox.com/u/19419/blog/images/breakage/4.png" alt="Net outpus" /></p>
<p>This happens in real-time, so you can edit the inputs and get new output parts in a live performance.</p>
<p>The darker shades of red in the output hats are hits at lower volumes. When developing Breakage I learned that having the net just turn hits on or off gave a jumpy response. It was hard to predict which hits would appear or disappear when changing and input, and the transitions were too abrupt. I changed the net to give a continuous output, so each of the input hits can be set to a value between 0 (silent) and 255 (maximum volume), and the outputs also have this range. This lets you slowly increase the volume on a hit and have the outputs gradually change, which I found much more enjoyable to perform with.</p>
<p>Written around 2006, Breakage is built in Java with a Swing GUI. I used <a href="http://chuck.cs.princeton.edu/">ChucK</a> underneath as a sound library, a language for real-time music composition and performance. Java was never so great with sound. Or GUIs&#8230; but anyway, it worked, and I had some fun with it. It had its own website for a while with a forum and a space to share your patterns and nets, but I&#8217;ve taken the site down. It never really took off and was more of a personal learning exercise. </p>
<p>I learned a lot about neural networks and the subtleties of applying them to real world problems from writing Breakage, and a few things about software engineering. Looking back on it now, I have a few thoughts about Breakage and my original goals:</p>
<h3>It&#8217;s really fun</h3>
<p>This thing was great fun to play with. There&#8217;s a few people in the academic field of music informatics writing journals, running conferences and teaching courses about this kind of thing, but I&#8217;ve not seen much that&#8217;s easily accessible to casual musicians or being developed commercially. That&#8217;s a real loss, and I hope a &#8220;casual machine assisted composition and performance&#8221; market gets going one day.</p>
<p>Ge Wang, creator of the ChucK language, is now running <a href="http://www.smule.com/">Smule</a>. They make social music apps for the iPhone-like <a href="http://iamtpain.smule.com/">I Am T-Pain</a> and <a href="http://www.smule.com/soniclighter">Sonic Lighter</a>, which are in the same kind of space.</p>
<h3>The training target isn&#8217;t clear</h3>
<p>Neural networks start off behaving randomly. With repeated exposure to training data they become more accurate. On each training cycle, you test how accurate the net is and stop training it when it reaches a cutoff point you&#8217;ve set. Too much training gives you a brittle network that can match the patters it&#8217;s seen perfectly but can&#8217;t generalise from them or respond well to new input. Too little training and you get an inaccurate net that gives near random results.</p>
<p>This challenge is known as <a href="http://en.wikipedia.org/wiki/Overfitting">overfitting</a> and is well discussed in statistical modelling and machine learning. In a musical context however, there are unclear definitions of what correct and incorrect outputs are. Sometimes deliberately overfitting to create a rigid and predictable network is desirable, as it&#8217;s easier to perform with an instrument that responds predictably to your actions. Other times it&#8217;s preferable to leave it able to generalise, enjoying the moments where it does something unexpected and delightful, and tolerating the odd sounds that come with that.</p>
<p>If I returned to Breakage or a similar app, I&#8217;d consider creating several networks trained to different error levels and adding a control to switch between them during a performance. Beyond my work, I&#8217;d like to see some approaches to recording and evaluating the qualitative, aesthetic, and interactive experiential outcomes of machine learning algorithms.</p>
<h3>UX and design are crucial</h3>
<p>If you work on the consumer facing internet you probably know this already. I didn&#8217;t realise how important this was at the time I wrote Breakage, and when I showed it to musicians they struggled with the controls before they could understand and grapple with the ideas and the musical possibilities.</p>
<p>It takes a lot of work to develop a simple interface to a complicated instrument, especially a novel one where there are few well-known points of reference or easy metaphors. I got a lot of things clearer in my head by writing Breakage, solving some interesting technical and conceptual challenges, but if I were approaching this again I&#8217;d invest more work in the design and the UX. At the time I wanted to scratch a personal itch, but today I&#8217;d want it to be used by others.</p>
<h2>Breakage today</h2>
<p>Here&#8217;s the last version of Breakage I published, version 23 for <a href="http://ollieglass.com/breakage/download/Breakage-23-win.zip">Windows</a>, <a href="http://ollieglass.com/breakage/download/Breakage-23-osx.zip">Mac</a> and <a href="http://ollieglass.com/breakage/download/Breakage-23.zip">Linux</a>. I&#8217;d be interested to hear your thoughts if you try it out, and if you can get it working! I stopped developing it years ago and I&#8217;m not sure if ChucK or that old Java code will run on a modern OS.</p>
<p>As well as all of the points above, if I were developing it now I&#8217;d look to build it into existing music software. No step sequencer software at the time offered an API on the note data, perhaps that&#8217;s changed with Ableton&#8217;s new Max/MSP and Python interfaces.</p>
<p><strong>Update</strong> Thanks to <a href="http://www.flipmu.com">Owen Vallis</a> for pointing out that &#8220;the chuck binary doesn&#8217;t work on OSX lion. Here is a link to a patched binary of <a href="https://lists.cs.princeton.edu/pipermail/chuck-users/2011-August/006329.html">Chuck for OSX 10.7</a>&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://ollieglass.com/2012/04/23/breakage-a-machine-learning-drum-machine/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Bieber Fever Meter with HTML5&#8242;s Web Socket, d3.js and Pusher</title>
		<link>http://ollieglass.com/2012/04/21/bieber-fever-meter-with-html5s-web-socket-d3-js-and-pusher/</link>
		<comments>http://ollieglass.com/2012/04/21/bieber-fever-meter-with-html5s-web-socket-d3-js-and-pusher/#comments</comments>
		<pubDate>Sat, 21 Apr 2012 16:02:54 +0000</pubDate>
		<dc:creator>Ollie</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[d3.js]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[WebSockets]]></category>

		<guid isPermaLink="false">http://ollieglass.com/?p=165</guid>
		<description><![CDATA[Wanting to test out the data-driven visualisation library d3.js and HTML5&#8242;s WebSocket, I wrote a Python script to monitor Justin Bieber tweets, used Pusher to send them to a web page, and modified Mike Bostock&#8216;s d3 bar chart example code to show a rolling bar chart of the count each second (GitHub repo). Pusher is [...]]]></description>
			<content:encoded><![CDATA[<p>Wanting to test out the data-driven visualisation library <a href="http://mbostock.github.com/d3/">d3.js</a> and HTML5&#8242;s <a href="http://en.wikipedia.org/wiki/WebSocket">WebSocket</a>, I wrote a Python script to monitor Justin Bieber tweets, used <a href="http://pusher.com/">Pusher</a> to send them to a web page, and modified <a href="http://bost.ocks.org/mike">Mike Bostock</a>&#8216;s d3 <a href="http://mbostock.github.com/d3/tutorial/bar-2.html">bar chart example code</a> to show a rolling bar chart of the count each second (<a href="http://github.com/ollieglass/pusher-d3-demo">GitHub repo</a>).</p>
<p>Pusher is a great streaming data service, sparing you from writing up a slew of workarounds for the various degrees of WebSockets support in various browsers. As they put it: &#8220;We believe that your developer time is best spent making awesome features, not creating infrastructure.&#8221;</p>
<p>At <a href="http://nixonmcinnes.co.uk/">NixonMcInnes</a>, my colleague <a href="http://www.nixonmcinnes.co.uk/who-we-are/people/edward/">Edd Parris</a> and Pusher&#8217;s Developer Evangelist <a href="https://twitter.com/#!/leggetter">Phil Leggetter</a> put <a href="http://twitter.github.com/bootstrap/">Twitter&#8217;s Bootstrap</a> on the front end and made a server-side optimisation to push the total count each second instead of sending every Tweet. Edd&#8217;s written about it on the <a href="http://www.nixonmcinnes.co.uk/2012/04/20/what-can-we-learn-from-the-real-time-web-and-justin-bieber/">NM blog</a> and we&#8217;ve hosted it with Heroku at <a href="http://bieber.nixonmcinnes.co.uk/">bieber.nixonmcinnes.co.uk</a>.</p>
<p><a href="http://bieber.nixonmcinnes.co.uk/"><img src="http://ollieglass.com/wp-content/uploads/2012/04/Screen-shot-2012-04-20-at-16.30.35-430x259.png" alt="Bieber Fever Meter" title="Bieber Fever Meter" width="430" height="259" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://ollieglass.com/2012/04/21/bieber-fever-meter-with-html5s-web-socket-d3-js-and-pusher/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JIT (Javascript InfoVis Toolkit) boilerplate</title>
		<link>http://ollieglass.com/2012/04/11/jit-javascript-infovis-toolkit-boilerplate/</link>
		<comments>http://ollieglass.com/2012/04/11/jit-javascript-infovis-toolkit-boilerplate/#comments</comments>
		<pubDate>Wed, 11 Apr 2012 22:17:48 +0000</pubDate>
		<dc:creator>Ollie</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[examples]]></category>
		<category><![CDATA[JIT]]></category>

		<guid isPermaLink="false">http://ollieglass.com/?p=126</guid>
		<description><![CDATA[The JavaScript InfoVis Toolkit is a great library for rendering graphs in browsers but I find its example code unwieldly. The RGraph example has several HTML elements, two css stylesheets, a complex data set and a some optional RGraph settings in the JavaScript. I&#8217;ve stripped it down to a much simpler example with one div, [...]]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> is a great library for rendering graphs in browsers but I find its example code unwieldly. The <a href="http://thejit.org/static/v20/Jit/Examples/RGraph/example1.code.html">RGraph example</a> has several HTML elements, two css stylesheets, a complex data set and a some optional RGraph settings in the JavaScript. </p>
<p><img src="http://dl.dropbox.com/u/19419/blog/images/jit-rgraph-example.png" alt="JIT's RGraph example" /></p>
<p>I&#8217;ve stripped it down to a much simpler example with one div, no css, a minimal data set and only the most crucial RGraph settings, put it all in one HTML file and made a <a href="https://github.com/ollieglass/jit-boilerplate">jit-boilerplace</a> project on GitHub for future reference. Perhaps you&#8217;ll find it useful too.</p>
<p><img src="http://dl.dropbox.com/u/19419/blog/images/jit-boilerplate-rgraph-example.png" alt="JIT-boilerplate RGraph example" /></p>
]]></content:encoded>
			<wfw:commentRss>http://ollieglass.com/2012/04/11/jit-javascript-infovis-toolkit-boilerplate/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Generating jQuery Mobile sites from DOT graphs</title>
		<link>http://ollieglass.com/2012/04/09/generating-jquery-mobile-sites-from-dot-graphs/</link>
		<comments>http://ollieglass.com/2012/04/09/generating-jquery-mobile-sites-from-dot-graphs/#comments</comments>
		<pubDate>Mon, 09 Apr 2012 14:53:06 +0000</pubDate>
		<dc:creator>Ollie</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[dot2jqmobile]]></category>

		<guid isPermaLink="false">http://ollieglass.com/?p=87</guid>
		<description><![CDATA[I like graphs, mobile, web apps, the promise of CASE tools to let developers work on higher levels of abstraction and thinking about how different perspectives help us design and make sense of things. All of this came together in a weekend hack, dot2jqmobile, a Python script to generate skeletal jQuery Mobile sites from DOT [...]]]></description>
			<content:encoded><![CDATA[<p>I like graphs, mobile, web apps, the promise of <a href="http://en.wikipedia.org/wiki/Computer-aided_software_engineering" title="CASE">CASE</a> tools to let developers work on higher levels of abstraction and thinking about how different perspectives help us design and make sense of things. All of this came together in a weekend hack, <a href="https://github.com/ollieglass/dot2jqmobile" title="dot2jqmobile">dot2jqmobile</a>, a Python script to generate skeletal jQuery Mobile sites from DOT graphs. Here&#8217;s a primer on DOT and jQM, then a few words on how the script works and the ideas behind it.</p>
<p><strong>DOT</strong></p>
<p>Here&#8217;s the DOT language for describing graphs:</p>
<script src="https://gist.github.com/2344631.js"></script><noscript><p>View the code on <a href="https://gist.github.com/2344631">Gist</a>.</p></noscript>
<p>It&#8217;s simple: nodes are text, edges are two dashes.</p>
<p>Rendering tools like Pixelglow&#8217;s <a href="http://www.pixelglow.com/graphviz/" title="Graphviz">Graphviz</a> can generate images from this syntax, like so:</p>
<p><img src="http://dl.dropbox.com/u/19419/dotmobile/test.png" alt="Rendered graph" /></p>
<p>Graphviz handles the layout and the rendering of the image. DOT is so lightweight I often use it to sketch out systems and connections between things. Graphviz detects changes in files, so if you work with Graphviz and a text editor next to each other, the image will update automatically when you save.</p>
<p><img src="http://dl.dropbox.com/u/19419/blog/images/dot_and_graphviz.png" alt="Graphviz and text editor" /></p>
<p><strong>jQuery Mobile</strong></p>
<p>I learned about <a href="http://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a> at <a href="http://remysharp.com/" title="Remy Sharp">Remy Sharp</a>&#8216;s mobile HTML5 workshops at the <a href="http://updateconf.com/" title="Update Conference">Update Conference</a> in 2011. You can create mobile web apps from a single page of html using divs, data attributes and links to specify pages and links between them. Wikipedia have a great <a href="http://en.wikipedia.org/wiki/JQuery_Mobile">basic example</a> of this, here&#8217;s the central idea:</p>
<script src="https://gist.github.com/2344577.js"></script><noscript><p>View the code on <a href="https://gist.github.com/2344577">Gist</a>.</p></noscript>
<p><a href="http://db.tt/CV2UKgqW">Here&#8217;s how that condiments graph looks as a jQuery Mobile site</a>, generated from the dot with dot2jqmobile.</p>
<p><strong>The dot2jqmobile script</strong></p>
<p>jQuery Mobile sites are essentially graphs, with the pages as nodes and the links being edges between them. Translating between the DOT and jQuery Mobile graph representations is the central idea in dot2jqmobile. It reads and parses a DOT file using <a href="http://code.google.com/p/pydot/">pydot</a>, creates a Page object for each node, adds links to the Page objects, then renders them all as jQuery Mobile ready HTML with a header and footer.</p>
<p><strong>Exploring spaces in the first and third person</strong></p>
<p>Sometimes I write directly in DOT to capture my thoughts about a system as I&#8217;m mentally traversing it. The simple syntax makes it easy to add connections as you realise them and record a stream of consciousness. My DOT writing process often involves me following a train of thought like this:</p>
<p><code>apples -- oranges -- bananas -- ...</code></p>
<p>Then following another:</p>
<p><code>ice_cream -- pudding -- pie -- flan -- ...</code></p>
<p>And revisiting nodes in the trains, making links between them:</p>
<p><code>bananas -- banana_pie -- banana_ice_cream -- ice_cream</code><br />
<code>ice_cream -- vanilla -- cinnamon -- apple -- apple_pie -- pie</code></p>
<p>Writing the connections straight into the text lets me explore the system from a first person point of view, wandering through the space and capturing spontaneous thoughts like &#8220;an orange is like an apple, and a banana is like an orange&#8221;. Unlike a diagram editor which could be used to the same end, or more structured writing like an essay or blog post, writing directly in DOT doesn&#8217;t require any thinking about the layout of things or connections between trails and entities.</p>
<p>On rendering, the layout algorithms and image rendering in Graphviz give me a third-person overview of my thinking. Looking at the graph I can see the bigger picture with observations like &#8220;this is how the fruits and deserts fit together as a whole&#8221; and notice trends at this level. In the example above, I might spot that there&#8217;s an unclear boundary between flavours and desert types &#8211; should there also be a vanilla ice cream to follow the banana ice cream, or should I not join flavours and deserts? Together, the language and the renderer give me the ability to switch between first flow and third person views of systems.</p>
<p>But neither make it easy for me to share routes through the graph with others, or see the routes they find when they are traversing through the same space. Graphviz isn&#8217;t quite polished or simple enough for most non-technical users to feel comfortable with it, not is the DOT format. I often export rendered graphs to images, print them out and walk through them with other people. It&#8217;s interesting to ask people to think out loud while they read and make sense of graphs.</p>
<p>With dot2jqmobile, I hope to make it easier to follow along side others as they navigate through spaces, and to capture some of the spontaneous thinking and observations that come out of traversing in a first-person point of view.</p>
]]></content:encoded>
			<wfw:commentRss>http://ollieglass.com/2012/04/09/generating-jquery-mobile-sites-from-dot-graphs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

