Category Archives: art

The arts are a powerful entrance into computer science. In fact, there’s a whole lot of creativity that can be done with CS. One of my absolute favorites is Sonic Pi. Sonic Pi is a free program that enables anyone to code music. It’s the brainchild of Sam Aaron from Cambridge, who teaches CS there. In his off-hours, however, he’s a massive electronic music fan and DJ. Naturally, the thought occurred to him of combining these two passions and giving young people the tools to create their own awesome music while learning how to code. Brilliant!

Sonic Pi is written in the Ruby programming language, but that’s pretty much transparent once you start coding. It’s a free program, available on all platforms and is currently included in the latest release of Raspian. It’s a wonderfully integrated IDE, with 10 “buffers” (coding windows), an extensive built-in help system with examples, a window where you can watch the code as it executes, as well as an internal musical graph, so you can visualize your sounds in terms of volume, length, etc.

You can run the whole thing from the RP, but you’ve got to provide your own speaker, since the Pi doesn’t have one (trying to keep the cost and size down, remember?). But there are plenty low-cost options. And headphones are another option; most students have a set of earbuds if you’re cash-strapped. Using speakers or headphones requires one more extra step. Be sure to left-click on the sound icon in the upper right of the main Pi window. Bump the volume all the way up. Then right-click on the same icon and change the output from digital to analog. You’re good to go.

Most people start with writing a simple tune. You can do this by using the “play” command followed by a number. The numbers correspond to the MIDI numbers, so middle C is 60, like so: play 60. That command plays one note of middle C for one beat. A beat is roughly a second, since the default bpm(beats per minute) is 60. It also plays that note with the “beep” synth. A synth is sound that the notes play their notes with. The default synth is a beep, but as we’ll see, there are dozens more available.

If you are familiar with musical notation, you may instead say “play :C4”. Watch that colon! It’s required for the name of the note, but not the number. The easiest way to set up your code is to put each command on a separate line, like so:

play 60
play 64
play 66

You then click the Run button at the top, and your music plays. Or not. If you’ve made an error, it won’t play, but the output window right beneath the code will tell you, in more or less intelligible English, where and what your error is. I find the Sonic Pi/Ruby error messages generally make more sense than the Python ones to most students. In the case of the above sample code, it will play, but the results will not be what we expect, because it will play all of the notes at the same time. In other words, it plays a chord. It’s all very well if that’s what we wanted, but it isn’t. We wanted three distinct notes in sequence. Why didn’t Sonic Pi know that? Well, as we’ve said before, computers are dumb. They also execute commands ridiculously fast, depending on the computer itself, what else it’s doing at the moment, and a host of other factors. So running that code essentially plays them all at once.

How do we avoid that? Simple, we’ve got to tell the music to pause after each note. Musical notation does this, of course, so we just have to know how to make Sonic Pi do it. The command we want is “sleep”, as in “sleep 1”. What if we want pause a half beat? sleep 0.5 (and yes, the 0 is necessary). So if we want to play those three notes, and vary the timing, we could do something like this:

play 60
sleep 1
play 64
sleep 0.5
play 66

Try it! Then experiment with the timing between the notes, then the notes themselves. Take on Twinkle, Twinkle or Mary Had a Little Lamb. I get bored with those; my personal favorite is Seven Nation Army! Just a bit funkier than Twinkle Twinkle.

Of course, the whole point of using a computer is to get it to do the boring, repetitive work. Why should I waste my time and energy typing the same code in twice? I do realize there is copy and paste available, but even with that, it clutters up the buffer and makes me crazy by forcing me to scroll up and down to look at the code. One simple command solves that:

2.times do

Here’s the tricky part. Just as with using indents in Python, we have to have a way to tell the computer exactly what it is we want it to repeat, we have to do the same with Sonic Pi. We do this be placing an “end” after the material we want repeated. Like so:

2.times do
play 60
sleep 1
play 64
sleep 0.5
play 66
end

Sonic Pi will usually indent the code for you, but it will still run even if not properly indented, unlike Python. I tell students that it’s like a pair of sneakers: they always come in pairs. Every “do” requires an “end”. Make sure you follow that rule, or you’ll get some unexpected results, or no results and an error message. And also note that can specify exactly how many times you want the code to repeat by just changing the number in front of .times: 33.times do.

Next question, of course, is…. how do I get it to play forever? Now we’re getting computer science tricky. In Scratch, it’s “forever”, and in Python it’s “while True”. In Sonic Pi, it’s called a live loop. And you set it up like this:

live_loop :twinkle do

Several things to observe here. First, don’t forget the underscore character between live and loop. Secondly, don’t forget that colon before the name of the live loop. Third, you can call the loop whatever you’d like, though it makes sense to call it what is, since you’ll have multiple loops, and if you call one “fuzzybunnies” and another “fattedfrogs”, after a while you probably won’t remember what exactly each one does. Fourth, don’t repeat the loop name in the same buffer, or Sonic Pi will just play one of them. And lastly, don’t forget that “do” at the end of the line! And you know what that means — yep, you’ve got to end the code with an “end”.

