Music comissioning is back!

Folks, I’m offering up to 30 commissions this November of 1 minute long noise music pieces. You as the commissioner get to name the piece. Your role as titler and commissioner will be mentioned in the program notes. If you commission a piece as a gift, or in honour of another person or of an event, the person and/or event will also be mentioned in the program notes. A new piece of music will be created, just for you! Within a week, you will get a copy of the piece emailed to you in the audio format of your choice (MP3, AIFF, WAV, Apple Lossless, AAC) and have one week in which to come up with a title (I reserve the right to nix titles that I deem offensive). I retain copyright, but the piece will be released under a Creative Commons Share Music License, so you (and the honoree) can share the piece with friends via CD or the internet.
As a special feature for this burst of commissions, you can optionally specify if you want your piece to be acoustic, analogue or digital. Also, optionally, let me know if you might use the piece as a ringtone to ensure it gets composed to sound good and loud coming from a mobile phone. All commissions will be delivered in time for Christmas or Hanukkah.
The introductory price for the first 5 is £5. This will go up shortly, so act now to get it. This is for digital delivery only. You are free to burn your piece of music on to CDs and give them away to friends, but if you want a signed CD from me, that’s also possible for an extra £3 + postage.
Get it from my Etsy shop!

Why restart this project?

I still need a few more short pieces before I can put out the long-awaited CD of shorts. And also, the last time I did this, I was in a bit of a rut where I hadn’t really written anything for a while and it got my composing again, so hopefully, that will also work again now.

Scrambling and Rotating

I’m still doing stuff with the Bravura font, so you’re going to have to follow a link to see it.

New things on that page include changing font size per item, rotating an individual object, constraining random numbers and shuffling an array. The last of which is not included in javascript. I cut and pasted a function from stack overflow.
Right now I’m using random numbers, but the end version needs to work deterministically in response to data and probably everyone’s screens should more or less match. So the randomness is for now and not later.
I need to make some functions for drawing arrows and staves. And I need to figure out how the bounding boxes will work and how things will fade in and out. Every kind of glyph or drawn thing on the screen needs to be an object that takes parameters in regards to size and rotation and knows how to draw itself.
In short, it’s starting to look like music, but there’s a long way to go.

Friday’s Post

I found a really very handy PDF document showing every single available music glyph in the Bravura font, organised by type. Gaze upon it and be amazed by how much notation you don’t know and how very very many types of accidentals there are. I really like the treble clef whose lower stroke ends in a down arrow. I don’t know how I missed it earlier. This is truly the best font ever. I also has letters and numbers and stuff.
I’ve got an example of using Bravura in a canvas. You have to go elsewhere to see it, because it’s downloading the font via @font-face in css and I can’t do that from this blog.
If you look at it, you should see an upside down treble clef. This is from the Bravura font. If you don’t see the treble clef, please leave a comment with what browser you’re using (ex: Internet Explorer), the version number (ex: 4.05), the sort of device (ex: Desktop, laptop, tablet, iphone, etc) and the operating system.
I got that glyph into the canvas by typing the unicode into the string in my text editor. The editor is using a different font, so this is kind of annoying because looking at the text source doesn’t show the result or even the unicode number.
This is an example of an image in a canvas with some text:

Your browser does not support the HTML5 canvas tag.

Big Red Blob originally uploaded by celesteh.

var c=document.getElementById(“canvas_images”);
var context=c.getContext(“2d”);
var numGlyphs = Math.floor((Math.random()*3)+1) + 1;
var blob = new Image();
var x, y;

