The difference between live coding and traditional programming is funny. essentially they are both the same, predefined functions, known variables and different ways of variable manipulation that changes how things are from input to output. The difference stems however in how manupilatable this output is and a chance to completely change the output of a function based in one keyboard symbol to get a string of completely different outputs that were not exactly planned by the function creator is even more interesting.

“Rejected the use of prewritten code and structures” in favor of “acting in the moment, responding to context… developing a structure as we work, continually creating and resolving tension”

ALGOBABEZ (Shelly Knotts and Joanne Armitag)

Live coding brings the definition of expected/planned output to a different form of adapting to the user response. Not a coded reaction, not an expected reaction, but a way of letting a human determine the next course of action in a way that combines the viewer’s reaction with the artist’s to create an instant change that combines both together. It’s like the authors said,

Yet, for all that computing neglects— those bodies hunched over keyboards and mice, at their desk- and- chair sets in the offices of the world— the live coding performer is unavoidably embodied (“made flesh”)

Live coding brings the person manipulating the code to life in a way traditional coding does not.

Something else that also stood out to me in this chapter is comparing the live coding to a performance. If we think about dance, then all traditionally dancing is the same as traditional programming, but maybe more contemporary, like an unpracticed dance performance, a free dance performance with code. The dancers know the dances, the programmers know the code, but neither know the trajectory of the performance

liveness as a connecting principle for exploring the relation between live coding (performing with programming languages) and live art (performing with actions).

SOUND COMPOSITION

For the sound composition, we used the chopped sample from Magnetic-ILLIT as the main reference. Inspired by the arpeggio in its intro, we chopped off different parts of this sample to create a new composition with original rhythms. The music first starts by reverbed the piano sound, using TidalCycle functions like jux rev and off, and slowly builds up by adding elements like drums and hi-hats. The main melody is composed of different ‘beep’ sounds that were sliced from different parts of the arpeggio sample, thereby creating more glitchy aesthetics. We mostly focused on creating a combination of sounds that go well together by carefully curating different samples and trying different techniques to handle the long sample.

VISUALS COMPOSITION

For the visuals, we first started with an image, as we did for our first group project. We then worked on adding different effects that transformed our piece from a red building to a variety of different shapes and effects.

We ran into some struggles with the image loading, and thanks to Professor, we got this code, that helps load the image on the screen:

image = document.createElement('img')
image.crossOrigin = "anonymous"
image.src = "https://blog.livecoding.nyuadim.com/wp-content/uploads/photo-1711873317754-11f6de89f7ae-scaled.jpg"
loaded = () => {
   s0.init({ src: image })
   src(s0).out()
   console.log("Image loaded");
}
if (image.complete) {
   loaded()
} else {
   image.addEventListener('load', loaded)
}

Don’t forget to let flock load before running anything! >> You can check from the browser console.

We started by using .modulatePixelate(osc(10), 200).saturate(0)

Where the modulatePixelate showed interesting effects and the saturate(0) removes the colors which we reintroduce later with Colorama by choosing our colors and gradients that are different from the ones in the image. We also use mult and blend to add styles remove parts of the screen and change the effect, repeat for our main audio interaction between other effects.

We’ve played with gradually reducing the numbers in the pixelate function to simplify our visuals. Our plan is to incorporate it as the final function, making it easier for the next group to take over from us.

WORK DIVISION

The work was divided by nature into audio and visuals, when we first met, with Fatema and Marta working with visuals and Jeongin working with audio, we found that that’s where our interests lay and how it worked best for our group. Marta and I worked on different visuals and met to try various effects and see different possibilities for how we could develop different styles. Then we worked with Jeongin to align our effects, adding different interactions, and ccv audio effects to align the visuals with the audio and form a set style for our live-coding piece.

Live Coding, tidal cycles to be specific, is a series of algorithms made to manipulate a series of sounds for us to listen to. It is interesting, however, that if we look at the numbers being manipulated we will see, as humans, a drawing like a textile that we cannot read.

