Brief Refresher

Computation in Design

United Visual Artists, The Great Animal Orchestra, 2016.

United Visual Artists

 

UVA’s diverse body of work integrates new technologies with traditional media such as sculpture, performance and site-specific installation.

 

The Great Animal Orchestra is a performative space in which spectrograms specifically crafted for and generated by Bernie Krause’s soundscapes form an abstract projected landscape, a visual interpretation of the various global locations and times of day that Krause made the original recordings.

 

On the floor, in front of the projections a shallow pool of black-coloured water seamlessly reflects the data and brings another dimension to the work. Speakers generate ripples to visualise the sound frequencies inaudible to the human ear. The installation envelops the audience encouraging them to linger and reflect on the language of the living sounds and the phenomenon that each animal has its own acoustic signature in the oral tapestry of its ecosystem.

follow link for more

NONOTAK, DAYDREAM, 2013.

NONOTAK

 

 

NONOTAK work with light & sound installations and performance pieces to create ethereal, immersive and dreamlike environments.

 

DAYDREAM is an audiovisual installation that generates space distortions. Relationship between space and time, accelerations, contractions, shifts and metamorphosis have been the lexical field of the project. This installation aimed at establishing a physical connection between the virtual space and the real space, blurring the limits and submerging the audience into a short detachment from reality. Lights generate abstract spaces while sounds define the echoes of virtual spaces. Daydream is an invitation to contemplation.

 

follow link for more

Text

Text

Sougwen Chung and the mark-made-by-machine.

Olivia Jack, hydra, live coding tool.

Jessica In, She draws with code.

Text

Zach Lieberman

 

Zach Lieberman is an artist and educator based in New York City. He create artwork with code, and focus on building experimental drawing and animation tools. He make interactive environments that invite participants to become performers. His main focus is how computation can be used as medium for poetry.

 

Lieberman is a cofounder of the School for Poetic Computation. He is a professor (MIT Media Lab) at the Future Sketches group  which explores software as a medium for art and design, as well as how toolkits and pedagogical approaches can help inform a new generation of computational craft. In their work and courses they focus on computational sketches, often engaging with the past, as a way of suggesting different possible futures.

 

Zach Lieberman's website link

Text

Zach Lieberman on Poetic Computation, two talks.

> 2017

> 2019

Text

Text

Code Basics

This section gives an overview of basic coding concepts you should find useful to playfully explore activities and exercises for this class and creative coding in general.

syntax shape function variable conditional loop transformation object array .

Text

p5js

code

sketch

editor

p5js is a creative coding environment, a community and a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else. 

Code, simply put, is a set of instructions for programming a computer. In Creative Coding, we use instructions to create computer-generated results. Often visual, they can be static, dynamic, poetic, interactive and they can appear on a screen or on paper, as objects among many other things.

In Creative Coding, we call a sketch a computer program. Why a sketch? In art or design, a sketch is a common term for a rough and unfinished drawing, here a coded sketch should be seen similarly, rough and unfinished, to illustrate a thought, to bring a creative idea to life.

An editor, or more precisely a code editor, is a text editor program designed for editing source code for computer programs. In our particular case this semester, we will use a browser-based editor at editor.p5js.org, a web editor for p5js. For demos and tutorials we will use p5live.

Text

p5js editor. Your main tool to develop your sketches with. It is best to create a free account so that you can save your sketches with p5js

Text

Here is a brief rundown of the editor's interface.

1

2

3

4

5





 

6
















 

7





 

8

Main menu bar of the p5 web editor lets you access commonly used commands.

1

Use this section here to login or create an account.

2

Run/stop your sketch with these buttons. Enabling ‘Auto-refresh’ will reload the sketch whenever code is updated in the editor.

3

This is the public title of your sketch. Click on the pencil icon to rename it.

4

Click here to access the settings for the editor.

5

This is where you write all the code for your sketches. Notice the numbers along the left edge indicating specific lines of code.

6

The preview area is where you see the visual outcome of the code you write.

7

This is where JavaScript “talks” to you by displaying errors & other information.

8

Text

drawing and shapes

functions

loops

conditionals

transformations

variables

Core concepts

Text

drawing and shapes

functions

loops

conditionals

transformations

variables

Core concepts

In creative coding, shapes are like building blocks that you can use to draw visual elements such as squares, circles, triangles, and more. By combining and arranging these shapes, you can create intricate designs and artwork, all by writing code to express your creativity in a visual and interactive way.

drawing and shapes

Text

drawing and shapes

functions

loops

conditionals

transformations

variables

