# Generative Art & Design: Algorithms in Motion

## Introduction


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

She has been actively participating and organizing events involving multi-location collaborative coding, algorithmic improvisation, discussions on digital equity and activism.

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

* [Link to portfolio website;](https://joanachicau.com/)
* [List of live coding projects;](https://jobcb.github.io/)

#### 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 be analysing references from practitioners in the field of generative art and design, and collectively discuss the various approaches. We will be experimenting with browser based tools such as P5.JS and a set of JavaScript libraries for generative composition making. At the end, all students are invited to contribute to a split-second virtual exhibition of their works.

#### Timetable

* 22nd April, Tuesday: 9h00-12h30 and 13h30-17h00
* 23rd April, Wednesday: 9h00-12h30 and 13h30-17h00
* 24th April, Thursday: 9h00-12h00 and 13h00-16h00

Plus 6 hours self-directed study time.

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

---

#### Virtual Learning Netiquette

In this session we will follow terms of participation of UAL's Creative Computing Institute (Internet Equalities group), 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;

---

## ::: Session 01 ::: Intro to Generative Art and Design

### AM: Introduction and Study Cases

> “Generative art refers to any art practice where [sic] artists use a system, such as a set of natural languages, rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.” *Philip Galanter, “What is Generative Art? Complexity Theory as a Context for Art Theory,” (2003)*

> Generative art thus describes processes defined by rules, processes which are automated to a certain degree by the use of a machine or computer, or by using mathematical or pragmatic instructions. By following these pre-defined rules or instructions, once set in motion these “self-organising” processes run independently from their authors or artist-programmers. — Inke, Arns. Code as Performative Speech Act. 2015 [Source](https://monoskop.org/images/3/32/Arns_Inke_2005_Code_as_Performative_Speech_Act.pdf)


> The process is the product.

> The most important aspects of a process are time, relationship and change.

> The process produces formations rather than forms.

> We search for unexpected but correlative, emergent patterns.

— [Conditional Design](https://conditionaldesign.org/manifesto/) and [video](https://vimeo.com/67304556)

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

⏰ 45min

→ LINK to exercise: [here](https://pad.vvvvvvaria.org/HSLU-generativecodes25)!

*References:*
* Text Reference: Karl Gerstner and Design Programmes: [Download Link](https://www.are.na/block/1141585)
* [Reference on Karl Gerstner](http://indexgrafik.fr/karl-gerstner/)

#### ..⌒－→ Exercise 1.2: Analysing Artworks

[Programmed: Rules, Codes, and Choreographies in Art, 1965–2018 ](https://whitney.org/media/39544)

⏰ 45min

In groups, analyse the different artworks in the links below.
→ How rules and instructions shape the making of these artworks?
→ Select three artworks per group to be shared to the whole class.

* Link for Group 1: [Rule, Instruction, Algorithm: Ideas as Form](https://whitney.org/exhibitions/programmed?section=1&subsection=1#exhibition-artworks)
* Link for Group 2: [Rule, Instruction, Algorithm: Generative Measures](https://whitney.org/exhibitions/programmed?section=2&subsection=1#exhibition-artworks) and [Rule, Instruction, Algorithm: Collapsing Instruction and Form](https://whitney.org/exhibitions/programmed?section=3&subsection=1#exhibition-artworks)
* Link for Group 3: [Signal, Sequence, Resolution: Image Resequenced](https://whitney.org/exhibitions/programmed?section=4&subsection=1#exhibition-artworks)

[Add your replies to the pad](https://pad.vvvvvvaria.org/HSLU-generativecodes25).

#### ..⌒－→ Lunch Break Task
* Take a picture of a rule or an instruction you find around you.
* Bring to the second half on the class: A4 or A3 papers, pen or pencil, ruler.

### PM: from Theory to Practice:


— John Cage, Fontana Mix (1958). This score is performed by using overlapping transparencies containing random shapes and points.


Vera Molnár Hungarian-French visual artist and a pioneer of algorithmic art. [Link to bio](https://monoskop.org/Vera_Moln%C3%A1r).


— ‘Interruptions’, plotter drawing, by Vera Molnar, 1969, Paris, France. Museum no. E.269-2011. © Victoria and Albert Museum, London


— Random Distribution of 4 Elements (to progr. Computer), by Vera Molnar, Ink and graphite on paper, 1971.


— M3x3 computer-based video dance by, Analivia Cordeiro, 1973. She is one of the pioneers in programming an algorithm for choreography notation, which she designed specifically for camera and as a basis for her video dance script.

Read more: Analivia Cordeiro – interview: [‘For me, movement is an escape of the technological rules’](https://www.studiointernational.com/index.php/analivia-cordeiro-interview-from-body-to-code-review-zkm-centre-for-art-and-media-karlsruhe)


— Score for Melody Excerpt by Lucinda Childs (1977). This score represented all the possible pathways that each dancer may traverse during the course of performing. [See more scores from this collection](http://danceworkbook.pcah.us/asteadypulse/archive/archive.html).


— Sol LeWitt, 4th wall: 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) [Source](https://whitney.org/education/families/kids-art-challenge/sol-lewitt).


— Masao Komura and Kunio Yamanaka, "Return to Square" (1968). Computers and Automation.

Also see: The announcement of the first "Computer Art Contest" in the February 1963 issue of Computers and Automation (Internet Archive). Source: [Verge Magazine](https://www.theverge.com/2015/7/13/8919677/early-computer-art-computers-and-automation)


Cybernetic Serendipity Exhibition poster by Franciszka Themerson.

— Cybernetic Serendipity: The Computer and the Arts (1968) an exhibition at the Institute of Contemporary ArtsOffsite Link in London, curated by British art critic, editor, and Assistant Director of the Institute of Contemporary Arts Jasia Reichardt. [See catalogue](https://www.studiointernational.com/flipbookCyberneticSerendipity/StudioInternationalCyberneticSerendipity-1968.html#p=20) and [short video ](https://www.youtube.com/watch?v=n8TJx8n9UsA). More info [here](https://monoskop.org/Cybernetic_Serendipity).


— Alison Knowles with Norman Kaplan, Poem Drop Event (1971), House of Dust, 1969–75. California Institute of the Arts, Valencia, CA. Destroyed. Photogra- pher unknown. © Alison Knowles.

* “The House of Dust” (1968) a digital poem composed of four separate categories prepared by Knowles in advance and programmed in FORTRAN-IV by Tenney, which was then processed by a mainframe computer at Brooklyn Polytechnic Institute (BPI). [Continue reading here](https://www.x-traonline.org/article/objectpoems-alison-knowless-feminist-architexure).
* [Watch: Alison Knowles Reads the House of Dust Poem](https://www.youtube.com/watch?v=EJe1kciX4ZQ)


— MIT Press logo by Cooper (1962);

* [Muriel Cooper | David Reinfurt | Talks at Google](https://www.youtube.com/watch?v=U_PGr5d9r7Q) — *watch min. 6 & 29*
* [‘Muriel’](https://www.pentagram.com/work/muriel/story) a series of animations celebrate the pioneering designer Muriel Cooper on the 50th anniversary of her joining the MIT Press.
* [Muriel Cooper: Designing a Bridge Between the Bauhaus & the Digital Age](https://99percentinvisible.org/article/muriel-cooper-designing-bridge-bauhaus-digital-age/)
* Read more: [Muriel Cooper: Turning Time into Space](https://walkerart.org/magazine/muriel-cooper-turning-time-into-space)



— The MIT Media Lab Identity by [TheGreenEyl](http://www.rt80.net/medialab/), 2011.

* The logo has three intersecting spotlights that can be organized in any of 40,000 shapes and 12 color combinations using a custom algorithm.
* Programming tool: Processing.org
* Watch Video Promo for [MIT Media Lab Identity](https://vimeo.com/20250134)


— shape-changing logo by [Pentagram](https://www.pentagram.com/work/mit-media-lab/story) (2014). The design began with designer Richard The’s 25th anniversary logo for the Media Lab, which was based on a seven-by-seven grid. Using that same grid, the Pentagram team generated a simple ML monogram to serve as the logo for the Media Lab.


<!---
VERSION 2
RECREATE SOL LE WIT
https://www.sfmoma.org/read/drawing-with-instructions/
-->

#### ..⌒－→ Exercise 1.4:

⏰ 60min

1. Divide a square into 9 smaller squares
2. Replicate 3x, forming a bigger square
3. Mark the 49 intersecting nodes (dots)


4. Then, connect the nodes in the original 3x3 square in different ways, creating many variations as below:


[Exercise adapted from this source](https://medium.com/svilenk/what-i-learned-from-the-2-000-elusive-design-book-designing-programmes-f518faefcf4b).

**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, if you haven't already, you can install:
* [Zed](https://zed.dev/download)
* [Visual Studio](https://code.visualstudio.com/)
* [Notepad](https://notepad-plus-plus.org/)

#### ..⌒－→ EXERCISE 1.5: Hacking the Browser

⏰ 30min

// VARIABLE
// selecting HTML elements using JavaScript:

document.querySelector("body")

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

var skin = document.querySelector("body")

skin.style.backgroundColor="Aquamarine";

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

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


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

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

// 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**
* [HTML](https://www.w3schools.com/html/html_elements.asp) - W3C
* [CSS](https://www.w3schools.com/css/css_syntax.asp) - W3C
* [JS](https://www.w3schools.com/js) - W3C
* [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 Bot Game](https://lab.reaal.me/jsrobot/#level=1&language=en)

<!---
### ▶ → ▪ Task:

* (if you haven't yet) watch at least two of the videos:
* [How To Draw With Code? | Casey Reas](https://www.youtube.com/watch?v=_8DMEHxOLQE) - 16min;
* [Making Everyday | Saskia Freeke ](https://www.youtube.com/watch?v=nBtGpEZ0-EQ) - 45min;
* one of the interviews [on Algorithmic Patterns](https://www.youtube.com/@AlgorithmicPattern/streams) - 60min;

How do the artistic practices in the videos above relate to the notion of 'generative art’?
Add your replies here: https://pad.vvvvvvaria.org/HSLU-generativecodes25

-->

## ::: Session 02 ::: Coding with P5.JS

### AM: Introduction to P5.JS

⏰ 60min

P5.JS is a JavaScript library that starts with the original goal of Processing—to make coding accessible for artists, designers, educators, and beginners—and reinterprets this for today's web.

*🌈 🖥 P5.JS useful links 🌈 🖥*

* [P5.JS reference](https://p5js.org/reference/)
* [P5.JS Video tutorials](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA)
* [P5.JS Play](https://p5play.org/learn/index.html)
* [P5.JS Showcase](https://showcase.p5js.org/#/)

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

⏰ 30min

1. Open the [P5.JS editor](https://editor.p5js.org/).
2. Type the code below to get started:

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(205);
}

To make the canvas fullscreen use:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

3. Now add a shape:

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(25);
  // x y for each corner of the triangle
  triangle(30, 75, 58, 20, 86, 75);
}

Note: the order of applying attributes to shapes matter.
Group shapes:

function draw() {
push();
rotate(1/2); 
fill(202,102,102);
rect(50, 0, 40, 20);
pop();
}

* See ['Shape' reference](https://p5js.org/reference/#group-Shape) to modify the code above and [to group shapes](https://p5js.org/reference/p5/push/);

*Sketch with text example*

function setup() {
  createCanvas(500, 500);
}

function draw() {
    textSize(40) 
    text('hello ٩(˘◡˘)۶ world', 10, height/2) // x y
}

*Sketch with text image*

 // setting a new variable:

let fish

function preload (){
 fish = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Synchiropus_splendidus_2_Luc_Viatour.jpg/640px-Synchiropus_splendidus_2_Luc_Viatour.jpg')
}

function setup() {
  createCanvas(500, 500);
}

function draw() { 
    background(fish); 
}

4. Now let's experiment with interactivity:

*Sketch 01*

function setup() {
  createCanvas(500, 500);
}

function draw() {
   // R, G, B + Alpha
  background(0,0,255, 0.8); 
  noStroke()
  fill(frameCount*2%225)
  // x, y, diameter
  circle(mouseX,mouseY,50)
}

*Sketch 02*

function setup() {
  createCanvas(500, 500);
}

function draw() {  
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 5, 5);
}

*Sketch 03*

function setup() {
  createCanvas(500, 500);
}

function draw() {
    // try now playing with text:
    fill(25, 25, 255)
    textSize(30)
    text('hello ☀️🌴🍒 🖥️  🐬', mouseX, mouseY);
}

5. Using randomness:

function setup() {
  createCanvas(500, 500);
}

function draw() {  
    noStroke()
    fill (25, 25, 255, 100)
	randoCircle()
}

// RANDOM
function randoCircle(){
	circle(random(width), random(height), random(50))
}

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

// this is an example of a comment!

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

⏰ 60min

* Create three generative design, following the rules:
* create two shapes;
* apply three colors;
* make something move!

**References: Designing Processes and Tools**

[Source: Lisa Orth](https://twitter.com/lisaorthstudio/status/1446247907066146825) made with p5.js.

* [Jürg Lehni](http://juerglehni.com/)
* [Lisa Orth](https://www.lisaorth.xyz/)
* [All the Daily Artworks 2020](https://vimeo.com/500815451) by [Saskia Freeke](https://sasj.nl/portfolio/daily/)
* [Ink Space](https://experiments.withgoogle.com/ink-space) by Zach Lieberman.
* [Each Page A Function](https://raphaelbastide.com/epaf/zine/), this publication combines drawing and programming by presenting 19 digital drawings made with 19 tools specially programmed for the project. Each program allows to reconsider the action of drawing by adding constraints or augmentation, but also temporal, spatial or formal behaviours.
* [Lausanne Underground Film Festival 2018](https://www.postdigitalgraphicdesign.com/interview/10/pdgd-itw-dimitrijeanottat/) the series comprises about 40 different visuals that were designed by Dimitri Jeannottat, using images by Tiphaine Allemann and generated with a software developed by Pierre Charmillot.
* [Grafik Kiosk](http://www.grafikkiosk.ch/) is a digital program to generate intuitivly posters in different formats with user generated content.
* [Newspaper Generator](https://hackersanddesigners.nl/s/Tools/p/Newspaper_generator) by Hackers And Designers.
* [Artist doing Generative Art](https://www.digitalartsblog.com/artist-spotlights/10-digital-artists-reign-of-generative-art)

#### ..⌒－→ Demo:

[P5.JS libraries](https://p5js.org/libraries/) can be any JavaScript code that extends or adds to the p5.js core functionality.

**How to embed a JS library**

* [Example Sound Sketch](https://editor.p5js.org/JoBCB/sketches/oyBBF331B)
* [P5.JS Sound Reference](https://p5js.org/reference/#/libraries/p5.sound)

Example of p5.js sound library link to source code added to 'html' file, inside the < head > tag:

<script src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/addons/p5.sound.min.js"></script>

⏰ 60min

1. [Dowload link to code](https://git.vvvvvvaria.org/JoanaChicau/web-dev-studio/src/branch/master/example-p5) in the folder "example-p5" for an example of how to implement an external JavaScript library in your 'index.html'.
2. Open your files and edit them using a code editor of your choice (eg.: [Visual Studio](https://code.visualstudio.com/)). In parallel, open the HTML on a web browser and refresh the page to check your edits.
3. Implement a library from the [P5.JS List of Libraries](https://p5js.org/libraries/);

*🌈 🖥 P5.JS Libraries 🌈 🖥*

* Download and explore this collection of sketches [codexdesign](https://codexdesign.jessparriswestbrook.com/html/javascript_04motiondesign.html);

### PM: Making Session

#### ..⌒－→ Exercise 2.3: P5.JS REMAKE!

⏰ 45min

Recreate the paiting below:


Photo of The Flight of the dragonfly in Front of the Sun, 1968 paiting by Joan Miro.

**P5.JS Remakes**

> Focusing on rules and instructions is not something only programmers do, but also something you do when following a knitting/weaving patterns or recipe. [Source](https://aesthetic-programming.net/pages/5-auto-generator.html#setup-73310).

* Source [Exercise in class (10 PRINT)](https://aesthetic-programming.net/pages/5-auto-generator.html#exercise-in-class-10-print-21255)
* Reference [Shiffman's video](https://www.youtube.com/watch?v=bEyTZ5ZZxZs)
* Reference [“Randomness,” 10 PRINT CHR$(205.5+RND(1)); : GOTO 10](https://10print.org/)

/*
Rules:

1. Throw a dice randomly
2. Half of the chance print a backward slash
3. The other half of the chance will print a forward slash
4. Fill the whole canvas with the randomly generated slash 
invent your own 10Print by creating your own rules!*/

let x = 0;
let y = 0;
let spacing = 10;

function setup() {  
    createCanvas(windowWidth, windowHeight);
    background(0);
}
function draw() {  
    stroke(255);  
    if (random(1) < 0.5) {  //probabilty
    //backward slash    
    //line(0,0,10,10); 
    //example of backward slash    
    line(x, y, x+spacing, y+spacing);  
    } else {    
        //forward slash    
        //line(0,10,10,0); //example of forward slash
    line(x, y+spacing, x+spacing, y);  
    }  
    x+=spacing;  
    if (x > width) {    
        x = 0;    
        y += spacing;  
    }
}

**Vera Molnar**


Vera Molnar (Des)ordres (1974). [Source](https://news.artnet.com/art-world/vera-molnar-obituary-2406136)


[Source Code by Kevin Workman](https://editor.p5js.org/KevinWorkman/sketches/rFB4KF6e0)

**Casey Reas**


[Source Code](https://github.com/wholepixel/solving-sol/blob/master/289/cagrimmett/index.html)

**Casey Reas**


Inspired by Sol LeWitt's wall drawings, {Software} Structures explores the relevance of conceptual art to the idea of software as art. Casey Reas created three unique structures—text descriptions outlining dynamic relations between elements—which were then implemented: twenty-six pieces of software derived from the textual structures were coded to isolate different components, including interpretation, material, and process. For each of them, you may view the software, source code, and comments. [Text source](https://whitney.org/exhibitions/software-structures). More info on the [source code here](https://artport.whitney.org/commissions/software-structures/map.html).

<!--
#### ..⌒－→ Exercise 3.2: Code Jam

* Lets use the [p5.js live editor](https://www.teddavis.org/p5live/) to collaborate in realtime! (Note: works best in Chrome browser).
* -->

**WORK IN GROUPS**

⏰ 30min

_Create a concept for your group project:_
* define a set of rules that the whole group will follow (for eg.: 3-5 steps);
* collect relevant references;
* start making sketches;

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

Add your project ideas to [the pad.](https://pad.vvvvvvaria.org/HSLU-generativecodes25)

⏰ 60min

In groups start working on your idea; you can create a series of small generative designs;

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

⏰ 30min

Round of sharing ideas of each group;

**▶ → ▪ Task → Take Away:**

* Explore the [P5.JS Showcase](https://showcase.p5js.org/#/) and [P5.JS Community Sketches](https://p5js.org/sketches/), find interesting references and choose one to present in the next class.
* How are things going? Please leave your (anonymous) feedback on the sessions so far: [here](https://pad.vvvvvvaria.org/HSLU-generative-codes-25-feedback) 🙏 thank you!

## ::: Session 03 ::: Tutorials + Presentations

**Presentation P5.JS template:**
You can use/ adapt [this template](https://editor.p5js.org/JoBCB/sketches/bWe2wv3d1) to present your sketches.
Here is the [fullscreen version](https://editor.p5js.org/JoBCB/full/bWe2wv3d1).

#### AM: Group Work and Tutorials

**Morning Tutorials**
⏰ 15 min per group

**Sketching time!**

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

**How to document the projects?**

⏰ 15min

* Documentation can include:
* screenshots;
* video recording;
* documenting code;
* writings;

**REMEMBER:** Add your final project links and description at the end [of this pad.](https://pad.vvvvvvaria.org/HSLU-generativecodes25)

#### PM: 🌟Show Time🌟

**Group Work: reconvening and preparation**
⏰ 30 minutes

*Is it okay to record/ take screenshots?*

**Group Presentations**
⏰ approx. 15min per group

Format:
* 5min presentation;
* 5min Q&A;
* 5min Feedback;

**Feedback Time**

Please leave your (anonymous) feedback on the course here:
* [HSLU evasys]( https://evasys.hslu.ch/evasys/online.php?pswd=3T2X4)
* [etherpad](https://pad.vvvvvvaria.org/HSLU-generative-codes-25-feedback)

🙏 thank you!

**Goodbye Time**

[Join Cocoding in P5.JS Live!](https://www.teddavis.org/p5live/?cc=o09a9)

* Extra tip, for future collaborative editing in p5.js you can install: [p5party](https://p5party.org/).

## References ✨ 👀

**Bibliography**

* Friedman, Ken, Owen Smith, and Lauren Sawchyn, eds. The Fluxus Performance Workbook. Performance Research e-Publications, 2002.
* Galanter, Philip. “What is Generative Art? Complexity Theory as a Context for Art Theory,” in GA2003 - 6th Generative Art Conference, Milan, 2003.
* Gerstner, Karl. Designing programmes : instead of solutions for problems programmes for solution. Baden: Lars Müller Publishers, 2007.
* Maeda, John. Design by Numbers. Cambridge: MIT Press, 1999 [Link to publisher](https://mitpress.mit.edu/books/design-numbers)
* McCormack J., et al. “Ten Questions Concerning Generative Computer Art.” Leonardo 47, no. 2, 2014: 135–141.
* Shiffman, Daniel. The Nature of Code: Simulating Natural Systems with Processing Paperback. 2012.
* Conrad, Demian et all. Post Digital Graphic Design. Onomatopee, Genève, 2021 [Link to online version](https://www.postdigitalgraphicdesign.com/).

*🌈 🖥 Other JavaScript libraries 🌈 🖥*

* [Example Rita.JS](https://creative-coding.decontextualize.com/external-libraries/) by Allison Parrish
* [Paper.JS](http://paperjs.org/examples/)
* [Three.JS](https://threejs.org/)
* [Basil.JS](http://basiljs.ch) by Ted Davis
* [Tone.JS](https://tonejs.github.io/)
* [Awesome JavaScript libraries](https://github.com/sorrycc/awesome-javascript)

**Various Resources**

* [Algorithmic Pattern hub](https://algorithmicpattern.org/events/);
* [RUNME repository](https://runme.org/categories/index.html);
* Marcus du Sautoy, “The Secret Rules of Modern Living: Algorithms,” BBC Four (2015), https://www.bbc.co.uk/programmes/p030s6b3/clips.