computational algorithms and patterns culturally situated in textiles, music, and dance seem closely related

A pattern is a textile we stitch, a table we set, an algorithm we loop through even an etiquette we learn. Hence the relationship between algorithms, patterns, and music may be something we have long realized, like many other algorithms we use today. It is interesting, however, to relate and compare those patterns together. Following patterns of a stitched rug, replacing, maybe colors with notes? swapping between the 2 mediums is a beautiful revelation, especially when connected with live coding, and creating on the go; you can change your carpet design at any moment you wish.

Looking away from the binary algorithmic representation of how things work, bringing in the “what if”. Live coding will bring a what-if question with every new line you will begin to question, doubt, or not like 100%. There is always a better version, a different wave pattern, a frequency, or an order that will work, so what if this algorithmic manipulation works better, what if this order of notes (or colors in the rug) works better. What if it also works better now but never will work again, at least in the same way.

The save button is not a familiar concept for a live coder. It is scary writing something you cannot save. It is even more scary knowing a well-practiced performance piece will never be played the same way twice. Recordings are like drawing on a plate and hanging it, while live coding is like smashing it to let out all the pent-up energy. It is scary sometimes, but that is an artistic scary that comes with knowledge. You threw away your plate, but the next one will look better because you learned something today. Your code is not meant to be saved, but u do learn, remember, and keep experiences and memories alive, even if u have no digital 1s and 0s to show for proof.

Art and music. Thinking about art and music as 2 different, unrelated terms is interesting. Not in ways where some say they are the same exact thing, but in a way that the way I define art is a self-expression made tangible. Be it Music, painting, digital art, or even writing, they are all forms of art, each in their own way, and each intertwines together in some way or another.

Close links between music and visual arts are not only to be observed in the works of musicians/artists trained in several disciplines. An interest in the respective other art form undoubtedly went hand in hand with the explicitly interdisciplinary questions that became increasingly frequent, in particular in the context of the emergence of abstraction in painting and later in film.

Justin Hoffmann, Sandra Naumann

The quote above explains a lot about what it means to be an artist, what it means to be led by a creative outburst, and what it means to be yourself in a different light combining, techniques to make a boom.

Personalities

One thing that really stood out to me, however, is personality/self-expression, or publicity and method of publicity. I feel like, personally, when I think about funky, crazy, or cool, I will not think about a writer or a poet, it will usually be an artist, a dancer, or a musician. However, looking into it a little bit deeper, Any artist is someone who spends life looking for an untraditional way of self-expression, a writer, however, would not interact with the crowd, or the people as much, others have a form of self-expression that shares with those around them, that makes them stand out, look different, or mostly be themselves in a world where they don’t care about judgment.

SO WE DID

Art, as I said, I feel is a form of self-expression, the author talked often about weird paths that artists took, about personalities they chose at a time of the day when they get to be a different version of themselves,

For a whole series of artist-musicians/musician-artists, the principle that a good punk song only needed three chords applied just as much as the do-it-yourself attitude.

They started punk, they forgot rules, prevented disciplines from holding them back, and helped the hidden parts in themselves show.

Artists will use whatever they have, from technology to music to text, material, code, and junk, to find expression and creation, that is what I see an artist as, and it will forever remain interesting how different everyone will combine the tools they have. From visuals to music, we all find the room we want to grow in. And it will always remain interesting that one day, music and art weren’t one from the other; that is the only way I can see it today.

Video and Inspiration

My Inspiration, my process, my parts, all came in waves…

First, I saw one of the previous live coding projects on the IM show case recordings on the screens on the side in class, this one was bubbles moving around, I thought they looked cool, and I started trying to recreate them. I am not sure what happened along the way but the ideas changed, my starting point takes a little from the bubbles I think, not sure how much, but there’s something there. Ins

I added a shape(4), repeated it and edit the scale and number of repeats until i got squares all over my screen, then