Core concepts

Functions in programming are like reusable recipes that take inputs, perform specific tasks, and give you outputs. They help organize and simplify code by allowing you to use the same set of instructions multiple times, making it easier to create complex designs and interactions in your projects.

 

 

 

functions

 

Text

function

parameters

arguments

Concepts

Example

Parameters are used in the definition of the function, between the brackets, eg. function add(x,y) here x and y are parameters.

A function is a set of statements that perform a task. Optionally, functions can have parameters. read more

Arguments are the actual values that get passed in when a function is called, eg. add(1,2) here 1 and 2 are arguments.

// 1. function without parameters:
// function hello1 will draw a rect at 0,0. 
// that's all it can do at the moment.
function hello1() {
  rect(0,0,100,100);
}
// call hello1 like this: hello1();

// 2. function with parameters
// hello2 takes 2 paramters, theX and theY
function hello2(theX, theY) {
  rect(theX, theY, 100, 100);
}

// when calling hello2() with 2 arguments
// these arguments will be passed on to the
// function as parameters theX and theY
// in the following call theX will be 50 and
// theY will become 200
// call hello2 like this: hello2(50,200);

Code Basics

Functions

Text

drawing and shapes

functions

loops

conditionals

transformations

variables

Core concepts

In creative coding, loops are like a magical "copy and paste" tool that allows you to draw or repeat elements multiple times without writing the same code over and over. They save time and make it easy to create patterns, animations, and interactive designs by automating repetitive tasks.

 

 

loops

Text

use a for-loop to create multiple copies 

for(let i=0;i<10;i++) { }

A for-loop, followed in parentheses, the for-loop takes three arguments, initialization, condition and variable modification

The first argument i.e. initialization runs only one time before the execution of the loop; It initializes a variable which is used in the condition for the loop.

The second argument i.e. condition is evaluated before every iteration; the loop terminates when this condition is satisfied. in this example when i is 10 or bigger, then the loop will exit.

The third and the last argument variable modification is used to modify the value of the variable used in condition after every iteration of the loop.

All statements go in between the curly brackets.

A for loop repeats one or more statements a given number of times.

Code Basics

Loops

Text

Commands

Example

for

for creates a loop that is useful for executing one section of code multiple times. read more

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

function draw() {
  background(0);
  stroke(255);
  noFill();
  push();
  translate(100,100);
  // here we will use a for-loop to draw
  // 10 rectangles vertically with a distance
  // of 50 pixels.
  for(let i=0;i<10;i++) {
    push();
    translate(0,i*50);
    rect(0,0,600,20);
    pop();
  }
  // the for-loop ends here after 10 rects
  // have been drawn, see code between {} (above).
  pop();
}

click for code

A 'for loop' consists of three different expressions inside of a parenthesis.These expressions are used to control the number of times the loop is run. read more

The concept of for-loops

Code Basics

Loops

Text

drawing and shapes

functions

loops

conditionals

transformations

variables

Core concepts

Conditionals in coding are like decision forks. You tell the computer to do something only if a certain condition is met. For example, if it's sunny, wear sunglasses; else, carry an umbrella. It helps your code make smart choices based on different situations, making it act like a smart assistant.

 

 

 

conditionals

Text

Decision making

do things when condition is false

Computers can be programmed to make decisions, to do different things in different circumstances. Decisions take the form of an if-then format. They start with a condition, which is then evaluated as either True or False.

 

do things when condition is true

true

false

Code Basics

Conditionals 

Text

Computers can be programmed to make decisions, to do different things in different circumstances.

Decisions take the form of an if-then format. They start with a condition, which is then evaluated as either True or False.

 

Code Basics

Conditionals 

Text

When programs are allowed to make decisions, the outcome is non-linear.

Code Basics

Conditionals 

Text

When programs are allowed to make decisions, the outcome is non-linear.

Code Basics

Conditionals 

Text

Commands

Example

if

Use if to specify a block of code to be executed, if a specified condition is met and true read more

else

else if

true

false

Use else to specify a block of code to be executed, if the same condition is false  read more

The push() and pop() functions can be embedded to provide more control over the positioning and rotation of shapes. read more

Also known as boolean, true when condition is fulfilled read more

Also known as boolean, false when condition is not fulfilled read more

// if–else
// check if mouse is pressed or not
function check2() {
  if (mouseIsPressed === true) {
    background(0,255,0);
  } else {
    background(255,0,0);
  }
}

