# Performing Code{s} (2024)

## Introduction


### About the lecturers

Joana Chicau is a graphic designer, coder, researcher — with a background in dance. She interweaves web programming with choreography — from the making of online platforms to performances or workshops.

In parallel Chicau co-organizes events involving multi-location collaborative coding, algorithmic improvisation, discussions on digital equity and activism.

She is currently an associate lecturer and PhD candidate at Creative Computing Institute at the University of the Arts London (UAL).

* [Joana Chicau Link to portfolio website;](https://joanachicau.com/)

Naoto Hieda (they/them) is an artist from Japan, based in Estonia. With a background in engineering and media art, they work internationally for theater productions and in the visual arts. In their artistic work, they question the productive qualities of coding and speculate on new forms, post-coding through neuroqueerness, decolonization and live coding. They are currently a PhD student at Tallinn University.

* [Naoto Hieda Link to portfolio website;](https://naotohieda.com/)
* [Naoto's complete work list](https://naoto-portfolio.glitch.me/)

#### Round of introductions ‧₊˚✩彡

* Your preferred name and pronouns;
* Your interests and curiosities in joining the course;
* Anything extra you would like to add about yourself.

---

### Course Description

In this course we will collectively analyse the theory behind artistic projects and approaches. We will engage in a series of practical explorations using algorithmic processes and programming languages (JavaScript) for performing a sequence of actions. At the end, students will present their works in a WIP show.

#### Timetable

* Monday: 09h-12h (Joana) and 13h-16h (Naoto)
* Tuesday: 09h-12h (Joana) and 13h-16h (Naoto)
* Wednesday: 09h-12h (Joana) and 13h-16h (Naoto)
* Thursday: 09h-12h (Joana)
* Friday: 09h-12h (Naoto)

Plus 6 hours self-directed study time.

Prerequisite is at least 80% attendance and active participation in the module, as well as implementation of an own project.

#### ZOOM LINK

Joana's Zoom Meeting Link:
https://hslu.zoom.us/my/joanachicau
or
https://hslu.zoom.us/j/7221936243?pwd=Ty9MU3dnUHBsZEd2U3N0UEp5Mno5dz09

Naoto's Zoom Meeting Link:
~~https://hslu.zoom.us/my/naotohieda~~ check email!

---

#### CoC

Introduction to code of conduct, in this session we will follow terms of participation of UAL's Creative Computing Institute (MA Internet Equalities), please take a minute to read it.

* Have fun! ♪┏(・o･)┛♪┗ ( ･o･) ┓♪
* Be respectful;
* Listen and contribute authentically;
* Reserve judgment;
* Be mindful of sharing the conversational space / share the mic;
* Racism, sexism, and other discrimination will not be tolerated;

Find here a more detailed document on ['Virtual Learning Netiquette'](https://shadesofnoir.org.uk/resources/digital-learning/).

---

## ::: Session 01 ::: Performance & Performativity

### w/ Joana (AM)

> Imagined, repeated, performed, inherited, compelled, inscribed, worn, shrugged, deconstructed.
> Iterative and disciplinary.
> Laws and norms.
> Power and repetition.
> These are key terms to understand performativity. To which I'll add consequence and risk.

[— Emily Roysdon](http://intermsofperformance.site/keywords/performativity/emily-roysdon)

#### ..⌒－→ Exercise 1.0: Collective Reading & Note Taking

⏰ 60min

→ LINK to exercise: [here!](https://pad.riseup.net/p/HSLU-performing-codes-24-keep)

References:

* [Text on Performativity by Malik Gaines](http://intermsofperformance.site/keywords/performativity/malik-gaines);
* [Excerpt from essay on Performance and Performativity](https://ificantdance.org/);
* [Text on Performativity by Judith Butler](http://intermsofperformance.site/keywords/performativity/judith-butler)

_Further reading:_

* Read more on Performative Speech Acts and 'John L. Austin who coined the term "speech act" in his book How to Do Things with Words' [Source Wikipedia.org.](https://en.wikipedia.org/wiki/Speech_act#Performative_speech_acts)
* Read more on the context of Performativity in the arts at [walkerart.org](
https://walkerart.org/collections/publications/performativity/performativity-and-its-addressee/)
* [Source Matteo Pasquinelli, Three Thousand Years of Algorithmic Rituals: The Emergence of AI from the Computation of Space](https://www.e-flux.com/journal/101/273221/three-thousand-years-of-algorithmic-rituals-the-emergence-of-ai-from-the-computation-of-space/)

#### LANGUAGE AND CODES: scores & scripts


* Old-Babylonian tablet which was originally about 5 x 8 x 1 inches in size. Half of it now appears in the British Museum, about one-fourth appears in the Staatliche Museen, Berlin, and the other fourth has apparently been lost or destroyed over the years... [Continue reading](https://www.historyofinformation.com/detail.php?entryid=4379).
* * [Find more images here](https://www.britishmuseum.org/collection/object/W_1896-0402-1).

[Scores & Scripts - a Bestiary of Intents](https://www.ppig.org/papers/2017-ppig-28th-church/)

#### ..⌒－→ Exercise 1.1: Pre-lunch task
🍲 🥕 take a picture of an instruction you find where you are and [share it here](https://miro.com/app/board/uXjVL2r3Ozs=/?share_link_id=924735564192).

---

### w/ Naoto (PM)

<!-- 

* Source: [Score for Performing User by Lauren Lee McCarthy](https://criticalcode.recipes/contributions/score-for-performing-user)
-->

* Source: [Choreographing You by Joana](https://re-coding.technology/choreographing-you-web/)

#### ..⌒－→ Exercise 1.2: Create your own language 'code'!

⏰ 30min

“Perhaps the most common way to define an algorithm is to describe it as a recipe, understood as a step-by-step guide that prescribes how to obtain a certain goal, given specific parameters. Understood as a procedure or method for processing data, the algorithm as recipe would be analogous to the operational logic for making a cake out of flour, water, sugar, and eggs. Without the specific instructions for how to mix the eggs and flour or when to add the sugar or water, for instance, these ingredients would remain just that. For someone who has never baked a cake, step-by-step instructions would be critical if they wanted to bake one. For any computational process to be operational, the algorithm must be rigorously defined, that is, specified in such a way that it applies in all possible circumstances.” (Bucher, 2018, p. 21)


'Chef is not just a theoretical system that equates cooking and coding. Specific choices were made in mapping the two systems together, and the aesthetic of a multicoding language is defined by that mapping and the constraints it creates for its programs.' [Source and Example of Code Recipes for the Chef](https://esoteric.codes/blog/chef-multicoding-esolang-aesthetics)


'Between Classical Chinese (or Wényán), the written form of Chinese used from the 5th century BCE to the early 20th century and computer code. the Hello World actually prints (you can see it between the quotes 「「 and 」」) translates not to "Hello, World!" but closer to "Greetings to Heaven and Earth."'
* See poem 99 Bottles turned into a [program in Wenyan-lang interpreter](https://esoteric.codes/blog/wenyan-lang);

**Instructions:**

1. Think of a task that you have 'performed' today or yesterday (in particular a task that involves a certain level of "repetition").
2. *How would you tell a computer to perform that same task?* Write a piece of code that tells how to perform that task more efficiently.
* Use a programmatic logic to define the task and series of steps — this can be just a few sentences.
* Tip: you can combine code and poetry; code and cooking recipes ; code and choreography.
3. Share this task in the [etherpad](https://pad.riseup.net/p/HSLU-performing-codes-24-keep); alongside a short explanation behind the making of this task. Also, add any relevant comments to the source code file that helps better understanding it.

**Further readings:**

* [Random recipe | Olivia & Stine ](https://gitlab.com/OliviaSP/ap2020/-/blob/master/public/MiniEx8/README_MiniEx8.md)
* [Esoteric Coding](https://esoteric.codes)
* [Critical Coding Cookbook](https://criticalcode.recipes/): Intersectional Feminist Approaches to Teaching and Learning
* An example of a working app [Cooklang – Recipe Markup Language](https://cooklang.org/)
* Related: [CPU Dumplings by Taeyoon Choi](https://taeyoonchoi.com/poetic-computation/cpu-dumplings/)

#### Study Cases & Examples:

> "Fluxus was an international, interdisciplinary community of artists, composers, designers and poets during the 1960s and 1970s who engaged in experimental art performances which emphasized the artistic process over the finished product. They produced performance "events", which included enactments of scores, "Neo-Dada" noise music, and time-based works, as well as concrete poetry, visual art, urban planning, architecture, design, literature, and publishing." [Continue reading](https://en.wikipedia.org/wiki/Fluxus).

> "The foregrounding of notation in the form of a code or rules extends the legacy of Fluxus scores and conceptual art instructions and the prevalence of algorithmic procedures within computer art, where code or rules become generative strategies for producing outcomes potentially autonomous of artistic control or agency." (Blackwell et all, 2022, pp.133)


* Source: [Image from Fluxus Workbook](http://fluxus.lib.uiowa.edu/resources.html)
* [What Programming Language Would Yoko Ono Create?](https://esoteric.codes/blog/what-programming-language-would-yoko-ono-write)

#### ..⌒－→ Exercise 1.3:
In groups analyse one of the references below, in particularly, paying attention to the role of 'language', 'performance' and 'performativity'.

**GROUP 01**


Image from Sol Lewitt, Wall Drawing #260, 1976.

* '24 lines from the center, 12 lines from the midpoint of each of the sides, 12 lines from each corner, from Wall Drawing #289', 1976. [Sol LeWitt, 4th wall](https://whitney.org/education/families/kids-art-challenge/sol-lewitt).

**GROUP 02**


> "9 Evenings was the first large-scale collaboration between artists and engineers and scientists. The two groups worked together for 10 months to develop technical equipment and systems that were used as an integral part of the artists’ performances." [Read more here](https://monoskop.org/9_Evenings:_Theatre_and_Engineering).
* [See program](https://www.fondation-langlois.org/9evenings/e/index.html)
* [Robert Rauschenberg, Open Score (performance + interviews)](https://www.youtube.com/watch?v=IGdcEJSKfoM)
* [John Cage, Variations VII (performance)](https://www.youtube.com/watch?v=JxeFhRZwU84)
* [John Cage, Variations VII (interviews)](https://www.youtube.com/watch?v=kz_O4qsy95Y)
* [Video trailler: 9 Evenings](https://www.youtube.com/watch?v=W-cgnK-kFoo)
<!-- * [Video: Open Score, 9 Evenings: Theatre & Engineering, 1966, edited circa 1997](https://vimeo.com/107488380) -->

**GROUP 03**


* [Image from Hacking Choreography by Kate Sicchio](https://www.sicchio.com/)
* [Video of Hacking Choreography](https://vimeo.com/92885158)

**GROUP 04**


> "Distant Movement(s) is a series of performances experimenting with online togetherness and the possibility to experience dance in front of a screen, while we close our eyes. Exploring, being attentive and dancing together are the key concepts of this artistic experience." [Distant Movements - About](https://distantmovements.tumblr.com/dm)

* [Distant Movements #21 November 5, 2021](https://www.youtube.com/watch?v=PiaKjYujrW4)

**GROUP 05**


LAUREN by Lauren Lee McCarthy

> "I attempt to become a human version of Amazon Alexa, a smart home intelligence for people in their own homes. The performance lasts up to a week. It begins with an installation of a series of custom designed networked smart devices (including cameras, microphones, switches, door locks, faucets, and other electronic devices). I then remotely watch over the person 24/7 and control all aspects of their home. I aim to be better than an AI because I can understand them as a person and anticipate their needs. The relationship that emerges falls in the ambiguous space between human-machine and human-human." [Link to work](https://lauren-mccarthy.com/LAUREN).

**GROUP 06**


> "The artwork is a generative approach for conceptual choreographic research of body movements. Therefore, algorithms generate graphical patterns to stimulate a dancer’s creativity and open up new perspectives. With the inspirational impetus coming from a machine, PATHFINDER opens up a space where abstract cycles of dance can be introduced without notions of style or specification." [Christian Mio Loclair - Pathfinder](https://christianmioloclair.com/pathfinder)

* [Video](https://vimeo.com/111361109)
* [Web demo by Naoto](https://editor.p5js.org/micuat/full/ByQ6Lg-dz)

**MORE IDEAS 1**


> "Vocable Code is both a work of “software art” (software as artwork, not software to make an artwork) and a “codework” (where the source code and critical writing operate together) produced to embody “queer code”, examining the notion of queerness in computer coding through the interplay of different human and nonhuman voices. Collective statements and voices complete the phrase “Queer is…” and together make a computational and poetic composition. Through running Vocable Code on a browser, the texts and voices are repeated and disrupted by mathematical chaos, creating a dynamic audio-visual literature and exploring the performativity of code, subjectivity and language." [Read more about the artwork](https://siusoon.net/projects/vocablecode).

* [Vocable Code — live version](https://dobbeltdagger.net/VocableCode_Educational/).

**MORE IDEAS 2**


> Hello Hi There uses the famous television debate between the philosopher Michel Foucault and linguist/activist Noam Chomsky from the Seventies as inspiration and material for a dialogue between two custom-designed chatbots: every evening, these computer programs, designed to mimic human conversations, perform a new – as it were, improvised – live text.

* [Hello, Hi There by Annie Dorsen](https://anniedorsen.com/projects/hello-hi-there/)
* [Hello, Hi There. (video)](https://vimeo.com/194697514?embedded=true&source=video_title&owner=9302488)

____

#### ▪ Activity ▪

We will watch together the following video:

* [Codie | Dr. Kate Sicchio | TEDxVCU](https://www.youtube.com/watch?v=oG-NpRHDt5c&list=PLkRYCVc1KXTXXma9O9gngxu_RrfHm25vT)

____

#### ▶ → Take Away → HOMEWORK:

Please leave your (anonymous) [feedback on the session here](https://pad.riseup.net/p/HSLU-performing-codes-24-feedback), 🙏 thank you!

**Watch (at least one) of the videos below:**

* [Programming as Music Performance by Sam Aaron](https://www.youtube.com/watch?v=0lTZ8Tuyu5I)
* [Live Coding Visuals by Sarah Groff Hennigh-Palermo](https://www.youtube.com/watch?v=F4pozY_RF5c)
* [Algorithmic Choreography by Kate Sicchio](https://www.youtube.com/watch?v=bhxqyRugEpc)
* [On Performative Design by The Rodina](https://www.youtube.com/watch?v=IYnCpI6kWnc)

Add a list with at list 5 different ideas or concepts that you found relevant from the videos above: [scroll to the bottom of the etherpad](https://pad.riseup.net/p/HSLU-performing-codes-24-keep).

____

## ::: Session 02 ::: Live Coding

### w/ Joana (AM)


[Image from (Algo|Afro) Futures ](https://algo-afro-futures.lurk.org/)

> Live coding — sometimes referred to as “on-the-fly programming,” “just in time programming,” or even “conversational programming” — is about people interacting with the world, and each other, in “real- time,” via code.

> Live coding asks questions about liveness, inviting us to reflect on what it means to be live — to have bodies, to communicate, to act.

> Live coding involves the “showing of the screen” or the making visible of the coding process as part of a live performance. Broadly speaking, it describes the improvisatory real-time composition of predominantly computer-generated audio-visual material, where the writing of code itself (or other executable instructions) is presented as a live event for an audience.

> Live coding gives us a way to think otherwise about coding — what it can be, rather than what it is.'

> ...It [live coding] has also evolved in dialogue with the various creative practices that find new expression in and through live coding — including choreography, the visual arts, poetry, and especially music. [Source Live Coding User's Manual](https://mitpress.mit.edu/books/live-coding)

#### Artists and Communities


* [Image above featuring femme live coding collective Codie](https://codie.live/)
* [TopLap Hub](https://toplap.org/nodes/)
* [TopLap Forum](https://forum.toplap.org/);
* [TopLap Yearly Conference](https://iclc.toplap.org/)
* [Live Streamed live coding performances Eulerroom](https://www.youtube.com/c/Eulerroom/videos)

#### INTRODUCTION TO JAVASCRIPT


Useful links:
* Online code editor, for e.g. [Mozilla Playground](https://developer.mozilla.org/en-US/play) or [w3 Online Editor](https://www.w3schools.com/tryit/);
* Link to download [example codes files](https://git.vvvvvvaria.org/JoanaChicau/web-dev-studio);
* Code editor you can install:
* [Pulsar](https://pulsar-edit.dev/)
* [Visual Studio Code](https://code.visualstudio.com/)
* [Zed](https://zed.dev/download)

⏰ 30min

**1.1.** browse a website you visit daily and open the web console:
* <small> if in Firefox: on the top menu of the browser select "Tools" > "Web Developer" > "Web Console";​</small>
* <small> if in Chrome: on the top menu of the browser select "View" > "Developer" > "Developer Tools";​ </small>

// selecting HTML elements using JavaScript:

document.querySelector("body")

document.querySelector("body").style.backgroundColor="Aquamarine";



// VARIABLE
// defining a variable: 'var' or 'const' or 'let'

var surface = document.querySelector("body")

surface.style.backgroundColor="Aquamarine";



// FUNCTION
// adding your prefered colour as a parameter

function camouflage(newColor) {
    surface.style.backgroundColor = newColor;
}
camouflage("blue")


// ARROW FUNCTION
function hello() {
    alert('Hello, world!')
}
hello()

hello = () => { alert('Hello, world!') } 
hello()




// IF ELSE STATEMENT

function toggleBackgroundColor() {
   const body = document.body;
 
   if (body.style.backgroundColor === 'aquamarine') {
     body.style.backgroundColor = 'pink';
   } else {
     body.style.backgroundColor = 'aquamarine';
   }
 }



// LOOP
// creating a loop for changing text in all links

var links = document.getElementsByTagName("a")

for (var i = 0; i < links.length; i++) { 
    links[i].innerHTML = "(｡･･｡) ٩( ∩_∩ )۶ ヽ(´∇`)ﾉ ＼ (^_^ ) ノ"; 
}

**JavaScript Links**
* [W3 Schools](https://www.w3schools.com/js)
* [JS Intro by Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction)
* [JavaScript Info](https://javascript.info/)
* [Eloquent JavaScript](https://eloquentjavascript.net/)

**JavaScript Libraries**

JavaScript libraries are collections of pre-written code and functions that developers can use to perform common tasks or solve specific problems in their web development projects. These libraries are built using the JavaScript programming language and are designed to be reusable, making it easier for developers to add functionality to their applications without having to write everything from scratch.

* [Awesome JavaScript Repo](https://github.com/sorrycc/awesome-javascript)
* [JavaScripting Website](https://www.javascripting.com/)

### w/ Naoto (PM)

#### HYDRA

Hydra is an analog-synth-like coding environment for real-time visuals. It is created by Olivia Jack and is open-source.

* [Olivia Jack - Hydra, Live Coding Visuals in the Browser](https://www.youtube.com/watch?v=cw7tPDrFIQg&t=1294s) — min. 0-10min & 22-34min

*🌈 🖥 Hydra useful links 🌈 🖥*
* [Hydra — the online tool!](https://hydra.ojack.xyz/)
* [Hydra Book](https://hydra-book.glitch.me/#/)
* [Hydra Docs](https://hydra.ojack.xyz/docs/#/)
* [Hydra Functions](https://hydra.ojack.xyz/api/)
* [Hydra Github Repository]( https://github.com/hydra-synth/hydra-synth)
* [Read on Performing with Hydra!](https://hydra-book.glitch.me/#/performing)
* [Hydra Internet Garden](https://hydra.ojack.xyz/garden/): ever-growing community database of resources, projects, tutorials, and code related to hydra video synth
* [NIL Live Coding Intensive 2019: Hydra workshop](https://www.youtube.com/watch?v=S5p4WrW6xys)
* Setting up Hydra locally using the [Atom plug-in](https://github.com/hydra-synth/hydra-examples);

#### ..⌒－→ Exercise 2.1:

⏰ 30min

1. Open [Hydra](https://hydra.ojack.xyz/) in your browser;

osc().out()

2. Press the "run" button or type **"Ctrl + Shift + Enter"**.
(*you can use ctrl + enter if you want to execute only one specific line*)
4. Change the values of the oscillator: frequency, sync, and color offset:

osc(5, -1, 5).out()

4. Add a transformation:

osc(5, -1, 5).rotate().out()

5. Try connecting with your web camera:

s0.initCam()
src(s0).kaleid(4).out()

6. Try screensharing another computer tab and adding layering some visual effects:

s0.initScreen()
src(s0)
  .scrollX(0, 0.05 )
  .layer(osc(30,0.1,2).mask(shape(4)))
.out()

7. Remember to comments to your code to help guide you through:

// this is an example of a comment!

8. Example of split screen:

// top left
osc(5, -1,5).scale(50,50).out(o0)

// bottom left
osc(5, -1,5).blend(o0,0.4).repeat(5,5).out(o1)

// top right
osc(5,0.3,1).out(o2)

// bottom right
noise(3,5).blend(o2,0.88).out(o3)

render()

9. Example of sharing of the screen:

// initialize a webcam in source buffer s0
s0.initCam() 
// set the source of o0 to render the buffer containing the webcam
src(s0).out(o0) 
// initialize a gradient in output buffer o1, composite with the contents of o0
osc(10, 0.2, 0.8).diff(o0).out(o1)
// render o1 to the screen
render(o1) 

10. Example of using microphone to interct with visuals:

osc(10, 0, () => (a.fft[0]*4))
.out()

**IMPORTANT**

* Remember to save the code you write in a sepparate code editor, for eg.: [Visual Studio](https://code.visualstudio.com/); [Pulsar](https://pulsar-edit.dev/); [Zed for MacOs](https://zed.dev/).
* save code file with extension '.js', for example: 'hydracode.js';

#### ..⌒－→ Exercise 2.2:

⏰ 45min

**option 01**
* go through at least [10 different functions](https://hydra.ojack.xyz/api/); explore the possibilities each of them has to offer;
* when you are done follow examples you find interesting from the [Hydra Book](https://hydra-book.glitch.me/#/) and continue exploring creating different visuals.

**option 02**
* [see this example code](https://hydra.ojack.xyz/?sketch_id=Dq4Mh0ORJ0HqEpRd) of a use of comments for a detailed description of how the design and code works.
* go through at least [10 different functions](https://hydra.ojack.xyz/api/); explore the possibilities each of them has to offer;

Take screenshots to save your skecthes!

⏰ 15min
* Presentation of skecthes;

#### ..⌒－→ Exercise 2.3:

⏰ 45min

* In groups, read one of the artists' contributions to the Expositions Chapter [check online version](https://livecodingbook.toplap.org/book/);
* Create a list of keywords and concepts that connect to notions around 'performance' and 'performativity' that you find relevant from the works of practioners in the book;

Presentation of keywords and discussion of exercised shared in the [etherpad](https://pad.riseup.net/p/HSLU-performing-codes-24-keep).

#### ▶ Task → Take Away:

* Start thinking in what way you would like to contribute to the group project.
* Please leave your (anonymous) [feedback on the session here](https://pad.riseup.net/p/HSLU-performing-codes-24-feedback), 🙏 thank you!

#### ▶ BONUS

There is a DistantFeeling(s) yearly session at 18h CET - everyone is welcome to join:

> Participatory. Online. Open to all.
> 15 minutes, eyes closed, in silence.

* [RSVP form](https://docs.google.com/forms/d/e/1FAIpQLSca9BxupCHCi-7Br5rME48Npid48W8VJ73sQh927CmwX5quuQ/viewform)
* [FB event](https://www.facebook.com/events/572595492184444)

---
## ::: Session 03 ::: Work in Groups

### w/ Joana (AM)


#### ..⌒－→ Exercise 3.1: WARM-UP!

⏰ 30min

#### JAM SESSION
* [Using Flok!](https://next.flok.cc)
<!-- Experiment creating visuals together by trying a collaborative tool such as **Pixel Jam** — > [join this Link and start coding!](https://pixeljam.glitch.me/)
* Take screenshots to save your skecthes or make an animated gif! Then share it on [Miro](https://miro.com/app/board/uXjVL2r3Ozs=/?share_link_id=924735564192).-->
* Create a collective sketch from scratch adding to a function little by little;

*🌈 🖥 Overview of references and tools 🌈 🖥*

* [Audio responsiveness](https://hackmd.io/@naoto-hieda/rJKwGJI2t#Audio-Responsiveness-experimental) in Hydra see [example code](https://hydra.ojack.xyz/?code=YS5zZXRCaW5zKDIpJTNCJTBBYS5zaG93KCklM0IlMEElMEFzaGFwZSgzKSUwQS5zY2FsZSgoKSUzRCUzRSUyMGEuZmZ0JTVCMSU1RCoxKSUwQS5vdXQoKSUwQQ%3D%3D);
* Example of [Hydra in P5.JS](https://editor.p5js.org/micuat/sketches/jy5R67ntn)
* Example of [P5.JS in Hydra](https://www.nervousdata.com/wiese/txt_phydra.html#text_screen) and more info [here](https://github.com/ojack/hydra).
* Examples of [Three JS and Hydra](https://hackmd.io/@naoto-hieda/rJKwGJI2t#Loading-external-scripts)
* Example of [Tone.JS](https://tonejs.github.io/) and Hydra [code for external libraries](https://hackmd.io/@naoto-hieda/rJKwGJI2t#Loading-external-scripts):

await loadScript("https://unpkg.com/tone")

synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease("C4", "8n");

* More JavaScript based live coding tools:
* [P5.js Live](https://www.teddavis.org/p5live/)
* [P5LIVE: Walking Through a Collaborative p5.js Environment for Live Coding](https://medium.com/processing-foundation/p5live-walking-through-a-collaborative-p5-js-environment-for-live-coding-bc39d95908c6)
* [Live-Coding YouTube](https://livecodingyoutube.github.io/)
* [Gibber](https://gibber.cc/playground/index.html) for 3D shapes;
* find a [working example](https://charlieroberts.github.io/marching/playground/index.htm?bWFyY2goCiAgUmVwZWF0KAogICAgcyA9IEJveCguMjUpLnRleHR1cmUoICdjaGVja2VycycsIHtzY2FsZToxNn0gKSwKICAgIDEKICApCikKLmZvZyggLjI1LCBWZWMzKDApICkKLnBvc3QoIEZvY3VzKC4wNSwuMDAwMjUpICkKLnJlbmRlcigncmVwZWF0Lm1lZCcpCiAKbGV0IHBoYXNlID0gMApvbmZyYW1lID0gdCA9PiB7CiAgcy50ZXh0dXJlLnV2LnggPSBwaGFzZQogIHBoYXNlICs9IC4yNS82MCAKfQo=)
* [Estuary](https://estuary.mcmaster.ca/) for performing both music (eg.: [Tidal](https://tidalcycles.org/)) and visuals (eg.: Hydra);
* see an [example of code for the sound](https://github.com/linalab/minitidal/blob/main/english.md);
* more [sound examples](https://gist.github.com/carltesta/c4e98b4e2d4327b7aa355d1a0ddbe452);
* Another JavasScript sound library: [Strudel.js](https://strudel.cc/)
* [Live Lab](https://livelab.app/) a browser based environment for real-time performances;
* [List of Live Coding Tools](https://github.com/toplap/awesome-livecoding)

#### ..⌒－→ Exercise 3.2:

⏰ 90min

_Create a concept for your group project:_
* one paragraph description of your project;
* relevant references;
* early sketches;

_⚡important⚡_ take screenshots to document your skecthes.

Share this task in the [etherpad](https://pad.riseup.net/p/HSLU-performing-codes-24-keep).

### w/ Naoto (PM)

#### Sharing project ideas and references

⏰ approx. 5-10min per group

* be ready to contribute with peer feedback;

⏰ 30min

#### Performance Tips and Tricks!

* [Collaborative Coding Practices](https://github.com/tmhglnd/collaborative-coding-practices)
* [Live Coding Jams](https://th4music.net/how-to-live-coding-jams.html)

#### How to document the work?

* Documentation can include:
* screenshots;
* video recording;
* saving code as a local file;
* writing about the process;

#### Study Cases

* [Hydra Patterns](https://twitter.com/hydra_patterns) twitter account;
* [Hydra Internet Garden](https://hydra.ojack.xyz/garden/): community database of resources, projects, tutorials, and code related to hydra video synth;
* [Behind The Screens](https://medium.com/behind-the-screens-challenge) a series of 10-Minute Livecoding performances by live coders from all over the world. In every episode, a coder is challenged to perform in 10 minutes.
* [Screenshots](https://www.are.na/joana-chicau/web-choreographies-other-stories) by Joana Chicau
* [Vocable Code](https://github.com/siusoon/VocableCode) repository by Winnie Soon
* Various [open source projects](https://www.memo.tv/works/#opensource) by Memo Atkens ;
* [Web Performance tools and code](https://raphaelbastide.com/) by Raphael Bastide;
* [Esoteric Codes](https://esoteric.codes/) articles;

#### GROUP WORK

⏰ 90min

* Tutor is available for any queries.

#### ▶ Task → Take Away:

1. Read one article on a live coders practice and approach on the [Behind the Screen Challenge](https://medium.com/behind-the-screens-challenge).
2. [Share on etherpad](https://pad.riseup.net/p/HSLU-performing-codes-24-keep) one sentence on how the live coders' approach might give you new ideas and inspiration.

---

## ::: Session 04 ::: Tutorials

### w/ Joana (AM)

**Tutorials**
⏰ approx. 10min per group;

**Group work**
While doing group work rehearsal

_Before the end of the session prepare:_
* title of the performance
* revise the description of your project;
* further research of relevant references;
* create a 'timeline' of your performance: beginning, middle and end;
* work torwards final version;

Update yesterday's description in the pad: [scroll to the bottom of the etherpad](https://pad.riseup.net/p/HSLU-performing-codes-24-keep).

_⚡important⚡_ save your code and take screenshots to document your work in progress.

#### ▶ Task → Take Away:
* Meet in groups for rehearsal time and to discuss how you will document your work;

<!--
* Optional: check out the [Live Coding Solstice livestream](https://solstice.toplap.org/)!
-->

---

## ::: Session 05 ::: WIP Show

### w/ Naoto (AM)

Before we start, each group add your work title and final version of the description to the pad: [scroll to the bottom of the etherpad](https://pad.riseup.net/p/HSLU-performing-codes-24-keep).

Note change the audio setting on Zoom:
1. click on the arrow next to the microphone icon;
2. select 'audio settings';
3. in the 'Audio Profile' section, remove the option 'Zoom backgrounf noise removal' and change it to 'Original sound for musicians'.


⏰ approx. 10-15min presentation + feedback per group;

Each group presents their concept, main references and demonstrate their code with a short performance;

**IMPORTANT** 👀

Please fill in [HSLU feedback / evaluation form](https://evasys.hslu.ch/evasys/online.php?pswd=JF2JX) - it is compulsory. Thank you 🙏 💫

---

## References ✨

**Bibliography**
* Blackwell, Alan F.; Cocker, Emma; Cox, Geoff; McLean, Alex; Magnusson, Thor. Live Coding: A User's Manual. Cambridge, MA: MIT Press, 2022 [Download Link](https://direct.mit.edu/books/oa-monograph/5495/Live-CodingA-User-s-Manual);
* Butler, Judith. Politics of the Performative. NY: Routledge, 1997 [Source](https://monoskop.org/images/5/54/Butler_Judith_Excitable_Speech_A_Politics_of_the_Performative_1997.pdf)
* Bucher, T. (2018) If ... then: algorithmic power and politics. New York, NY: Oxford University Press (Oxford studies in digital politics).
* Cox, Geoff and McLean, Alex. Speaking Code, Coding as Aesthetic and Political Expression. Cambridge, MA: MIT Press, 2013;
* Cramer, Florian. Language in Software Studies, A Lexicon. Cambridge, MA: MIT Press, 2008 [Download Link](https://monoskop.org/images/a/a1/Fuller_Matthew_ed_Software_Studies_A_Lexicon.pdf)
* Chung, Wendy. "Sourcery" or Code as Fetish. The Johns Hopkins University Press 2008. [Download Link](https://repository.library.brown.edu/studio/item/bdr:405433/PDF/)
* Friedman, Ken, Owen Smith, and Lauren Sawchyn, eds. The Fluxus Performance Workbook. Performance Research e-Publications, 2002.
* John Langshaw Austin, How to do Things with Words. Cambridge, MA: Harvard University Press, 1975;
* Knuth, Ancient Babylonian Algorithms Offsite Link, Communications of the ACM 15, no. 7 (July 1972) 671-77.

**Documentaries & Interviews**
* [Interviews with various live coders ](https://creativecodingutrecht.nl/index-articles)
* [ on-the-fly.documentary](https://www.youtube.com/watch?v=ntFMuvv2-TY)
* [Algorave Generation](https://www.youtube.com/watch?v=S2EZqikCIfY)
* [Artist DIY: Digital Selves](https://www.youtube.com/watch?v=t2KeNblKSFM&list=PLkRYCVc1KXTXXma9O9gngxu_RrfHm25vT&index=42&t=1s)
* [Run the code: is algorave the future of dance music?](https://www.youtube.com/watch?v=h340aNznHnM)
* [Show Us Your Screens](https://vimeo.com/20241649)