Introduction to Generative Art with Processing
36
Introduction to Generative Art with Processing creative tech
-
Upload
stefk00 -
Category
Technology
-
view
155 -
download
5
Transcript of Introduction to Generative Art with Processing
Introduction to Generative Art with Processing
creative tech
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
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
Learn Processing
The Nature of Code: Simulating Natural Systems with Processing
by Daniel Shiffman
Diverse Outputs
Stills
Animations
Image Manipulation
Performance Art
Now we will make some art
Installation
processing.org/download/?processing
Version 2.2.1
Unzip
Open It
Hello, World
void setup() {
}
void draw() {
}
Try running it, by clicking on the play button in the top left
void setup() {
size(600,600);
background(#000000)
}
void draw() {
}
Try running it. You should now have a bigger black box
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
Important: we are working in a coordinate space
100
100
600
600
...
ellipse(100, 100, 50, 50);
...
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.
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);
}
}
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)
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);
}
}
}
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
Branding with data
Questions?
![SM2220 Generative Art & Literaturesweb.cityu.edu.hk/sm2220/Experimental-literature[1].pdfExperimental literature SM2220 Generative Art & Literature Linda C.H. LAI. March 2009](https://static.fdocuments.us/doc/165x107/5aa1d6ea7f8b9ac67a8c4eb2/sm2220-generative-art-1pdfexperimental-literature-sm2220-generative-art-literature.jpg)
![EmotiGAN: Emoji Art using Generative Adversarial Networkscs229.stanford.edu/proj2017/final-reports/5244346.pdfA. Generative Adversarial Networks A Generative Adversarial Network[4]](https://static.fdocuments.us/doc/165x107/5ecde2ffc9dc5a794236dce0/emotigan-emoji-art-using-generative-adversarial-a-generative-adversarial-networks.jpg)