// if–else if–else
// 3 checks based on the location 
// of mouseX which will change the 
// background color accordingly
function check3() {
  if(mouseX<100) {
    background(255,0,0);
  } else if(mouseX>100 && mouseX<200) {
    background(0,255,0);
  } else {
    background(0,0,255);
  }
}

Code Basics

Conditionals 

Text

drawing and shapes

functions

loops

conditionals

transformations

variables

Core concepts

Transformations in p5.js are like magic tricks for shapes. Think of a shape as a sticker on a sheet of paper. By using transformation commands like push() to save the current state, and pop() to go back, you can stretch, rotate, and move the shape around. It's like bending and twisting the paper without changing the sticker's original shape, making coded animations and designs.

 

 

 

 

transformations

Text

Commands

Example

When using transformations, the things you draw never change position; the coordinate system itself does. read more

push

pop

translate

rotate

scale

The push() function saves the current drawing style settings and transformations, while pop() restores these settings. read more

The push() and pop() functions can be embedded to provide more control over the positioning and rotation of shapes. read more

Specifies an amount to displace objects within the display window. read more

Rotates a shape by the amount specified by the angle parameter. read more

Increases or decreases the size of a shape by expanding or contracting vertices. read more

// use transformations to draw 2 rects
function draw() {
  fill(0,0,255,100);
  noStroke();
  
  // draw a rect at coordinate 50,200
  // without moving the rect but the
  // coordinate system using translate
  push();
  translate(50,200);
  rect(0,0,100,100)
  pop();
  
  // same as above but now we rotate
  // the rect by 45° (using radians)
  push();
  translate(50,200);
  rotate(HALF_PI); 
  rect(0,0,100,100)
  pop();

}

Above commands are called transformations

Code Basics

Transformations 

Text

drawing and shapes

functions

loops

conditionals

transformations

variables

Core concepts

Variables in coding act like labeled storage containers. They hold data that can change as your program runs. Think of them as virtual sticky notes where you can store numbers, words, or other information, making your code more flexible and responsive.

 

 

 

 

 

variables

Text

Reading Resources

Maeda, John. How to Speak Machine: Computational Thinking for the Rest of Us. New York: Portfolio//Penguin, 2019. Print.

Maurer, Luna, Julia Born, and Leo Reijnen. Conditional Design Workbook. Amsterdam: Valiz, 2013. Print.

McCarthy, Lauren, Casey Reas, and Ben Fry. Getting Started with p5.Js. San Francisco, CA: Maker Media, Inc., 2016. Print.

Soon, Winnie, and Geoff Cox. Aesthetic Programming: A Handbook of Software Studies. Open Humanities Press, 2020.

Text

Online Resources

Daniel Schiffman, The Coding Train. Code! Programming with p5js for Beginners

Xin Xin, Introduction to Programming in p5js. A series of videos demonstrating the basics of code and p5js.

OpenProcessing, a community of creative coders, educators, and designers that explore, experiment and play with code.

Text

Why are we learning to code?

What are we learning?

How are we learning?

What are we learning for?

Code is the language that today's technologies run on. Although code is often seen as a more scientific and technical matter, it is now an increasingly important aspect of a designer's toolkit, processes, and knowledge. Also, we can make beautiful things with it. 

We will learn basic and foundational coding skills to create visual outputs. We will learn to structure and apply commands to create browser based computer programs. Through demos, exercises and a final project brief we will learn and practice creative coding and share our findings.

We will use a coding environment called p5js which is a JavaScript library for Creative Coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else. p5js will be our main coding tool and environment to learn and practice.

We are learning to build a better understanding of the mechanisms that constitute a computer program. With this foundation and basic understanding of what code is, how code feels, what code can do, the aim is to make code a part of your designer's toolkit.

Text

Coding Spectrum

No Code

Low Code

Some Code

All Code

Requires few to no code to quickly build an application. This doesn't mean there is no code involved, the code just all runs in the background. Often purely UI, pull-down and drag-and-drop based.

Similar to No Code, however, some code is exposed in the application development environment you are using. Although often related to visual programming environments, a basic understanding of coding concepts is useful.

Limited to the tool

Some customisation possible

Some coding skills required 

Build your own

Wordpress

TouchDesigner

Code templates

Blender

html, css, JavaScript

Code frameworks (p5js, Processing)

Scripting

Python

Arduino

Unity

Knowing and understanding some code as a designer allows you to innovate, collaborate better, and communicate across disciplines when technical expertise is required. Basic knowledge in software and hardware development required–can be acquired through practice.

This is when you are able to build your own software with ease. Needless to say this needs time and practice but allows you to create your own tools applied to your design practice.

