WEBVTT 00:00.000 --> 00:05.000 [Automatic captions by Autotekst using OpenAI Whisper V3. May contain recognition errors.] 00:08.231 --> 00:20.659 So, hi, everyone. Welcome to the C2HO workshop on live coding with Glico. My name is Qi Chao, and I'm the creator of Glico Language. So, to 00:20.679 --> 00:30.265 get started, I would like to give you a little bit of background, especially the theoretical parts of live coding. So the first question 00:30.405 --> 00:44.674 is, what is live coding? And I highly recommend you to have a look on this book called Live Coding. It's online and you can download it as PDF or 00:44.934 --> 00:57.855 other formats and it's free to read it. So from the book, we can find some definition of live coding. So the very direct definition is live coding 00:57.955 --> 01:08.164 is writing software in real time, changing program while it is running with screen projection for audience participation. And also live 01:08.204 --> 01:21.155 coding emphases improvisation. And we need to challenge self-understanding through public performance. And we also focus on 01:21.235 --> 01:34.505 real-time interaction. And the ultimate goal of live coding is to make software live through continuous evolution. So this is a typical scene 01:34.645 --> 01:45.059 of live coding. Basically, the performers write code in real time, and the code is projected to the screen. But today, I would like to invite you 01:45.119 --> 02:04.055 to think different with critical. We know that the sound is basically the physical vibration. If we look at the speakers here, we usually 02:04.115 --> 02:16.062 control the vibration of the speaker by sending a lot of commands with electric signals. And we can understand this kind of signal as float 02:16.142 --> 02:29.125 numbers, 0.1, 0.3, minus 0.2, for example. And we can use code to describe these numbers. So I would like to borrow the definition of 02:29.385 --> 02:31.805 music as organized sound. 02:35.806 --> 02:45.634 And I would like to define live coding as the art of organizing numbers. So this is the philosophy behind Graco. So if you look at this diagram, 02:45.894 --> 02:58.084 you will see it's basically an audio graph. So actually the meaning of Graco is graph-oriented live coding language. And you can write a lot of 02:58.384 --> 03:13.453 nodes and organize these nodes, organize these numbers to get the final output. So I would like to invite you to visit this website, and we are 03:13.493 --> 03:25.842 going to write code to make music on the website directory. It's called greekode.org. So once you can visit the website, you can try to run a code 03:25.882 --> 03:27.383 to see if you get some sound. 03:36.474 --> 03:40.417 So as you can see, I can change some numbers, modify the code in real time, 03:44.721 --> 03:48.144 and the music will accordingly change. 04:00.891 --> 04:07.555 and there are a lot of demos on the website for example this Pink Floyd riff 04:11.176 --> 04:19.641 so it's like you have a free synthesizer to play with and this famous song by Kraftwerk 04:26.204 --> 04:28.285 and you can change the code in real time 04:32.167 --> 04:37.490 to add a different track 04:38.531 --> 04:49.337 and a lot of different songs like with only 15 lines of code and even fewer actually there are some empty lines you can create some music like this 04:56.238 --> 04:58.959 You can create, for example, techno music like this. 05:04.121 --> 05:09.284 You can add different tracks by common or uncommon things. 05:21.843 --> 05:36.388 There are more examples. Maybe I should show this one as well. So we'll go to this larger code editor. So this is another song by Kraftwerk. 05:43.567 --> 05:58.769 So as you can see, there are a lot of things you can do with Glico. So let's get started and look at different nodes and learn how to use them. So if 05:58.809 --> 06:13.737 you are on glico.org, please click this solo, and you will see this editor. And if you are on Google Chrome, you can click the menu and open 06:13.777 --> 06:23.642 the developer tools. And you can also use some keyboard shortcut, but the easiest way is to click here. 06:27.668 --> 06:38.731 And also if you can maybe finding that. So since we are all on the developer tools, now the first thing we can do is to actually read the 06:39.211 --> 06:51.455 documentation here. And it says you can type etch with a parenthesis and enter. So you will see a lot of, you will see more documentation. And we 06:51.495 --> 06:54.956 can also type show all nodes 06:58.908 --> 06:59.733 with a parenthesis 07:05.859 --> 07:20.171 So, to write your first line of code, you should think of Greco as a door or as a synthesizer. So first you need to have a kind of outlet or output 07:20.451 --> 07:33.542 point. So you can have any name for this output. It can be output, it can be out one, out two, as long as it starts with a lower case letter. And you can 07:33.602 --> 07:45.150 combine lowercase letter with this underscore and numbers. So all these are valid names. So we just call it output one, for example. 07:49.833 --> 08:07.450 And then I will write the first node, which is IMP1. So IMP is, IMP means impulse, and IMP1 means, the first number means the frequency of this 08:07.530 --> 08:12.875 impulse signal. And I will just run the code and you will see, understand immediately. 08:15.939 --> 08:27.043 So you hear this kind of popping sound. So you can modify the code in real time. For example, if I change one to number two and press command enter 08:27.123 --> 08:33.166 again, you'll hear it more frequency. And if I change it to 0.5, it's slower. 08:40.683 --> 08:52.296 So let's change it back to one. So this is like, if the number is, the first parameter is one, so it happens every second. And if it is two, then it's 08:52.476 --> 08:53.958 two times per second. 08:57.051 --> 09:11.860 So the level of this signal is one and you can only have this unit signal every second. And what if I add a different node called multiplication, 09:12.520 --> 09:31.501 mul, and let's make the level half. And you can see the level becomes half of the previous one. So basically, if you think of the first node to 09:31.602 --> 09:39.805 generate code like 1.0 and a lot of zero, then after one second, 09:43.687 --> 09:55.546 you have another one, right? And on the second node, it will just take the numbers as the input and make some modification to it, which is 09:55.666 --> 10:03.873 basically to make it half the value. And all the timing is the same. 10:07.503 --> 10:21.815 so we can actually use this mechanism to make music so if you type d with a parenthesis in a console you will see a list of nodes and samples 10:24.738 --> 10:32.064 can you see this table in your console d with a parenthesis and then enter 10:35.290 --> 10:56.264 Okay? So the next node I will introduce is called SP. So I can write code like this. SP means sample playback. So SP, and I will just copy a sample 10:56.324 --> 11:04.710 name here, maybe seed. So I have a slash, backslash, seed, and run it again. 11:08.809 --> 11:21.575 Then I use this impulse signal to trigger the sample playback. So what this sample playback node does is it will just take any non-zero value 11:21.735 --> 11:34.461 and trigger a sample playback. So if you receive one, it will just trigger the playback in the normal pitch. And if you receive 0.5, it will 11:34.481 --> 11:41.745 just play half of the pitch. So you can change this to different samples. 11:48.748 --> 11:51.910 Change it, for example, to another one and run it again. 11:57.014 --> 12:06.141 So since we can all get sound right now, we can try to change different things. For example, I can change this to two. 12:08.883 --> 12:20.673 And so as you can see, like the frequency changes, so it's triggered more often. And if I change it to 0.5, become like slower. 12:26.127 --> 12:30.891 And I can also change this number, change it back to 1.0. And 12:35.674 --> 12:44.921 you can see the pitch changes. So there are a lot of things you can change. For example, you can change it to a different sample. For example, this 12:45.202 --> 12:45.402 RM. 12:52.645 --> 13:00.009 You can even change the output name, for example, Alt 3, whatever. But it will just be the same. 13:05.052 --> 13:21.159 So any questions so far for this sample triggering? Yeah? They don't have to be writing the same line, right? No, no. But good practice is you 13:21.259 --> 13:32.174 write different tracks like this. For example, I can have a different sample playback like this. One SP, for example, echo. 13:35.529 --> 13:46.900 So you leave an empty line in between different blocks, different tracks. So as you can see, I can use command slash to comment it out and 13:46.920 --> 13:52.325 then run again. So this track will be commented out. So no sound will be played anymore. 13:56.014 --> 13:56.314 So 13:59.597 --> 14:11.065 there's actually a shortcut to trigger sound and make it more colorful, which is to use the node called seek, which means sequencer. And I will 14:11.085 --> 14:12.466 start with seek 60. 14:18.892 --> 14:19.052 And 14:21.895 --> 14:32.947 if you want to check the documentation of SIG or the reference of this node, you just move your cursor in between the node and type ART D or 14:33.048 --> 14:40.636 option D on Mac, ART D on Windows. And then you will see the documentation in the console. 14:45.120 --> 14:58.692 But I will just explain this node. So you can have a lot of nodes in this sequencer node. And if you have 160, it will just trigger the sample 14:58.872 --> 15:06.318 playback like the impulse node. But if you add another 60, 15:11.880 --> 15:28.750 two notes two notes will take the one bar and will make it faster so these two notes will try to divide one bar and try to divide it equally and you 15:28.790 --> 15:34.194 can also use underscore to denote rest so if i write it like this 15:42.284 --> 15:50.323 So I can change this underscore to 60. You'll see a difference. Oops. 15:54.873 --> 16:08.958 and you can change so this one bar of notes this one bar of music musical time is actually divided by the number of notes and this is actually 16:08.978 --> 16:21.162 called compound notes and you can actually combine underscore with numbers to to create a compound note so that this one bar is actually 16:21.182 --> 16:31.049 divided still into four pieces but each piece but this second part this second 60 will be played in the offbeat 16:39.855 --> 16:44.578 maybe i should make it like more obvious like this one 16:58.204 --> 17:02.226 So just maybe make it simpler like this. 17:12.533 --> 17:23.921 So if you want to kind of control the volume a little bit, you can actually multiply with a number. So you can try to make this track quieter. 17:35.500 --> 17:41.662 You can also add a different node called speed. I'll just start with speed 2.0. 17:44.702 --> 17:51.664 And you have to write speed before the seek node because this seek can take speed as the input. 17:57.333 --> 18:01.236 so you can make it faster or make it slower 18:11.183 --> 18:11.943 make it quieter or 18:14.945 --> 18:15.486 make it louder 18:23.957 --> 18:29.032 And if you want some random nodes, you can do some things like this. 18:32.715 --> 18:50.380 you write a tilde A or tilde B or tilde C is fine but tilde A you can write in this syntax choose for example 60 or 72 I'll just use one single note here 18:50.640 --> 18:59.163 to make it easier to understand so it's just a random note but if I make it really fast 19:06.364 --> 19:13.870 And if I place a 0 here, it would randomly choose 60, 72, or 0. 19:17.293 --> 19:22.497 So it becomes rhythmic. And if I increase the speed, 19:25.579 --> 19:39.345 it starts to become more and more interesting. You can still use the underscore and combine it with this tilde letter. So you can add a 19:39.365 --> 19:54.093 different random note here, maybe 67. Okay, let's 19:54.153 --> 19:57.295 continue with what we had last time. 20:00.322 --> 20:12.513 So we just write 60 here. So I'll start with this template and start to modify the sequence a little bit. So first I will add another 60 so the 20:12.593 --> 20:14.375 sequence will become faster. 20:23.652 --> 20:30.299 And then I want to make the second and the third beat to be the offbeat. 20:33.142 --> 20:49.475 And there's a very typical trick in, for example, trap music. You can play a lot of You can play a lot of close hi-hats in the last beat. So here I 20:49.515 --> 21:00.123 want to play 4 and 60 together. And also, for the second part of this beat, I should write 60 with 1, 2, 3, 4, 5, 6, 7 underscores. 21:10.000 --> 21:20.486 Does that make sense? Because you want to divide the last part based on the total number of underscores and the numbers. So if you want to play a 21:20.526 --> 21:25.328 lot of hi-hats together in the last beat, you should write it in this way. 21:29.451 --> 21:33.593 And we'll just add another track to it. 21:40.689 --> 21:41.550 for example seed 21:45.993 --> 21:56.540 and here i actually want to introduce you a new node called lpf which is low pass filter if you press option d you will see the documentation for 21:56.560 --> 22:11.051 that it actually takes two parameters so the first is the cutoff frequency let's use 1000 here and the second is the Q value. 22:15.120 --> 22:27.171 So if you are not familiar with sound synthesis, low pass filter basically means you just let the lower part of the frequency to go, and 22:27.211 --> 22:39.362 you just cut off all the high pitches. So if I write a really small cutoff value, it will cut almost the most part of the sound. 22:45.533 --> 22:46.813 It's a cutout frequency. 22:51.715 --> 22:53.135 Yeah, resonance of the filter. 22:55.896 --> 23:00.297 So I probably make it a little bit faster, full. 23:05.695 --> 23:09.596 and i can use a tilde maybe called the modulation 23:12.057 --> 23:25.441 and then i can create a sine wave oscillator to moderate the signal this is just for for uh for showing you uh the q value what what what the q value 23:25.481 --> 23:30.103 will influence the low pass filter but i will cover the sine wave later 23:33.462 --> 23:44.784 you can see the low pass filter start to change so if I increase the Q value 24:03.433 --> 24:06.294 you have a different taste of the low-pass filter. 24:14.958 --> 24:28.604 But in order to make it more like normal mixing, you can actually use Tilder in front of each track like this. And then in the end, you create 24:28.684 --> 24:33.745 this kind of mix. It's tilde t with dot dot. 24:38.048 --> 24:50.936 So it's like a syntax sugar. So you use mix tilde t dot dot. You will just take tilde t2 and tilde t1, and it will just ignore tilde mode, for 24:50.976 --> 25:01.679 example. So if I have a tilde x1, it will not be played because it's not taken. 25:06.480 --> 25:12.082 But if I change it to T3, it will be taken into the mix. 25:16.243 --> 25:22.245 So after you mix it, you can actually add a reverb together for all of it. 25:28.180 --> 25:40.546 I can increase the mix of the reverb. In my opinion, 0.1 is enough. You can also type help with the quotation mark plate to see the documentation. 25:55.971 --> 26:10.657 But it's easier to use option D anyway. Sorry? Oh, yes, yes, yes, yes, yes. It's a Datoro reverb algorithm. Yeah. 26:21.678 --> 26:28.086 And there's only one parameter, which is the mix. So the mix between dry sound and the wet sound. 26:32.347 --> 26:48.538 so in live performance actually a trick to use is to add a multiplication in each tilde check for example i can multiply multiply it with zero and 26:48.578 --> 27:00.666 it will mute mute it completely so this is very useful so then you have this it's like you have a mixer so you can control the volume of each 27:00.686 --> 27:01.346 different tracks 27:04.386 --> 27:09.411 So I can, for example, really easily bring back the drum, the kick. 27:13.655 --> 27:18.761 And maybe make the bass a little bit quieter. 27:25.928 --> 27:37.177 Okay, now let's move to a little bit of sound synthesis. So that's enough for the sample playback. Let's move to some sound synthesis basic. So I 27:37.197 --> 27:50.588 will start with this hello world. So if you can go to glico.org and click tool, so you will see this hello world example. So be careful of the loud 27:50.608 --> 27:59.917 sound. When I click run, you will hear a sine wave. like this. And you can change the pitch, 28:03.140 --> 28:10.007 change your frequency by, for example, lower the number and, for example, make it quieter like this. 28:13.070 --> 28:27.475 You're already familiar with the syntax. so just skip this hello world and you also know the basic connection and the reference now this is what 28:27.755 --> 28:38.539 was called amplitude modulation so you can moderate the volume of this sine oscillator and here you 28:41.580 --> 28:52.583 I will start to explain how this modulation works. Because as I mentioned, the output, we are basically organizing numbers, right? So 28:53.104 --> 29:07.328 you should know the inputs of a node and the outputs of the same node. So the output of the sine node has a range which is from minus one to one, and 29:07.348 --> 29:12.171 it's a float number. So if I scale it, multiply it with 0.3, 29:15.113 --> 29:29.987 the range becomes minus 0.3 to 0.3, right? Then if I add a float value to it, the range becomes 0.2 to 0.8. Does that make sense? 29:36.272 --> 29:49.341 And then if you feed this signal to the parameter of this multiplication, so you start to control the amplitude of this sine 29:49.401 --> 29:51.523 oscillator. So it sounds like this. 29:56.186 --> 30:02.151 Does that make sense? Yeah. 30:04.449 --> 30:15.001 I can control it here. I can add another node. 30:15.461 --> 30:22.169 But you can see from the scope, it start to modulate the signal. 30:26.687 --> 30:41.460 and we have covered sequencer and samples and let's look at FM synthesis you can control the frequency of this sine oscillator so just make it 30:41.800 --> 30:44.042 quieter start really quiet like this 30:52.528 --> 31:05.259 so if I change the number like the modulation frequency you 31:05.299 --> 31:08.141 start to get this kind of bear-like FM sound 31:15.368 --> 31:27.106 and we also have noise node and start with very low value make it louder 31:32.129 --> 31:40.192 and you can also use the low pass filter to it as we covered before like this 31:49.201 --> 31:51.522 You can use this for sound design. 31:54.242 --> 32:06.205 And we also have envelope. So if you can recall, the impulse note will generate impulse signal. And this impulse signal will trigger the 32:06.545 --> 32:11.526 percussive envelope with a tech value of 0.001 and a decay value of 0.1. So if I run it. 32:23.925 --> 32:36.799 You see that the envelope is controlling the amplitude of this noise node. So you start to get this sound. So I can, if I have a longer attack, 32:38.361 --> 32:40.343 but shorter, much shorter decay, 32:43.446 --> 33:02.069 the sound will have a different shape. We can actually visualize this envelope if we change the outputs here. Let's see if I want to have like 33:03.509 --> 33:15.671 one second of attack. and four seconds of decay, then you understand immediately what this percussive envelope means. And I also need to 33:15.732 --> 33:19.573 change the frequency of the impulse signal. So 33:22.435 --> 33:25.876 you will see start to trigger something and then 33:28.677 --> 33:29.678 go to a decay phase. 33:32.782 --> 33:45.157 you can imagine how this trigger controls the multiplication node, like this. 34:04.484 --> 34:15.707 Actually, I once managed to design a sound like this. It's a clock gear sound design. 34:21.649 --> 34:27.871 When you manage to use all these nodes, you can design sounds if you like. 34:40.723 --> 34:45.448 You can also build 34:45.468 --> 34:53.477 your own effects like this. So you can actually do some kind of delay like this. 34:58.740 --> 35:13.171 So this is a little bit complicated, because as you can see here, this tiered O makes all the tiered T stuff, let's call it output, or premix, or 35:13.191 --> 35:14.712 maybe like mixed signal. 35:19.396 --> 35:27.179 And this mixed signal has some delay. The delay is calculated in milliseconds. 35:30.363 --> 35:35.508 We scale the signal a little bit and feed it back to the mixed signal. 35:38.211 --> 35:47.180 Does that make sense? It's like you create your own delay effect. You can change the value here. It will sound completely different. 35:53.672 --> 35:55.299 So maybe this delay is too much. 36:03.328 --> 36:15.816 and we have a different type of node bd and square things but you can also easily find the documentation in a console but the easiest way is always 36:15.856 --> 36:30.907 to work with samples like the one you just saw for example you can go to this mini techno demo You can use that as a kind of template to common 36:30.947 --> 36:36.854 things in and out, just like muting different tracks. 36:48.166 --> 37:02.298 So what if you want more samples? You can actually search for dirt samples and go to this GitHub repository, title cycles, dirt samples, 37:03.379 --> 37:17.203 and download the whole folder. And you can also find your own samples. but here is like some options you have already. So you can go to any Glico 37:17.423 --> 37:18.284 code editor, 37:20.844 --> 37:29.428 and I already downloaded it, so I can just go to music, third samples, and find a sample. I 37:32.429 --> 37:35.730 would just drag and drop it in the editor. 37:48.246 --> 37:54.531 So you can use any sample you like from your collection. Like 37:58.055 --> 37:58.795 this one maybe. 38:02.578 --> 38:10.125 Just jog and drop. One, two, three, hit it. One, two, three, hit it. One, two, three, hit it. 38:25.333 --> 38:33.972 so a trick to use is to use some loops so I already download some loops here so I can find some loops 38:40.040 --> 38:55.435 For example, here I have a BPM 140. So I need to use this impulse to control the speed. And I need to do some math here. In order to do math, to do the 38:55.475 --> 39:05.264 calculation, I need to use this hashtag here, 3. And only put the code after the second hashtag. 39:08.114 --> 39:26.259 and you write you do some calculation first we have like 60 seconds so the BPM is 140 so it's like beats per minute so I want to calculate beats like 39:27.399 --> 39:41.603 how many seconds does one beat takes so this is the mass I will multiply by 4 but I will just make it a frequency so it's like 1 divided by this value 39:59.670 --> 40:05.633 so you have this one track maybe I will just use another track 40:08.769 --> 40:10.852 copy the template 40:14.017 --> 40:23.352 drag and drop another one this is a different key but you can understand the idea 40:50.757 --> 41:05.665 It's a little bit out of sync. That is because the default BPM is 120. So I also need to set it to a different BPM. I will just write set BPM 140. 41:16.627 --> 41:19.748 Then you start to sync 41:22.769 --> 41:38.313 up. Yeah, I guess that's almost all of it. But there are some more difficult parts. For example, if you want to know more, here you can 41:38.393 --> 41:49.879 actually use different script language to describe. the sound all by yourself. This is a very advanced topic, but I will try to explain it a 41:49.919 --> 42:00.887 little bit. In Web Audio, the audio blocks, like each node, there are 128 numbers in each block. 42:04.429 --> 42:18.838 we like before we we wrote something like this right like 01 sine 440 and if you use this meta keyword you can actually describe the sine wave by 42:18.878 --> 42:34.882 yourself so you click you you clean the output So fill it with zeros. It's like 128 of zeros. And then you use a for loop programming, do some kind of 42:34.922 --> 42:53.167 programming, and fill in with some sign calculation. And then you get exactly the same sign 440. So just try to run it and turn down the value a 42:53.207 --> 42:54.447 little bit like this. 42:57.463 --> 43:00.045 and I can change the frequency inside 43:10.233 --> 43:22.339 so with this meta node you can start to do some DSP work. For example, you can create your own filter like this. Here you have a frequency. I 43:23.720 --> 43:36.330 actually create a sawtooth wave here. This is actually a sawtooth wave. And this is a filter. So it will sound like this. As you can see from the 43:36.350 --> 43:39.133 spectrum, the high frequency is cut. 43:45.928 --> 43:55.912 And there are a lot of experimental stuff. For example, you can use logistic map function to create random nodes. So 43:59.193 --> 44:06.296 here, if this r is 1, you only hear constant nodes. 44:10.014 --> 44:25.584 But if I increase the value to 4, you get some randomness. But this is some kind of advanced math. But you can actually search this term, logistic 44:25.664 --> 44:38.973 map. So you will get this kind of random function. So it creates some chaos. So basically choosing different nodes with this function. 44:43.818 --> 44:47.159 And also you can design, for example, a kick drum like this. 44:52.581 --> 45:03.865 You just use sine wave and you modulate the pitch. You somehow trigger it in different places. You start to get this drum, kick drum sound design. 45:05.558 --> 45:10.562 I can change the parameter a little bit, so the timbre will sound different. 45:31.553 --> 45:44.345 So you can do sound design, do some experimental stuff. So it's like you have a free synthesizer, and you can organize the number in any forms you 45:44.385 --> 45:49.529 like. You can even use, for example, Ving or VS Code to do live coding. 45:53.271 --> 46:03.438 So it doesn't have to be in browser. So I can use VS Code. So I can use, for example, AI to help me with some code. So this is the Greco CLI. 46:07.321 --> 46:16.247 So for example, this one, I didn't play this example before. But if I run cargo run, and 46:20.690 --> 46:27.855 it should be playing. Yeah. I'm now using VS Code for coding.