introduction to processing and creative coding
DESCRIPTION
Presentation about creative codingTRANSCRIPT
processing: a visual overviewof creative coding
graphic design I
source: thedotisblack.tumblr.com
(results can be saved as PDFs)
graphic design II
source: caseybloomquist.tumblr.com
graphic design III
source: www.diana-lange.de
Motion stills
sources: p5art.tumblr.comwww.joshuadavis.com
collages
source: blog.the816.com
collages II
source: www.loftomatic.com
using imported SVGs
source: art.andrewwalpole.com
manipulating photos I
source: p5art.tumblr.com
manipulating photos II
source: www.sergioalbiac.com
data vizualization
sources: www.aaronkoblin.combenfry.com
animated GIFs I
source: beesandbombs.tumblr.com
animated GIFs II
source: echophon.tumblr.com
animated GIFs III
sources: myartexperiments.tumblr.comcaseybloomquist.tumblr.com
animated GIFs IV
sources: patakk.tumblr.compsykzz.tumblr.comp5art.tumblr.com
animated GIFs V
source: hamoid.tumblr.com
particles and swarms (basic examples)
source: www.openprocessing.org
animating existing pixels
sources: bigblueboo.tumblr.comp5art.tumblr.com
reinterpreting existing material
source: p5art.tumblr.com
using 3D space
sources: jstephenlee.tumblr.cometall.tumblr.com
bigblueboo.tumblr.com
interaction
source: www.airtightinteractive.com
web link
source: caseybloomquist.tumblr.com
web link
videos I
source: uchu-jin.tumblr.com
web link
(video removed)
videos IV
source: amnonp5.wordpress.com
web link
(video removed)
basic code example I (static)
source: p5art.tumblr.com
color bg = #352238, f = #87334F;
int step = 50;
float diam = 20;
void setup() {
size(600, 800);
background(bg);
fill(f);
noStroke();
for (int y=step/2; y<height; y +=step) {
for (int x=step/2; x< width; x += step) {
ellipse(x, y, diam, diam);
diam += 0.3;
}
}
}
basic code example II (animated)
source: p5art.tumblr.com
float unit, theta;
int num = 20, numFrames = 120;
void setup() {
size(500, 500);
unit = width/num;
noStroke();
}
void draw() {
background(0);
for (int y=0; y<=num; y++) {
for (int x=0; x<=num; x++) {
float distance = dist(width/2, height/2, x*unit, y*unit);
float offSet = map(distance, 0, width/2+height/2, 0, TWO_PI);
float sz = map(sin(theta+offSet),-1,1,unit*.1,unit*.9);
float start = map(sin(theta+offSet),-1,1,0,PI);
float lerpAmount = map(distance, 0, width/2+height/2, 0,1);
color col = lerpColor(#FCE400, #C60C0C, lerpAmount);
fill(col);
arc(x*unit, y*unit, sz, sz,start,start+PI);
}
}
theta += TWO_PI/numFrames;
}
don’t be afraid of the math, this is more or less all you need (basic trigonometry)
source: www.zenbullets.com
additional resources
A lot of links to free online tutorials (from total beginnerto more advanced) and to creative coding books can befound at p5art.tumblr.com/tutorials