context.font = “150% Bravura”;
blob.src = “”
blob.onload = function() {
context.drawImage(blob, 0, 0);
for (var i = 0; i < numGlyphs; i++) { x = Math.floor((Math.random()*i*50) + 1) +5; y = Math.floor((Math.random()* 205) + 1) +7; //1f49b context.fillText("


Today I went to the dentist because my dental surgery from last week was still all swollen and that turns out to not be a good sign. So I picked up some antibiotics and then went to the Goldsmiths degree show, which was interesting and extremely variable. I did not get a lot of creative pacting done today. I read a wee bit about how to declare objects in javascript, which is really easy:

var cleff = {
unicode: "&x#1d11e";
repeats: 1

What I really need is just a syntax cheat sheet, since I’m already familiar with most of the concepts of this language. So I skipped ahead to canvases.

Your browser does not support the HTML5 canvas tag.

var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.moveTo(0, 32);
ctx.lineTo(200, 32);

What the source for that looks like is:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0, 32);
ctx.lineTo(200, 32);


I need to learn how to get unicode into those strings. Just typing it in with the ctrl-shift-u thing doesn’t work, nor does typing the html escape sequence. Also, it seems like changing the line colour didn’t work.

Chosen Symbols

I picked which symbols I’m going to use. (I have to link to them rather than post them on this page because they use a bundled font, and some web browsers want that font to come from the same server as the text. I can’t upload the font to blogspot, as far as I know.)
A couple of iPad users let me know they can see the upside-down treble clef, so I know that this font thing works on that device, so this is excellent news.
The symbols are sort-of grouped into noteheads, rests, lines, clefs, fermatas, circles, triangles, diamonds, and groovy percussion symbols. There are some cases in which different unicode chars seem to map to identical symbols. Some of the symbols, like the bars, don’t makse sense by themselves, but need to have several grouped together. There’s going to need to be some logic in how symbols are chosen by the program and used. Strings might be pre-defined, so regexes might indicate repetitions of a glyph.
While going through some papers, I found my first notes from when I first thought of this piece.
.flickr-photo { border: solid 2px #000000; }.flickr-yourcomment { }.flickr-frame { text-align: left; padding: 3px; }.flickr-caption { font-size: 0.8em; margin-top: 0px; }

First Notes, originally uploaded by celesteh.

This piece started as a pen and paper idea. The ideas were:


  1. staff lines that go funny, like intersecting lines, steps, etc.
  2. wavy lines using a line drawing tool.


  1. pitch sets definied before the lines go off –> indeterminate clefs
  2. Ink blots that fall from an ink pen
  3. granular clouds w/ pitch areas defined in margins


  1. Transparencies, ala Cage
  2. Apps written in processing or Open GL, use monitors or projector.
  3. phone app?

The staff lines that go off is a good idea. They could start straight and then curve or just always be intersecting. This can’t use the staff notation in the font, but will need to be a set of rules on how to draw lines.
Using indeterminate clefs is not as good an idea – it just means there are two possible versions of every note, which just builds chords.
By the end of making that outline, it was no longer a pen and paper piece!
Granular clouds are not well suited to vocal ensembles, but this idea did become another piece.
Cloud Drawings from Charles Céleste Hutchins on Vimeo.


I’ve got a demo going of the SMuFL font thing here. This is what my style.css looks like:

@font-face {
  font-family: Bravura;
  src: local("Bravura Regular"),
    url(Bravura.otf) format("opentype");
body {
  font-family: Bravura, Sonata, sans-serif; 

td {font-size:200%;}

I cheated. Instead of writing the script to generate all the glyphs in javascript, I used sclang because I know it already. This is the code:

i = 0x1D1FF - 0x1D100 + 1;

"<link rel="stylesheet" type="text/css" href="style.css">".postln;
"<table border =1 cellpadding =5>".postln;{|glyph|
 // unicode music section
 glyph = glyph + 0x1D100;
 "<tr><td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));

 // SMuFL extra music char section
 glyph = glyph + 0xE000 - 0x1D100;
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
  "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF; 
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF; 
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF; 
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
 "<td>%</td><td>&#x%;</td>".postf(glyph.asHexString(5), glyph.asHexString(5));
 glyph = glyph + 0xFF;
 "<td>%</td><td>&#x%;</td></tr>n".postf(glyph.asHexString(5), glyph.asHexString(5));

It’s not the nicest code I’ve ever written.
If you click through and see musical stuff at the top of the first two columns, then all is well. If you see non musical stuff, like linux penguins, then the font thing didn’t work. This is what it looks like for me:
.flickr-photo { border: solid 2px #000000; }.flickr-yourcomment { }.flickr-frame { text-align: left; padding: 3px; }.flickr-caption { font-size: 0.8em; margin-top: 0px; }

Bravura in Firefox, originally uploaded by celesteh.

If you’re getting something really different, if you don’t mind leaving a comment about your browser and operating system? This is supposed to work with internet explorer, so I’m interested in the experiences of Windows users and especially of iPad users.
I mentioned yesterday that I was drawing some influence from Russian art of the revolutionary period. This is a picture of a plate originally designed around then:
.flickr-photo { border: solid 2px #000000; }.flickr-yourcomment { }.flickr-frame { text-align: left; padding: 3px; }.flickr-caption { font-size: 0.8em; margin-top: 0px; }

Supermatist Plate, originally uploaded by celesteh.

It’s got a nice mix of abstract and concrete symbols. Also this google search returns a load of suprematist images. There seems to be a clear relationship between those kinds of images and some of Schaeffer’s colour pieces, which are single page graphic scores.
The next steps for me, aside from getting some javascript skills, are picking which of those many many many musical symbols will be in my palette. I can’t just pick randomly within the range, because some of them would be especially nonsensical (like the MIDI cable ones) and not every glyph is supported.
Also, I still need to pick out some text.


.flickr-photo { border: solid 2px #000000; }.flickr-yourcomment { }.flickr-frame { text-align: left; padding: 3px; }.flickr-caption { font-size: 0.8em; margin-top: 0px; }

Sketches, originally uploaded by celesteh.

I finally did some sketeches with pen and pencil about what I might do. The gamut of allowable shapes is therefore:

  • curved arrows
  • straight arrows
  • musical glyphs of any size (a list of allowable unicode numbers will be forthcoming)
  • coloured blobs
  • clouds of dots
  • text
  • numbers
  • circles
  • squiggly lines

Boxes that contain text may have 0-2 other items. Boxes that do not contain text may have 3-5 items.
A few of the boxes I drew reminded me of some of the Russian avant-garde stuff, like the Constructivists and Suprematists. This is not a co-incidence since, inspired by the name of my choir, I went to see a bunch of Constructivist work some weeks ago. I’ll post some of the images I’m thinking of shortly.
As far as text goes, I had an idea to use some incantations of C’thulu, but then I realised that’s a terrible idea, so I’m thinking now of some English translations of Constructivist and Suprematist poetry or prose, still about sounding and listening.

OSC and Javascript

Having my mouth cut open took a bit more out of me than I expected. I have nothing new to share about rendering graphics with font symbols in javascript, but here are some js libraries that can do OSC, which will be needed for a later stage of this project. I was looking these up for another project that needs to both send and receive OSC. I don’t want to have to learn two different OSC libraries, so even though this project only needs to receive, I’m only interested in libraries that do both. All of these seem to be built on top of another library called Node.js

  • Kievii does a lot more than I need, but there’s OSC in it too.
  • OSC-web has some proxy stuff which could be useful for later projects
  • OSC-min is a minimal implementation that does everything I need
  • The website for Node.js has a list of popular OSC implementations

Back to rendering graphics soon. I’ve been reading an introduction to javascript, which is way too basic, but a place to start. After that, I think what I need to know about is probably canvas, so I’ll be reading about that.
Also, obviously, I need to think about symbols that are not just bits of music notation font. If I also want to use text, I either need to write some or find something that I can use, such as a philosophical text or poem. If I want the text to be related to the mechanics of the piece, it should be about sounding and listening. There’s some odd text on this theme that I remember from the very start of Noise Water Meat, so I might go looking for that in translation. I really do need to make some paper sketches soon or there’s a risk that I’ll just be making a real-time, machine-listening, pastiche of Redhead and while that would be great fun, I do want to make this my own.
I’m also sort of wondering how I want to page changing to work. Do I want the boxes to just fade in and then fade out? Do I want them to move their location on the screen? Do I want them to change size? Should the elements within them stay fixed? I’m thinking that if the box is moving or changing size, the stuff in it can’t also move or it’s too much.

Creative Pact Day 3

So I’m doing the Creative Pact, but I’m a day behind because I didn’t hear about it until September 2nd. My project is to write a vocal piece wth a computer generated score in real time.
I don’t have a lot to report today. I learned some facts:

  • There is a new release of SCMIR
  • It is totally possible to serve fonts across the web for viewing web pages. You use a thing in CSS called @font-face
  • There is a new initiative for standardisation in music fonts called SMuFL (pronounced ‘smooful’). Compliant fonts implement the unicode section for music fonts and then have a bunch of additional musical symbols.
  • The font that ships with LilyPond, Bravura implements SMuFL and looks alright.
  • (The tattoo on my arm is bass clef in the font that shipped with Sibelius 3. What font is that?)

I can’t do a proper demo of this because fonts included in a web page need to be served from the same server as the webpage (at least for firefox users), but this style.css bit sets the font to Bravura for the whole of a webpage:

@font-face {
  font-family: Bravura Regular;
  src: local("Bravura Regular"),
    url(Bravura.otf) format("opentype");
body {
  font-family: Bravura Regular, Sonata, sans-serif; 

That uses the local copy of Bravura, if it’s already on your machine, or downloads it if not. If somehow that goes wrong, it uses the Sonata font instead. When I get a chance, I’ll upload a proper demo to my website, doing a table of all the musical symbols. But probably not tomorrow, as I’m going ot have dental surgery in the morning and will probably feel rotten later in the day.

Working from home

So this is day 2 of the creative pact thing in which I try to work from home on my gf’s day off from work. Alas, I have no sketches to upload.
Paper graphic scores can either be single page or multi-page. Bogusław Schaeffer’s colour pieces, Anthony Braxton’s Falling River pieces and Carl Testa’s squiggles are all examples of single page pieces that work well. When I’ve done these pieces, performers have either taken the page as a whole, or picked different spots on the page to concentrate on. (I only saw very early versions of Testa’s pieces, so his instructions may have become more directed since then.) This interpretation has not required things be done in any particular order. Someone might start with a set of symbols or notation at the bottom right, then go on to the top left, then do something outline a large shape across the whole page.
Some good multipage scores are, obviously, Cardew’s Treatise and also Lektura by Schaeffer and Concerto by Lauren Redhead. Because these pieces progress regularly from one page to the next, a certain tendency towards chronological order is introduced. The pages therefore seem to need a structure that holds them together and allows them to progress. Schaeffer and Redhead use boxes. Their pieces are also divided into parts. So the performer can look at a box, know whether or not it belongs to them and know it’s timing relative to other boxes other people are interpreting. The box itself seems to be often taken as a whole, with performers able to decide on whatever ordering seems to make most sense in context. By contrast, Treatise is not in parts and the entire ensemble reads from the score, on the same page at the same time. His pages are held together by the ‘lifeline.’ This is a horizontal line across nearly every page that performers can orient themselves along. Mark Applebaum’s Medium is a multi-part piece that does not have a consistent structure, but even it has the vertical ordering of parts and many parts do have something lifeline-like. Some sort of line or box structure seems to be extremely helpful to performers of multi-page scores.
My piece will be on a single, changing screen, which I think makes it more like a multi-page piece than a single page piece. It will be a non-divided score like Treatise. My intention at the moment is to devise a gamut of symbols and then put those symbols in boxes, like Schaeffer or Redhead. Some of these symbols will be based on existing musical symbols, but in differing contexts. They may also be rotated within the bounding boxes, like Redhead.
Because this will be in javascript, I need a way to render them in a web browser. Rather than work out exactly how to draw a notehead in code (yikes), this situation seems to call for a font-based solution. I have not yet worked out what musical fonts I can count on to be available, but I have found the unicode specifications for musical symbols in fonts and how to represent those in HTML. Also, should you wish to type a unicode symbol on an ubuntu computer, you would first hit ctrl-shift-u and then type the hex code and then a space. So to type a bass clef, hit ctrl-shift-u 1D122 space. I have no idea what application this might have, but there you go.
What I’m imaging will happen is that the program will render an image using lines and curves and polygons, some musical font stuff and some text, then rotate that image some amount from 0-360 degrees, then clip it to a bounding box, then draw the clipped portion on the screen with a black outline around it.
I pondered putting a web server on the main, listening computer, in order to get it to render the images. It could then tell the clients to download and display them in the proper place, which would make sure everybody was doing the same thing. This might be the right idea, especially if I want to use one of LilyPond’s music fonts, which I spent too long trying to find on my system. Right now, though, it seems like an extra layer of work that hopefully I can avoid.
I’ve upgraded to the latest version of processing and downloaded the javascript and coffee script modes. The next step is to read the quick start guide for folks experienced with processing.