Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
GitHub / GitHub Universe 2020: Play - Design Principles / 12 Dec 2020
GitHub / GitHub Universe 2020: Play - Design Principles / 12 Dec 2020
Previous Meeting
Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: Livecoded compositions - GitHub Universe 2020

Description

Presented by
Char Stiles, Computational artist, graphics programmer and educator, Livecode.nyc
Dan Gorelick, Engineer, creative coder, and musician, Livecode.nyc

Livecoded Compositions is an audio-visual performance—a collaboration between visualist Char Stiles and musician Dan Gorelick. “Livecoding” is editing and recompiling code on the fly to create visuals and/or music. The visuals are created by using a shader language GLSL, and the music is created with a coding library called TidalCycles and an OB6 synthesizer. Char and Dan will start with a short tutorial on how to livecode, then they'll display their text editors as they create the experience. Livecoded Compositions celebrates the serendipity and joy that can arise out of programming as a creative medium for performance and collaboration.

For more from GitHub Universe 2020, visit https://githubuniverse.com

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

So.

B

Hey everyone welcome to live coded compositions. um This is this composition is called melting ice and for the next half an hour, we are going to live code in visual experience. For you, my name is shar styles and I'm going to be coding. The visuals for you.

C

Cool, my name is dan gerelich and I'll be doing the music.

C

So before we start our half hour performance, we're just going to show you some of the building blocks of what each of us are doing with our code, so for the music I'm going to be using the synthesizer that you can see right here in this camera. This makes noises like this and I'm controlling with a little foot pedal.

C

Let me do that and on the right side of the screen, you can see my code, so this I'm using a tool called title cycles, and this is actually just a crop of a text editor I'm using atom, and this lets me actually make music with code. So let me start by saying I want a bass, drum noise I'll make sure it's a little quieter and cool so rather than firing off the rather than executing or interpreting the whole file.

C

It just runs one line at a time, so I'm going to tell it to run this line cool. Can you hear that sure sounds good cool, so there we go and so everything in the string right here and the green is what's in a cycle and it just pretty much repeats the cycles.

C

So if I write another bass drum, that's a house bass drum hbd um it'll do twice and let's do you can also write it like that or you can do 3 four and keep on going we'll go back and then what we can do is. I can also um send signals to my synthesizer, um because what title cycles does also all it does, is it is it triggers samples or anything else? So, I'm going to say I want the sound to be ob6 and I'm going to send a midi note.

C

um Let's send 60 to that quiet right now. Can you.

B

Hear.

D

That.

C

Cool and that's pretty much, the all you need for music um you'll see me do some more complicated things, but I hope these are just the basic building blocks, so you can start to follow along um and I'll hand it back to you char.

B

Really exciting, so, on the left hand of the screen, you will see a glsl code, which is code that is executed on the gpu so because it's executed on the gpu, it is missing some abstractions. So how you color the pixels. Is you use the pixel's position to create those colors? So the input position is a vector two, which is just a container for two numbers, and a color is a vector four, which is a container for four numbers: red channel, green channel, blue channel and alpha so um to create visuals with a pixel's position.

B

We use math. So, for example, if I wanted a circle on the screen, I would um need to use a math function, pythagoras theorem, which is called length and built into glsl. I can get the distance of the pixel to the center of the screen so length of you. There we have our uh circle in the center, where the distance is zero, so it's all black and on the corners, the distance is one. So it's all white you're probably wondering what this bit of code does right here um at the top line.

B

um That is just normalizing the pixels. So that zero zero is in the middle and then one one is in the top right negative one negative one in the bottom left in this performance, I'm going to be using a specific technique, called ray marching which allows me to create 3d space in this 2d screen using linear algebra.

B

So are you ready, dude yeah? Let's do.

C

This cool here we.

C

Go.

C

um

A

So.

A

This.

A

So.

A

So.

E

So.

E

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

So.

A

My.

A

So.

A

So.

A

Foreign.

A

You.

A

So.

A

Foreign.

A

um

A

Too,.

A

um

D

This.

D

um

D

Oh.

D

Now.

D

Now.

D

Now.

D

Now.

D

Now.

D

So.

D

So.

B

So.

D

So.

D

My.

D

So.

D

So.

D

So.

D

So.

D

Do.

D

So.

E

Now.

E

Now.

E

Now.

E

Now.

E

Now.

E

Now.

E

Now.

E

uh

A

um

A

So.

A

Wrong.

A

My.

A

Wow.

E

Foreign.

E

You.