shape(4, 0.9)
  .color(150)
  .colorama(()=>(cc[0]))
  .colorama(0.7)
  .repeatY(()=>(cc[1]*8))
  .repeatX(()=>(cc[1]*16))
  .modulate(osc(10,0.05,0.000001)
    .modulate(noise(10)),()=>Math.sin(time*0.01+0.1))
  .out(o0)

For the Audio, I used a “superpiano” with a hi hat, the piano triggered the colorama transitions and the hi hat triggered change in size as seen here

base = do
  d1 $ slow 1 $ n (scale "egyptian" "7 4 1 6 3 0 7 4") # sound "superpiano" # sustain 5  # room 0.4
  d2 $ slow 1 $ ccv "89 50 13 76 38 1 89 50" # ccn "0" # s "midi"
base2 = do
  d3 $ slow 2 $ s "hh*4" # speed 2 # gain 2
  d4 $ slow 2 $ ccv "15 30 60 90" # ccn "1" # s "midi"

Then I added this layer for an extra effect:

tabla = do
  d5 $ s "tabla:14 ~ ~ ~" # room "<0.4 0.2>" # gain 2
  d6 $ slow 1 $ ccv "<1 6> ~ ~ ~" # ccn "2" # s "midi"
osc(2,0.001,1)
  .modulate(voronoi(()=>(cc[2]*127),0.3,0.3), 10)
  .brightness(0.3)
  .out(o1)
src(o1).mult(o0).out(o2)

First one is the voronoi shown without mult and the second one is using mult to combine the 2 together, The voronoi was aslo affected with the tabla sound, to

Then, I was talking to classmates, trying to explore sounds, make my sounds better (I struggle here its a little scary), but one of the sounds shared, the second I heard it, my brain went GLITCH, so here came my closing part.

When I did the glitch I could not help but think of retro vibes. An old TV glitching to be exact. So, I decided to get Images from different Egyptian retro and add them with a sound of their own. the images would pop and disappear with the sound as shown below; with a TV pixelate when the images popped.

The code I used for the sound with the images.

tabla_trigger = do {
  d7 $ qtrigger $ filterWhen (>=0) $ slow 2 $ seqP [
    (0, 1, s "tabla:14*2"), -- 1 -- tv
    (1, 2, s "tabla:14*4"), -- 1 -- tv
    (2, 3, s "tabla:14*8"), -- 2 3
    (3, 4, s "tabla:14*16"), --3 4
    (4, 5, s "tabla:14*8"), -- 5 6 7
    (5, 6, s "tabla:14*4"), -- 8 9 10
    (6, 7, s "tabla:14*2"), --11 12 1
    (7, 8, s "tabla:14"),
    (8, 9, s "tabla:8")
 ] # room 0.95 # gain 2 #  up "-2"
}
tabla_imgs = do{
  d8 $ qtrigger $ filterWhen (>=0) $ slow 2 $ seqP [
    (0, 1, ccv "1 0"),
    (1, 2, ccv "1 0 1 0"),
    (2, 3, ccv "2 0 2 0 3 0 3 0"),
    (3, 4, ccv "4 0 4 0 5 0 5 0 6 0 6 0 7 0 7 0"),
    (4, 5, ccv "8 0 8 0 9 0 9 0"),
    (5, 6, ccv "10 0 10 0"), --8 9 10
    (6, 7, ccv "11 0"), --11 12 1
    (7, 8,  ccv "12"),
    (8, 9, ccv "13")
  ] # ccn "4" # s "midi"
}

do
  tabla_trigger
  tabla_imgs
  d5 silence
  d6 silence

an example of one of the images popping:

shape(4,1.1,0.001)
    .color(0.8, 0.8, 1)
    .layer(osc(100,0.01,0).mask(shape(4,0.3,0.001)))
    .modulate(noise(10))
    .pixelate(128,128)
    .layer(s4)
    .layer(s5)
    .out(o3)

