Topic presentation from Creative Tech Frankfurt's first meetup.

1. Introduction to Generative Art
with Processing
creative tech

2. What is Processing?
Open Source Programming Language
Made specifically for Visual Designers
Java Application, simplified syntax
Developed at MIT Media Labs by Casey
Reas and Benjamin Fry in 2001

4. Learn Processing
Processing:A Programming
Handbook for Visual
Designers and Artists, 2nd
Edition
by Casey Reas and Ben Fry
Getting Started with
Processing
(O’Reilly)
by Casey Reas and Ben Fry
Generative Art: A practical
guide using processing
by Matt Pearson

5. Learn Processing
The Nature of Code: Simulating
Natural Systems with Processing
by Daniel Shiffman

6. http://processing.org

7. Diverse Outputs
Stills
Animations
Image Manipulation
Performance Art

19. Now we will make some art

20. Installation
processing.org/download/?processing
Version 2.2.1
Unzip
Open It

22. Hello, World

23. void setup() {
}
void draw() {
}
Try running it, by clicking on the play button in
the top left

24. void setup() {
size(600,600);
background(#000000)
}
void draw() {
}
Try running it. You should now have a bigger
black box

25. void setup() {
size(600,600);
background(#000000);
}
void draw() {
ellipse(100, 100, 50, 50);
fill(#FF4067);
}
"Hello, world” in the form of a pink circle

26. Important: we are working in a coordinate space
100
100
600
600

27. ...
ellipse(100, 100, 50, 50);
...

28. void setup() {
size(600,600);
background(#000000);
}
void draw() {
for (int i=100; i<600; i=i+100) {
ellipse( i, 100, 50, 50);
fill(#FF4067);
}
}
Now that we know it’s a grid, we can exploit that and
make our art cooler. Do this by looping over the x-
coordinate.

29. void setup() {
size(600,600);
background(#000000);
}
void draw() {
for (int i=100; i<600; i=i+100) {
ellipse( i, 100, 50, 50);
fill(#FF4067);
}
for (int i=100; i<600; i=i+100) {
ellipse (100, i, 50, 50);
fill(#FF4067);
}
}

30. Loop?
This means that we do something to a variable in our function repeatedly, for
however many times we tell it to do it.
for (int i=100; i<600; i=i+100) {
ellipse(i, 100, 50, 50);
}
initial value
when to stop
interval
The program generates:
ellipse(100, 100, 50, 50), ellipse(200, 100, 50, 50),
ellipse(300, 100, 50, 50), ellipse(400, 100, 50, 50),
ellipse(500, 100, 50, 50)

32. void setup() {
size(600,600);
background(#000000);
}
void draw() {
for (int i=100; i<600; i=i+100) {
for (int j=100; j<600; j=j+100) {
ellipse( i, j, 50, 50);
fill(#FF4067);
}
}
}

33. void setup() {
size(600,600);
background(#000000);
}
void draw() {
for (int i=100; i<600; i=i+100) {
for (int j=100; j<600; j=j+100) {
ellipse( i, j, 50, 50);
fill(#FF4067);
}
}
}
MouseX, MouseY

35. Branding with data

36. Questions?