AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Interdisciplinary
Project Week

Workshop

Navigate left and right, up and down using the arrow keys on your keyboard

In this hands-on workshop (and jam session), we will explore the creation of moving images and sound often found in fields such as generative art, electronic music, interactive visuals or sonic landscapes.

From a series of prepared coded sketches, small programs often used by creatives to scribble and sketch computer-generated outputs, we will take an exploratory approach to create a medley of dancing algorithms materialising in audio-visual artefacts.

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Intro and Overview

Coded Visuals
Coded Sounds

Compile, putting it all together.
render, edit, export to .mp4

Demo and Try

Make changes to code

Approach

Play, change, record, sample

Ad-hoc
AlgoJam
Laptop Show

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Workshop breakdown: we will start with an introduction and overview of the workshop followed by  a demo of prepared code samples that render images and sound. You will then have time to play with given code samples to create a couple of audio-visual  artefacts.

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Intro and Overview

Navigate down for a selection of references, you can click on the images and text labels for more details about the artists.

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Intro and Overview

An Algorithm is a step-by-step set of instructions or a systematic procedure designed to solve a specific problem or accomplish a particular task.

When live coding, algorithms are typically written using code and can be dynamic and improvisational, allowing artists to generate and manipulate audiovisual content as part of a live creative process.

Navigate down for a selection of references, you can click on the images and text labels for more details about the artists.

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Intro and Overview

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Black Zenith

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Alva Noto

Carsten Nicolai

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Weidi Zhang

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Robert Henke

CBM 8032, live at CTM 2020

interview

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Olivia Jack

Hydra, Live Coding Video Synth Tool

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

AlgoRave

AlgoRave website

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Ryoji Ikeda

datamatics

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Ryoichi Kurokawa

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Ouchhh Studio

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Nonotak

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

sojamo

click to try the interactive version

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Demo and Try

Code samples and interactive browser tools are provided here for you to work and play with during the workshop.

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Demo and Try

p5js + shaders

Hydra

TidalCycles + Strudel

Gibber

Gibber.cc is an audiovisual live coding environment for the browser, enabling real-time music and graphics creation through coding, focusing on simplicity and community interaction for educational purposes.
read more

Strudel.cc is a web-based collaborative coding environment focusing on live coding performances, particularly excelling in real-time audio manipulation and synthesis for artistic expression.
read more

p5.js is a JavaScript library for creative coding, offering features for graphics, animation, and interaction, inspired by Processing's philosophy and syntax. Shaders are small programs that run on a GPU, controlling graphics rendering and visual effects.
read more

3

4

1

2

Hydra by Olivia Jack is a browser-based platform for live coding visuals, enabling real-time creation of complex visual effects through a simple, intuitive interface.
read more

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Demo and Try

p5.js is a JavaScript library for creative coding, offering features for graphics, animation, and interaction, inspired by Processing's philosophy and syntax. Shaders are small programs that run on a GPU, controlling graphics rendering and visual effects.

p5.js + shaders

Cmd+Enter

Shift+Cmd+Enter

f

Play sketch

Stop sketch

Fullscreen

Key Commands

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Demo and Try

Hydra by Olivia Jack is a browser-based platform for live coding visuals, enabling real-time creation of complex visual effects through a simple, intuitive interface.

hydra

Shift+Control+Enter

 

Play sketch

Key Commands

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Demo and Try

Gibber.cc is an audiovisual live coding environment for the browser, enabling real-time music and graphics creation through coding, focusing on simplicity and community interaction for educational purposes.

Gibber

Control+Enter

Alt+Enter

Control+.

Play section

Play line

Stop all

Key Commands

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Demo and Try

Strudel.cc is a web-based collaborative coding environment focusing on live coding performances, particularly excelling in real-time audio manipulation and synthesis for artistic expression. From the website also check out the learn section.

TidalCycles + Strudel

Control+Enter

Alt+Enter

Control+.

Play

Play

Stop

Key Commands

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Approach

Play

Change

Sample

Record

Use any of the provided code sketches and make changes to the numbers you can find inside the code.

Open any of the examples provided and play with them in an interactive way, for example by making sounds or playing a sound track to manipulate the image.

Create a series of video and audio samples from any of the running examples and record them to video or audio files.

Record your screen, or yourself, as you interact with the examples, making changes or observing the audio or visual effects that emerge over time.

AlgoJam

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Compile, putting it all together.

Render some of your visual outcomes to quicktime using the built in screen-recording option of your laptop or video record your screen with your mobile phone.

Edit your video if necessary and export to an .mp4 video file. Then, run the video in fullscreen mode and on loop on your laptop.

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

Setting up laptops on an array of pedestals

23–24

B-232

Elective Workshop

AlgoJam

Semester 2

AlgoJam

Laptop

Show

B-DC 221

Generative Type Workshop

Computation in Design

form in motion 1

dots

sine ripples

move to random location

kinetic type line

morphing rects

kinetic row shapes

sound reactive type

shapes from image

shiny rings

fragile tower

a-reactive

kinetic type shop

noise patterns

delaunay terrain

Refresh your p5js skills, choose a sketch from the list on the right and make the code and outcome your own by changing, extending, mashing up the sketch. Share the link to your sketch in the spreadsheet here before our class on Monday. Don't overthink this task, just do what you feel is right for 15-20 mins–for those of you new to p5js, give it a try and lets see how far it takes yoe

23–24

Semester 1

Prepwork, task 3

Sketches

bouncing circles