Finally, as I finish the popping images comes the glitch part. As I end the images, i change the colorama input to 1 as shown on the right, on the left is an example of the glitches used in this part.

I increased the glitching for this part as the sound progressed, here is an example of the glitch code:

src(o0)
    .blend(src(o0).scale(.999)
    .modulatePixelate(noise(1,0.01).pixelate(16,16),1024),1)
    .out(o2)

and the sound I used for the glitch:

glitch = do {  d7 $ qtrigger $ filterWhen (>=0) $ slow 2 $ seqP [    (0, 1, s "feel:6"),    (1, 2, s "feel:6*2"),    (2, 4, s "feel:6*4"),    (4, 6, s "feel:6*8"),    (6, 7, s "feel:4")  ] # room 0.95 # speed "4" # gain 1.3 # squiz 1.1 # up "-2"}

For the glitch I wanted the sound and everything to disappear with its end, like a glitch ending, then I faded out the image above on the right, using a slower pace of the sounds I had at first to end the old TV and just close everything.

“Not knowing is not only to be overcome, but sought, explored and savored; where failure, boredom, frustration and getting lost are constructively deployed.”

I feel Like this quote is something I one tries to understand on a deeper level to be able to live code. The idea of knowing for science and not knowing for art is sometimes bigger than just a know-how and a no-how, like a balance between both is also at some level required. The author talked in the reading about the idea of knowing how something works is not exactly required for creating in a live coding environment; that is is more about the exploration, the errors, the questions raised and the answers (or possibly answers?) found. It is about feeling the music in some way, feeling the visuals and trying to find a common ground for which you can go forward.

However, as the authors explained,

“Both ancient weaving and live coding involve a live, embodied process of decision-making and knowledge activation that operates in excess of or between the lines of conventional notational systems.”

the know how is also always in a way required. The idea that some sort of knowledge is required, but experienced level knowledge is not. That by live coding you need to keep the next part of the carpet unknown to keep going, yet you base what is to come on what was, and what is to come is what bases layers and layers of code to reach the end of the carpet. That the knowledge of how to code, how to weave, at a basic level, needs to be acquired before live coding, that some idea of color and music needs to be there. But that is the idea, that knowledge of some is all that is needed for one to have the ability to live code. It is more a talent of how to build layers over one another, the unpredictability and the block of advanced scientific knowledge that is needed.

Forcing yourself out side the box of science and thinking else where. That is what live coding needs, that is what comes from pushing yourself, exploring something new and seeing the things you know from the things you do not know to find an area where art shines.

GLICOL (an acronym for “graph-oriented live coding language”) is written with rust. With a bit of visuals and an amazing working environment, let’s get those beats popping… I did not actually master the program but.. we try…

So Important things first,

Where did this begin

Qichao Lan, the developer of this platform, is a computer musician and audio programmer in his early 30s (probably around), specializing in Rust and web audio, live coding, and music AI. His inspiration behind Glicol as described by the University of Oslo- where he did his PhD – is as follows:

“Qichao Lan wanted to make music live coding accessible to anyone. As part of his PhD, he made a music language and an app easily accessible in a web browser.”

Silje Pileberg – RITMO Centre for Interdisciplinary Studies in Rhythm, Time and Motion

He wanted to make it more accessible for people to understand music, all while making it fun and enjoyable. It is true that today many people surround themselves with music not knowing where it originated, he was trying to connect these 2 dots. You will see as you read on, I feel like Glicol relies a story of someone who genuinely wants to teach you something about what he loves. He wants to share his passion, make people connect, innovate, try, create, and most importantly understand. He made use of his education and passion, he is not much older than we are. Glico is made using Rust programming language, and javascript, and can use both js and meta programming languages to code within the environment. Its cool go play around.

We Innovate

https://glicol.org/

I wanted to talk here about 1, the website, 2 the documentation, 3 the references, and 4 the experience.

Website

Honestly, in my opinion, the website has this appeal of welcomeness, with the colors, the language, the jokes, and the way different parts of the website were organized, it was all very welcoming. How often do you see that!

I also really liked the fact that the website has the option to play the audio and animation on the square in the website while reading explanations and seeing the output on the spot — almost like an innovation of the “run code” button that opens a new page to run the code.

Documentation

Glycol had, essentially, the readme — the required documentation — a demo, and a tour on the website.

The tour explained concepts almost like you are in class listening to your professor, following steps to genuinely understand each of the functions being used and what they mean. It is definitely one of the nicest presentations on these topics that I have seen.

The demo, on the other hand, did not have as much explanation, but it had combinations, that could be used to code. It is nice to be able to see how the codes would go together, especially as someone new to a live coding environment, or as someone new to music development or programming.

One issue I had with what was on the website, is that it wasn’t particularly enough… I guess references (check references section) exist and they explained most needed concepts, but it felt incomplete in way.

References

The references they had were really really cute, but, I wish it could be searched up somewhere other than the consol. Some document or another. because as fun as it is to read it on the consol once, I don’t want to do it every time I forget.

Basically references are shown on the consol in 3 ways:

  • You type d() to get the keywords available
  • You type h() to get a specific explanation for any keyword
  • You press Alt+D with the cursor on the keyword you need help with and it will show a short help for this keyword

I honestly think Alt+D is an amazing addition, the other 2 not as much if I am being honest

Experience

After exploration, attempts at understanding, and a failed attempt to replicate a heartbeat using a sin wave, here is what we got…

WebEditor

// Hello world note:
o1: sin 440

// playing around
~o1: speed 4.0 >> seq 60 _ 50_2 _ >> sp \808bd;

~a: choose 60 60 0 0 72 72
~o2: speed 2.0 >> seq 60 ~a _ 48_67 >> sp \blip

~o3: speed 3.0 >> seq _ 10 _ _~a >> sp \808bd

// combining examples with my code
~gate: speed 2.0 >> seq 60 _60 _~a 48;
~a: choose 48 48 48 72 0 0 0
~amp: ~gate >> envperc 0.001 0.1;
~pit: ~gate >> mul 200
~o4: saw ~pit >> mul ~amp >> lpf ~mod 5.0
~mod: sin 2 >> mul 1.3 >> add -0.2

out: mix ~o.. >> plate 0.1

// js example
~x1: seq 60 >> sp \##s()# // random pick
~x2: seq _60 >> sp \##s(0, 20)# // random pick range 
~x3: seq _ _60 >> sp \##s(42)# // select
~x4: seq _60 _ >> sp \##s("in")# // filter word
out2: mix ~x.. >> plate ##1/10#

// basic fm notes 300sin(0.2)+1000
~fm: sin 0.2 >> mul 300.0 >> add 1000.0
out3: sin ~fm >> mul 0.1

// final output
~b: choose 100 60 20 0 70 40
out4: sin 0.6 >> mul 5 >> add -2.4 >> speed 2.1 >> seq ~b _ ~b

Blooper

So-called “live coding'” as declared by the RITMO Centre of the University of Oslo. (https://www.hf.uio.no/imv/english/research/news-and-events/events/disputations/2022/lan.html)

I just wanted to talk about how I got to using GLICOL. I want to say know the dependencies before you use any open-source software, please.

I first started with Mosaic. Mosaic needs a lot more dependencies than I thought it would, especially for a Windows user. The documentation is also a little hard to follow – if you do not have someone who already knows how to make it work explain that, it is not easy to figure out. After I spent hours between downloads, figuring out errors and 500 different “instructions” websites, the Mosaic ofx project was not working, and then I decided it was not worth the time to keep going with it.

Switching is hard, because Mosaic seemed like a really powerful platform, that could need a learning curve, but also allows you to play around without fully knowing what is going on. This is an intro video to explain what I am trying to say > Mosaic Intro.