1 of 32

Making art with code

1

2 of 32

2

Definition

& Repetition

Three instalments

Control

& Structure

Reusability

& Data

3 of 32

Instalment 1

Definition and Repetition

3

Contents

Why am I doing these talks?
Introduction to Generative Art
Definition and repetition tools:

Variables
Types
Loops

How can we use these tools to make art?
What’s next?

4 of 32

Why am I doing these talks?

4

5 of 32

5

Discuss some basic coding concepts

Demonstrate how coding can be used to create art

6 of 32

Coding and why we need it

6

7 of 32

7

Computers are everywhere

Computers require software to function

Software needs to be written

8 of 32

Introduction to Generative Art

8

9 of 32

Art created within a non-human, autonomous process

9

10 of 32

The classics, 1960s-2000s

10

11 of 32

Georg Nees

Frieder Nake

11

Schotter, 1968-70

13/9/65 Nr. 2 ("Hommage à Paul Klee"), 1965

German mathematician & computer scientist

@carlcanary

German mathematician & computer scientist

12 of 32

Vera Molnár

Michael Noll

12

Hypertransformations, variation, 1975-76

French artist

www.veramolnar.com

Computer composition with Lines, 1964

American Electrical Engineer

http://noll.uscannenberg.org/

13 of 32

The contemporaries, 2000s-present

13

14 of 32

Anders Hoff

14

Norwegian Search Engine Consultant & Mathematician

@inconvergent

https://inconvergent.net

Pen plotter

Differential Line

15 of 32

Zach Lieberman

15

American New Media Artist, Designer, Programmer & Educator

@zachlieberman

http://zach.li

16 of 32

Matt DesLauriers

16

Canadian generative artist & creative coder

@mattdesl

https://www.mattdesl.com

Crystal Towers - NYC

Page One, B&W Variations

17 of 32

Definition and Repetition concepts

17

Variables, Types and Loops

18 of 32

Variables

18

A way to bind a value to a name

19 of 32

19

The first step is to declare a variable…

This step can be skipped if we already know the value we want to assign to this name, but if all we know is that we need somewhere to store something, we can simply declare the name with the let keyword (which is now standard in JavaScript over var, but const is also very popular if you know you aren’t going to be re-assigning a variable’s value)

Variables

A way to bind a value / file pieces of data under a name
Tracking state in a program
‘Every value has a type that determines its role’
Primitive Types:

String: represent text
Number: numeric value
Boolean
Null
undefined

‘You should imagine bindings as tentacles, rather than boxes. They do not contain values; they grasp them-- to bindings can refer to the same value.’

Declare -> let numberOne; // undefined

Initialise -> numberOne = 1; // 1

Assignment operation
Declaration and initialisation usually done at same time -> let numberOne = 1;

Use -> while (numberOne > 1) {

Do something!

}

Further reading: scope, reference vs. value

Drawings to accompany each idea

20 of 32

20

21 of 32

21

22 of 32

Types

22

Number

String

Boolean

undefined

null

23 of 32

23

24 of 32

Basic operators

24

25 of 32

25

26 of 32

Loops

26

A way to repeat a set of instructions until a condition is met

Think of a train track as a program and a train as the physical execution of the program. A loop in a program is like a section in the track that also loops, until the lever is pushed the train will continue to go around in circles, but once the lever is pushed (a condition has been fulfilled), the train can continue on (through the program)

Anecdote around how to a human, the time it takes to set a variable as ‘blue’, it takes to run a loop 1000 times or more - mind bending when starting out with programming

Loops

Iteration
Run a piece of code multiple times
For loops

For loops, shorter and more comprehensive form of loop

Counter binding created to track progress, while loop (usually a test expression that checks whether the counter has reached its end value, counter updated to track progress)

break keyword

continue keyword

‘The idea of writing a program is to making something less work not more

Drawings to accompany each idea

27 of 32

27

28 of 32

How can we make art?

28

29 of 32

29

30 of 32

How can we build products?

30

31 of 32

What’s next?

31

32 of 32

Resources

32

#generative-art channel on Slack
Daniel Shiffman https://m.youtube.com/user/shiffman/videos
Tim Holman https://generativeartistry.com/
P5.js library https://p5js.org/