# Web Choreographies
*extended version*
## ::: Part 00 ::: Warm-up ✍(◔◡◔)
:hourglass_flowing_sand: 15 min
* Write down a choreography you have performed today in a digital environment;
Share on [padlet](https://artslondon.padlet.org/jchicau/nuvrp40x97eope2x)!
---
## ::: Part 01 ::: Intro Lecture ::: :performing_arts: :desktop_computer:
:hourglass_flowing_sand: 30 min
Joana Chicau is a graphic designer, coder, researcher — with a background in dance. More info and latest projects on [my website;](https://joanachicau.com/)
* [list of live coding projects;](https://jobcb.github.io/)
* [article <body> Building: the code performance of Joana Chicau](https://esoteric.codes/blog/body-building-the-code-performance-of-joana-chicau)
* [screenshots archive;](https://www.are.na/joana-chicau/web-choreographies-other-stories)
* [staging errors videos list;](https://www.youtube.com/playlist?list=PLkRYCVc1KXTU1S47T_0GlUpKtz3MQkthA)
---
## ::: Part 02 ::: Javascript & the DOM ::: :bow_and_arrow: :black_heart:
### Web Console Quick Tour
:hourglass_flowing_sand: 30 min
<small>__important:__ the changes made in the webpage through the webconsole won't be saved; if you refresh the page they will be lost. To keep any of the code written in class remember to copy it into an editor of your choice;</small>
1. Warm-up exercise 01:
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>
1.2. choose two textual elements and/ or one image to manipulate in some way you would like, for eg.: change the colour, size,...
<small> — you can also right click an HTML element and select 'inspect'</small>
Take a screenshot and share on [padlet]()!
**:hourglass_flowing_sand: 15 min BREAK**
### Web Console as a Real-Time Writing Tool
:hourglass_flowing_sand: 30 min
2. Warm-up exercise 02:
2.1. write one function or line of code to change an element in the page;
```javascript=101
// the Document Object Model (DOM) is a programming interface for web documents.
// it represents the page so that programs can change the document structure, style, and content.
// a webpage is a document that can be either displayed in the browser window or as the HTML source.
// we will use a scripting language such as JavaScript to interact with webpages.
//
// lets get started! we will be typing in the Web Console of your browser;
//
// this lines of code are selecting elements and re—styling them
// you can also select elements by "#id" or "".classes" names;
document.querySelector("body").style.fontSize = "100px";
document.querySelector("body").style.background="linear-gradient(70deg, Aquamarine, MistyRose, Blue, Plum, LightYellow)"
document.querySelector("body").style.background= "url(https://upload.wikimedia.org/wikipedia/commons/6/6b/Internet-Sign.jpg)";
// setting a variable
var skin = document.querySelector("body")
// adding your prefered colour as a parameter
function changeColor(newColor) {
skin.style.backgroundColor = newColor;
}
changeColor("blue")
// 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 = "(｡･･｡) ٩( ∩_∩ )۶ ヽ(´∇`)ﾉ ＼ (^_^ ) ノ";
}
// adding an interval to a function using randomness:
function move () {
currentNumber = 1;
var element = document.querySelector("body");
currenttime = setInterval(function() {
element.style.transform="rotate(" + currentNumber + "deg )";
currentNumber = Math.random() * 360;
}, 800);
}
move()
// adding an interval of 800 miliseconds to a loop function using randomness:
function move () {
currentNumber = 1;
var allElements = document.querySelectorAll('div'), i;
currenttime = setInterval(function() {
for (i = 0; i < allElements.length; ++i) {
allElements[i].style.transform="rotate(" + currentNumber + "deg )";
currentNumber = Math.random() * 360;
}
}, 800);
}
move()
```
Take a screenshot and share on [padlet](https://artslondon.padlet.org/jchicau/nuvrp40x97eope2x)!
---
## ::: Part 03 ::: Study Cases and References ✨ 👀
:hourglass_flowing_sand: 30 min
'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)
* [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)
* [Image from Hacking Choreography by Kate Sicchio](https://www.sicchio.com/)
* [Video of Hacking Choreography](https://vimeo.com/92885158)
> 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)
* [Body of Matter: Orion Maxted - HUMAN SIMULATION](https://vimeo.com/154972235)
Orion Maxted's systemic, algorithmic theatre reveals how a group of people thinking together can form a computer, and in so doing arrive at new forms of thought and presentation.
In stark contrast to the vast complexity of the world we live in, as individual humans, we can consciously handle only a few elements at once. How are we then to think and write about this then, when we are inextricably woven into these systems? And yet, simple patterns appear to repeat at every level of reality.
'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. ' [Vocable Code](https://siusoon.net/projects/vocablecode); read more about the background.
* [Vocable Code — live version](https://dobbeltdagger.net/VocableCode_Educational/).
Also from Winnie Soon:
* [Unerasable Images](https://siusoon.net/projects/unerasableimages)
### Web & Net Art
* * [Safebook — Ben Grosser](https://bengrosser.com/projects/safebook/ "bengrosser")
* * [Demetricator — Ben Grosser](https://bengrosser.com/projects/twitter-demetricator/)
* * [WallStreetJournal — Olia Lialina](http://art.teleportacia.org/exhibition/online_newspapers/WallStreetJournal/ "Olia")
* * [James Bridle](http://jamesbridle.com/works/do-it)
* * [Text Free Browsing Chrome extension — Rafaël Rozendaal & Jonas Lund.](https://jonaslund.com/works/text-free-browsing/)
* * [Raphael Bastide performance tools](https://raphaelbastide.com/)
* * [JODI](https://404.jodi.org/)
---
## ::: Part 04 ::: Newspaper Theatre :::
:hourglass_flowing_sand: 30 min + 15 min presentation
[The Newspaper Theatre](https://en.wikipedia.org/wiki/Theatre_of_the_Oppressed) was a technique developed by Augusto Boal (Brazil, 1931 - 2009) founder of Theatre of the Oppressed; it aims to give the audience a way to transform daily news articles or any non-dramatic pieces to theatrical scene. The strategies are as follows:
* **Simple Reading**: news item read, detached from the context of the newspaper (which makes it false or controversial).
* **Crossed Reading**: two news item are read in alternating form, complementing or contrasting each other in a new dimension.
* **Complementary Reading**: information generally omitted by the ruling class are added to the news.
* **Rhythmical Reading**: article is read to a rhythm (musical), so it acts as a critical "filter" of the news, revealing the true content initially concealed in the newspaper.
* **Parallel Action**: actors mimic the actions as the news is being read. One hears the news and watches its visual complement.
* **Improvisation**: news is improvised on stage to exploit all its variants and possibilities.
In groups choose one existing online website (for eg.: a news source, social media platform,..) to be your 'stage'.
Extract text, images, audio from your 'stage'.
Choose one of the techniques above and practice with a collection of items extracted from your 'stage'.
---
## ::: Part 05 ::: Making of Web Choreographies :::
:hourglass_flowing_sand: 60 min
3. In groups go back to the online website you chose to be your 'stage';
3.1. take 5min write down a summary of how the website is structured - what is its underlying choreography?
3.2. now let's __re—choreograph!__
You can start by thinking of a concept you would like to explore, for eg. moving, re-moving, growing, stretching, accumulating, juxtaposing, layering, sequencing, scaling..
3.3 write a piece of code with a series of actions and style manipulations that convey your concept (merge different approaches from the group);
Share your work in progress on [padlet](https://artslondon.padlet.org/jchicau/nuvrp40x97eope2x)!
* Schema from [12 choreographic principles — Wayne Mcgregor](https://waynemcgregor.com/learning/resources/)
---
## ::: Part 06 ::: Its Show Time! ::: :dizzy:
:hourglass_flowing_sand: 30 min
Round of presentations and documentation; be ready to share (or perform) your choreographies!
:hourglass_flowing_sand: 30 min
Feedback and reflection time;
# Resources List
* * [Brief intro to HTML + CSS + JS](https://www.internetingishard.com/html-and-css/introduction/ "html-and-css intro")
* * [HTML + CSS + JS Cheat Sheets](https://html-css-js.com/html/)
* * [CSS Introduction](https://www.w3schools.com/css/css_intro.asp)
* * [Guide to Web Console Commands](https://css-tricks.com/a-guide-to-console-commands/)
* * [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
* * [DOM Model](https://en.wikipedia.org/wiki/Document_Object_Model#/media/File:DOM-model.svg)
* [& more references here!](https://github.com/JoBCB/Web-Development-Studio-2020/wiki/Programming-Resources)
* [list of Live Coding Tools here](https://github.com/toplap/awesome-livecoding)
### Further 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);
**Links to Projects**
* [Flee Immediately Online Mag](http://www.fleeimmediately.com "Fleeimmediately")
* [Esoteric Coding](https://esoteric.codes/)
* [Critical Coding Cookbook](https://criticalcode.recipes/)
* [Net Art Anthology Rhizome](https://anthology.rhizome.org/)
* [Net Art Latino Database](http://meiac.es/latino/index.html)
**Watch List**
* [on-the-fly.documentary](https://www.youtube.com/watch?v=ntFMuvv2-TY)
* [ VCUarts Faculty Lecture Series: Kate Sicchio, Algorithmic Choreography](https://www.youtube.com/watch?v=bhxqyRugEpc)
* [Live Streamed live coding performances Eulerroom](https://www.youtube.com/c/Eulerroom/videos)
Sign in with Wallet
Connect another wallet