# Choreographing Web Environments

**Workshop @Control Shift Bristol**

What happens if we think of algorithms as choreographies and interfaces as stages?

In this workshop we will be looking at web environments through the lenses of choreography.

We will use the web browser as a performative medium to interact in real-time with online environments and their content. We will explore possibilities for visual composition in the browser using JavaScript, HTML and CSS.

At last, we will reflect on the role of ‘algorithmic choreographies’, how they affect us and how we can engage in new forms of critical making.

LINK: hackmd.io/@JoChicau/rJW_SiJpo

## ::: Part 01 ::: Introductions :::

:hourglass_flowing_sand: 15 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/)


#### What is choreography?

*Choreo* = writing
*Graphy* = movement

See examples of dance notations / [collection of scores](https://www.geometries.xyz/inventory.html).

> ...one of the crucial questions of our times: how to claim agency for our movements and actions within our highly (even if subtly) choreographed societies of control (...) Dance and choreography display and practice how bodies get to be mobilised as well as made passive. (Lepecki in Martin, 2015: 44;46)

> ... what William Forsythe has called an “art of command”. Such understanding of choreography obviously implies that, as with any system of command, choreography also implements, needs, produces, and reproduces whole systems of obedience. (Lepecki, 2013:16 citing Franko 2007:17).

> Choreography is not just another of the things we “do” to bodies, but a reflection on – and enactment of – how bodies “do” things, and on the work that the work of art performs. Social choreography exists not parallel to the operation of social norms and strictures, nor is it entirely subject to those strictures. (Hewitt, 2007: 4)

#### What are algorithms?

> "A set of instructions that organises a particular procedure (a formalised task) into steps that can be mechanically performed. Algorithms are used to control and stabilise actions in unstable environments." (Ethics of Coding: A Report on the Algorithmic Condition [EoC], 2018)

#### What are online tracking algorithms?

> Most web services we access today employ some form of tracking (Kretschmer, Pennekamp and Wehrle, 2021). There are different techniques for user profiling, data capture and tracking across websites.

> Fingerprinting is a tracking technique for collecting configuration of the user’s web browser which can be used to uniquely identify users. It is achieved by embedding JavaScript code into the website and is usually performed without users' knowledge.

## ::: Part 02 ::: Warm-up 🐬 🏄‍♀️

:hourglass_flowing_sand: 15 min



Caption: Trio B floorplan, by Yvonne Rainer, 1968

## ::: Part 03 ::: Web Browser Quick Tour ::: 💫 🔍

<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, eg.: [Visual Studio](https://code.visualstudio.com/) or [Notepad](https://notepad-plus-plus.org/).
</small>

#### Exercise 01:
:hourglass_flowing_sand: 10 min

**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>

#### Exercise 02:
:hourglass_flowing_sand: 15 min

**2.1.** Learning about the browser: copy each line of code to the web console:

// info about the user's computer screen 
screen.width 
screen.height 
    
// info on browser and OS: 
navigator.userAgent 

// browser's language: 
navigator.language 

// date and time info:
new Date();   

Check what browser data can be collected from you in [cover your tracks](https://coveryourtracks.eff.org/).

**2.2.** Modifying the display of the Webpage: write one function or line of code to change an element in the page;

// selecting HTML elements;

document.querySelector("body").style.background="linear-gradient(70deg, Aquamarine, MistyRose, LightYellow)"

document.querySelector("body").style.background= "url(https://upload.wikimedia.org/wikipedia/commons/6/6b/Internet-Sign.jpg)";

// lets change the width of the 'body':

document.body.style.width= "500px";

// now lets ask the browser what is the width:

document.body.clientWidth

// setting a variable
    
var skin = document.querySelector("body")

// adding your prefered colour as a parameter

function camouflage(newColor) {
    skin.style.backgroundColor = newColor;
}
camouflage("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 = "(｡･･｡) ٩( ∩_∩ )۶ ヽ(´∇`)ﾉ ＼ (^_^ ) ノ"; }

// creating a loop for moving around all elements:

function drifting () {
    var everything = document.querySelectorAll('*'), i;
	  for (i = 0; i < everything.length; ++i) {
	    everything[i].style.position = "absolute";
	    everything[i].style.top = Math.random() * 100 + 'px';
            everything[i].style.left = Math.random() * 100 + 'px';
            everything[i].style.transition = "1s ease-in-out";
	  }
	}
setInterval(drifting, 2000)

// making visible the cursor movement


window.addEventListener('mousemove', moving, false);
var coords = [];

function moving(e) {
  coords.push([e.pageX, e.pageY]);

for (i = 0; i < coords.length; ++i) {
    var traces = document.createElement('div');
    document.getElementsByTagName('body')[0].appendChild(traces);
    traces.className = 'newScore';
    traces.innerHTML = "●";
    traces.style.position = "absolute";
    traces.style.left = e.pageX + 'px';
    traces.style.top = e.pageY + 'px';
    traces.style.color = "purple";
    }
}  

* [Examples from Joana Chicau screenshots archive](https://www.are.na/joana-chicau/web-choreographies-other-stories)

## ::: Part 04 ::: Making of Web Choreographies ::: :performing_arts: :desktop_computer:

:hourglass_flowing_sand: 20 min

3. In groups choose one existing online website to be your 'stage';
3.1. 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. *re-moving, stretching, accumulating, juxtaposing, obstructing, re-scaling..*
3.3 write a mini-performance piece with a sequence of actions that convey your concept;

## ::: Part 05 ::: Its Show Time! ::: :dizzy:

:hourglass_flowing_sand: 10 min
Feedback, **please answer this [questionnaire]() 🙏**

:hourglass_flowing_sand: 15 min
Round of presentations and discussion.

# 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/)
* [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)
* [List of Live Coding Tools here](https://github.com/toplap/awesome-livecoding)
* [Privacy Tools](https://www.privacytools.io)
* [Mozilla Reviews](https://foundation.mozilla.org/en/privacynotincluded/#product-review)
* [Our Data Ourselves](https://ourdataourselves.tacticaltech.org/)
* [Spread Privacy](https://spreadprivacy.com/tag/privacy-newsletter/)

**Bibliography**
* Blackwell, A.F. et al. (2022) Live Coding: A User’s Manual. The MIT Press. Available at: [download Link](https://direct.mit.edu/books/oa-monograph/5495/Live-CodingA-User-s-Manual);
* Ethics of Coding: A Report on the Algorithmic Condition [EoC] (2018). H2020-EU.2.1.1. Brussels: European Commission. Available at: https://cordis.europa.eu/project/id/732407 (Accessed: 11 July 2022).
* Hewitt, A. (2007) ‘Choreography is a way of thinking about the relationship of aesthetics to politics. Interview with Goran Sergej Pristaš.’
* Kretschmer, M., Pennekamp, J. and Wehrle, K. (2021) ‘Cookie Banners and Privacy Policies: Measuring the Impact of the GDPR on the Web’, ACM Transactions on the Web, 15(4), pp. 1–42. Available at: https://doi.org/10.1145/3466722.
* Lepecki, A. (2013) ‘Choreopolice and Choreopolitics: or, the task of the dancer’, TDR: The Drama Review, 57:4 (T220)(Winter 2013), pp. 13–27.
* Martin, R. (ed.) (2015) The Routledge companion to art and politics. London ; New York: Routledge, Taylor & Francis Group.

**Links to Projects**
* [Joana Chicau 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)
* [Joana Chicau staging errors videos list;](https://www.youtube.com/playlist?list=PLkRYCVc1KXTU1S47T_0GlUpKtz3MQkthA)
* [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)