Seems like a lot to remember, but not really. After a little while it will become automatic, like all other coding conventions.

So we’ve learned how to pick out a simple tune, play it a few times or forever. But you have to admit that the excitement of that wears off pretty quickly. Partly because those beep notes aren’t too exciting, once you get over the initial excitement at coding a tune. How about we change the sound of the notes? We do that with what are called “synths”.

A synth is not the note itself, but the way the note sounds. For instance, you can play the same not on a clarinet, a piano, and a distorted electric guitar, and you’ll get three very different sounds, though the notes are all the same. Sonic Pi has many built-in synths, so we can create all kinds of moods and sonic layers with some simple code. The relevant code is “use_synth”, and it must be situated BEFORE the notes that you want to modify. The easiest way to experiment is to type the command on its own line and then hit the space bar. That will open up a dialogue box of all the synths that are available on your version of Sonic Pi. The list is alphabetical, and you can simply scroll through the list till you find one that sounds interesting and it will insert that on the line in correct Sonic Pi format. Find something that intrigues you and try it out! As Sam Aaron always says, there are no mistakes! If you don’t like it, cursor up to the line, hit backspace to erase the name of the current synth. Stop your backspacking just before you hit the h in use_synth, and then hit your space bar again. You’ll get that alphabetical list of available synths again. And if you get tired of arrowing down through the list, or you know that you want to use tb303, for example, hitting the “t” will jump you down to the synths that start with t.

Now, admittedly some of them don’t sound particularly musical, in fact some of them sound like noise! Which is, in fact, what they are. But there’s a place for noise in certain pieces, so maybe save those synths for when you need them.

The other magical thing about Sonic Pi is that it enables you to do LIVE music coding. Some students, especially if they have some musical background, want to recreate their favorite song and so want guitars, piano, bass, etc. My experience is that Sonic Pi can certainly do that, but that misses out on the fun. LIVE music coding means that you can change the sounds AS your piece plays, adding or subtracting synths, beats, and samples as you go. So it becomes a live performance piece, something like a DJ will do. By mixing in and out pieces of sound, the DJ creates something new on the fly, so it’s a performance. Fun!

There are so many amazing and truly advanced things that you can with Sonic Pi, that it goes beyond the scope of this book. There are a host of amazing resources out there and I’ve listed several of my personal faves at the end of this chapter. But I would be remiss if I didn’t at least touch on three other amazing tools in the Sonic Pi toolkit: samples and opts and effects.

A sample is simple a piece of sound. They’re used all the time in music. Hip hop artists routinely sample other songs or sounds and build their own songs out of them. Sonic Pi comes with a host of built-in samples. Some are musical (drums, for instance), and some are random sounds (like the ever-popular burp). They are used by the simple code “sample”. As with the synths, if you hit the space bar after you type e in sample, a dialogue box with a list of all the samples pops up, and you can scroll through till you find something you like. It plays like a note, for whatever duration you specify. So it’s a timed unit of sound, like a note.

The other cool thing that’s available in Sonic Pi is what we call an “opt”. That’s short for “option”. An opt is a device that lets you change the sound of the note or sample in some way. For instance, you have access to the entire ADSR filter range (Attack, Decay, Sustain, Release), by which you can shape the length of a note, how long it takes to trail off, etc. You also have access to a range of other options like panning, and volume. You use these by putting them on the line of the sound you want to effect. So if you want to add more volume to a note, you would code
play 60, amp: 4

That would make that note 4 times louder than the normal volume (which is 1).

And finally, there are multiple effects you can add, like reverb and delay. If you’re familiar with effects pedals for the guitar, this will make you feel right at home. Except instead of stepping on the pedal, you slap it into your code where you want the effect to start. And each effect us fully customizable, so you can code different types of reverb for instance (room, hall, plate, etc.).

with_fx :reverb do
play 60
sleep 1
play 64
sleep 0.5
play 66
end

Don’t forget the do at the end of the effect line, and of course, you need to tell Sonic Pi when to stop using it, so you’ll need an end for that.

It’s truly amazing what students can create with a few simple tools! And for those who will tell you “I’m not a musician”, I always give Sam Aaron’s answer: “Not yet!”

Cascading Style Sheets. I’ve just introduced the topic to my Digital Multimedia class (almost all 8th graders). The WOW moment? When I showed the CSS Zen Garden to them. If you haven’t visited the garden, you should. It’s a curated repository of incredibly creative CSS designs, all using the same HTML file. You can click on the names of designs and then have your head explode as a new design pops up. The styles range from old-school Japanese to emo to Halloween to retro to underwater to geek chic to …. well, you’ll just have to go take a look!

I’ve seen no better way to introduce the concept that structure (HTML) and style (CSS) should be kept separate. We spent the next 30 minutes exploring the over 200 designs that made the cut and even some that didn’t. The beauty of the site is that all of the authors have included their .css files for inspection (though not for copying), so we could see exactly how they accomplished their design magic. Next week, they dive in and see what they can do.