# ☆ **Web Choreographies** ☆

*☆｡･ﾟﾟ･ browser glitches and web remixes ･ﾟﾟ･｡☆*

___

## bit.ly/hackingbrowser

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.

Explore different forms of visual composition using online content in real-time by coding in JavaScript, HTML and CSS. At the end of the workshop participants will discuss the role of ‘algorithmic choreographies’, how they affect us and how we can engage in new forms of critical making.

**What you need**: Please bring your own laptop with a a code editor of your choice. We can supply one laptop for the session.

**Workshop experience level**: Basic knowledge of HTML, CSS and JS or some level of familiarity with computer programming and tools more broadly is desirable.

<!-- In this workshop we will use the browser and web developer tools as an artistic and performative medium!
We will explore different forms of visual composition using online content in real-time by coding in JavaScript, HTML and CSS.

Participants will produce code sketches, images and/ or videos which can be exhibited online or in a screen in the gallery space. In addition participants will be invited to join the warm-up of the Algorave included in the programs.-->

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

:hourglass_flowing_sand: 15 min

Joana Chicau is a graphic designer, coder, researcher — with a background in dance. She researches the intersection of the body with the designed and programmed environment, aiming at widening the ways in which digital sciences is presented and made accessible to the public.

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

.･ﾟﾟ･ [joanachicau.com](https://joanachicau.com/)
.･ﾟﾟ･ [post.lurk.org/@joanachicau](https://post.lurk.org/@joanachicau)
.･ﾟﾟ･ [are.na/joana-chicau](https://www.are.na/joana-chicau/web-choreographies-other-stories)


Image credit: Galeria Ze dos Bois Lisboa, Ana Caria and Leonor Fonseca, FBAUL.

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

<small>__important:__ the changes made in the webpage through the web console will **not be saved**; if you refresh the page they will be lost. To keep any of the code written in the workshop remember to copy it into an editor of your choice.
</small>

#### Exercise 01:
:hourglass_flowing_sand: 15 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>

## ::: Part 03 ::: Coding in the Browser ::: 💫 🔍

#### Exercise 02:
:hourglass_flowing_sand: 30 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  

**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= 
"url(https://upload.wikimedia.org/wikipedia/commons/6/6b/Internet-Sign.jpg)";

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

// adding randomness:

document.querySelector("body").style.background =
  "linear-gradient(" +
  Math.floor(Math.random() * 1000) +
  "deg, Aquamarine, MistyRose, Blue, Plum)";

// 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 camouflageBody = document.querySelector("body")

// adding your prefered colour as a parameter

function camouflage(newColor) {
    camouflageBody.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";
    }
}  

-> [Download Code](https://git.vvvvvvaria.org/JoanaChicau/Hacking-the-Browser/src/branch/main/web-console.js).

## ::: Part 04 ::: Make your Own Artworks ::: :performing_arts: :desktop_computer:

:hourglass_flowing_sand: 30 min

#### Exercise 03:
Choose one existing online website to be your 'stage';
* Take one minute to analyse the website - what stands out?
* Think of a concept you would like to explore (for eg. *make the website dance, turn it into a nightclub or a magical website...*)
* Create a sequence of sketches that convey your concept;

⚡ REMEMBER ⚡ TO SAVE YOUR SKETCHES (screenshot or video record).

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

: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)

**Examples of Code Editors:**
* [Zed](https://zed.dev/download)
* [Visual Studio Code](https://code.visualstudio.com/)
* [Notepad](https://notepad-plus-plus.org/)

**Links to other Relevant References**
* [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)
* 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);