Dr. Charlie Roberts
Today we’ll be looking at live coding which is a kinda weird performance practice where people create audio and visuals by programming them live, in front of an audience. We’ll be using a system called Gibber for live coding today, but there are many, many others…. If you’re interested in live coding you can learn more at:
Go to the follow website using Google Chrome: http://gibber.cc
Step 2: Read the welcome screen and then click the “close welcome” button that’s next to the big “Welcome” header.
There’s a bunch of important info in there. But the two most important things are how to run code and how to stop it.
Shift+Ctrl+Enter = Run selected code
Ctrl+. = Stop code from running (control + period)
Try clicking through some of demos to see what they do! Note that the “webcam” demo is currently broken.
The first piece of code we learn in Gibber is how to make a drum beat. Do the following:
- Make sure the “Welcome” screen is closed by clicking the “close welcome” button. If you’ve closed it, you should see a text editor where you can edit code.
- Go ahead and type in the following code:
a = Drums( "x*o*x*o-" )-
Now highlight all the code you just wrote with your mouse (make sure to get every letter!). With all the code selected, hit
Ctrl+Enteron your keyboard at the same time to run the drum beat. You should now hear drums coming through your headphones! -
The different symbols inside the quotation marks control what sounds play when.
xrepresents the kick drum, the lowest and boomiest drumorepresents the snare drum, the sound with the loud crack, like you see people in marching bands play.*represents the closed hi-hat sound. A hi-hat is two cymbals that a drummer can open and close with a foot pedal. When closed they make a short sound, when open they make a longer sound.-represents the open hi-hat sound (see above)
-
Try changing the symbols inside the quotation marks (FYI, in programming terms, we call chunks of text like this a “string”) and then re-running the code by re-selecting it and hitting
Ctrl+Etner. Here are some other possibilities:a = Drums( “xxxx” )- all kick drums!a = Drums( “xoxo” )- kick / snare / kick / snare… a very common simple beata = Drums( “x*ox*xo-“ )- This beat is getting a little funkier, with more syncopation
- If you want to stop your drum beat, just hit
Ctrl+.(control + period). That should stop all the sound in your browser. - OK, try typing the following code, and then selecting it and running it with
Ctrl+Enter
k = Knot()
k.spin( .0005 )- In the code above, we create our Knot shape and then assign it to the letter
k, this is just like assigning a number to a letter in math. Now we can refer to our knot by simply typingkin Gibber. So the first line of code creates a Knot and assigns it to the letterk, the second line of code says “take the knot found in the letter k and tell it to spin slowly”. - You can change the speed of the spinning by increase the number after
k.spin. If things get to crazy, remember you can always clear the code by hittingCtrl+.(control + period) to stop all the code that’s running, and then just select it and run it again withCtrl+Enter. - Let’s add another line of code to make the knot a bit bigger. In programming terms, we will change the scale property of our knot. Lots of objects in Gibber have properties we can play around with.
k = Knot()
k.spin( .0005 )
k.scale = 4- In fact, one fun property to play with is the
pitchproperty of our Drums objects that we made earlier. It lets us play the drums at faster or slower rates, which makes the drums sound higher or lower. And if we assign a negative number to pitch, we can play the drums in reverse!
a = Drums( "x*ox*xo-" )
// play drums backwards
a.pitch = -1
// play drums forwards and higher
a.pitch = 2- In the example above, every line that starts with the
//characters is known as a code comment. These lines are just used to provide notes to programmers, they’re not actually code that the computer runs. SO YOU DON’T NEED TO TYPE ANY LINE THAT STARTS WITH IN. Those lines are just there as hints. - Try executing the non-comment lines one at a time, and hear how the pitch changes the drum sounds. Try using other numbers and re-running the code (using
Ctrl+Enter). What happens to the sound? Remember to try numbers with decimals as well (like .5)
- OK, so now we have some sound, and we have some visuals… let’s link them together so that the visuals respond to our drum beat!
- We saw earlier that we could change the size of our Knot by changing its scale property. Let’s try assigning the output of our drums to the scale of the Knot instead.
// make our drums... remember, no need to type in lines
// that begin with the double slashes (//)
a = Drums( "x*ox*xo-" )
// make our knot and start it spinning...
k = Knot()
k.spin( .0005 )
// last but not least, take the output of our drums
// and assign it to the scale property of our Knot
// object
k.scale = a.out- If you run all the code above (don’t type in the code comments!) then you should see your knot dancing around to your beat. Excellent!
- Gibber has some built-in special effects for graphics. These effects are called shaders and are small programs that run on the graphics card of your computer… which isn’t that important to know.
- But they are fun. Try adding some of these shaders and see what happens to your visuals! If you ever get stuck, copy all the code on your screen (Ctrl+C) then refresh the page and paste it back in (Ctrl+V).
// let’s use a new shape… a cube
c = Cube()
c.spin( .0005 )
c.scale = 2
// let's add a Kaleidoscope effect
k = Kaleidoscope()
// we can change the number of sides of our effect
k.sides = 2
// try other numbers for sides! what happens?
// how about some dots? This simulates an effect
// found in printing.
d = Dots()
// make the dots smaller... or bigger! larger
// numbers means more dots
d.scale = .5
// one more... we can simulate it being out-of-focus
// with the Focus effect
f = Focus()
// larger numbers make everything more out of focus!
f.sampleDistance = .5