Cargo and similar website builder

Figma

Spark AR

Prompting (Midjourney, Dall-e, etc.)

Pen and Paper

Text Editor

Any programming language

Command Line

Git

Text

push

pop

translate

rotate

mouseX

mouseY

demotime

Transformations

Ask ChatGPT about code that you don't understand, ask for an explanation for a particular command and to give a simple example.

Text

Stylization

ellipse

line

rect

 

ellipse

line

rect

 

Shapes

fill

noFill

stroke

strokeWeight

noStroke

camelCase

Writing

rotate

Text

radians vs. degrees

Radians and degrees are different ways to measure angles. Imagine a full circle as a pizza, where cutting across the middle (one straight slice) is 180 degrees.

 

In radians, going from one side to the other is like half the circumference of the whole pizza, which is π (pi) radians.

 

Computers are optimized to calculate using radians, which travel counter-clockwise starting at 0.

TWO_PI 360°

PI 180°

HALF_PI 90°

QUARTER_PI 45°

background() alpha

random

frameCount

sin()

tan()

demotime

Animation

Ask ChatGPT about code that you don't understand, ask for an explanation for a particular command and to give a simple example.

Text

Other useful commands to know

mouseIsPressed()

keyIsPressed()

 

mousePressed()

keyPressed()

sine wave

Text

A sine wave is a wavy pattern that goes up and down smoothly in a repeating manner. Imagine a swing: when you push it, it goes back and forth, creating a wavy movement. In math, a sine wave is a curve that represents this kind of smooth oscillation. It's often used in music, physics, and animation to create natural and rhythmic patterns.

 

We can also think of a sine wave relative to angles in a circle. The value of sine oscillates between -1 and 1 depending on how far along the circle we have rotated.

1

0

-1

sine wave

sine wave

Text

Understanding the values that go into sin()

sin(frameCount * 0.1) * 100​

too large to use by itself!

multiply by small number ( >1 ) to control speed of oscillation

sin() will always give us values between -1 and 1

multiply sin() output by this "maximum" value

using sin with the values above will result in a smooth oscillation between -100 and 100 at a regular interval. We can limit the function to only produce positive values by wrapping every thing within abs:

abs(sin(frameCount * 0.1) * 100)

tangent wave

Text

tangent function

Similar to the sine wave, the tangent function can also be visualized as a journey of angles around a circle.

 

In this case, we see values that rise sharply from 0 to infinity, snapping to negative infinity, and then back to 0.

 

This peculiar property of the tangent function can be used to drive very interesting, snappy animations or alter the position where objects appear on the canvas.

sine wave

Text

Understanding the values that go into tan()

tan(frameCount * 0.1) * 100​

too large to use by itself!

multiply by small number ( >1 ) to control speed of snapping

tan() always gives a value between negative infinity and positive infinity

multiply tan() output by this "start/stop" value

using tan with the values above will result in a snappy transition between -infinity and infinity, at regular intervals. In this case, the values will appear to "start" and "stop" around 100. We can again, limit the output to only positive values by wrapping every thing within abs:

abs(tan(frameCount * 0.1) * 100)

Understanding the values that go into tan()

if

else

else if

mouseIsPressed()

keyIsPressed()

mousePressed()

keyPressed()

demotime

Conditionals

Ask ChatGPT about code that you don't understand, ask for an explanation for a particular command and to give a simple example.

Text

Iterations

for loop

Remember

saveCanvas

for loop

Text

Understanding the values that go into tan()

for(let i=0;i<10;i++)  { }

A for-loop, followed in parentheses, the for-loop takes three arguments, initialization, condition and variable modification

The first argument i.e. initialization runs only one time before the execution of the loop; It initializes a variable which is used in the condition for the loop.

The second argument i.e. condition is evaluated before every iteration; the loop terminates when this condition is satisfied. in this example when i is 10 or bigger, then the loop will exit.

The third and the last argument variable modification is used to modify the value of the variable used in condition after every iteration of the loop.

All statements go in between the curly brackets.

Understanding the values that go into a for loop

conditionals

Text

Understanding the values that go into tan()

if (condition 1 is true) {

     then this result happens

}    else    {

 base state happens

}

Understanding the values that go into if and else 

conditionals

Text

Understanding the values that go into if, else if and else 

if (condition 1 is true) {

     then this result happens

}    else   if (condition 2 is true) {

     then this result happens

}    else    {

 base state happens

}

cid-1-refresher

By Jo Ho

Source: Andreas Schlegel

cid-1-refresher

  • 70

More from Jo Ho