Presentation about creative coding

1. processing:
a visual overview
of creative coding

2. graphic design I
source: thedotisblack.tumblr.com
(results can be saved as PDFs)

3. graphic design II
source: caseybloomquist.tumblr.com

4. graphic design III
source: www.diana-lange.de

5. Motion stills
sources: p5art.tumblr.com
www.joshuadavis.com

6. collages
source: blog.the816.com

7. collages II
source: www.loftomatic.com

8. using imported SVGs
source: art.andrewwalpole.com

9. manipulating photos I
source: p5art.tumblr.com

10. manipulating photos II
source: www.sergioalbiac.com

11. data vizualization
sources: www.aaronkoblin.com
benfry.com

12. animated GIFs I
source: beesandbombs.tumblr.com

13. animated GIFs II
source: echophon.tumblr.com

14. animated GIFs III
sources: myartexperiments.tumblr.com
caseybloomquist.tumblr.com

15. animated GIFs IV
sources: patakk.tumblr.com
psykzz.tumblr.com
p5art.tumblr.com

16. animated GIFs V
source: hamoid.tumblr.com

17. particles and swarms (basic examples)
source: www.openprocessing.org

18. animating existing pixels
sources: bigblueboo.tumblr.com
p5art.tumblr.com

19. reinterpreting existing material
source: p5art.tumblr.com

20. using 3D space
sources: jstephenlee.tumblr.com
etall.tumblr.com
bigblueboo.tumblr.com

21. interaction
source: www.airtightinteractive.com
web link
source: caseybloomquist.tumblr.com
web link

22. videos I
source: uchu-jin.tumblr.com
web link
(video removed)

23. videos II
source: vimeo.com/ravenkwok
web link
(video removed)

24. videos IV
source: amnonp5.wordpress.com
web link
(video removed)

25. videos IV
source: www.diana-lange.de
web link
(video removed)

26. 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;
}
}
}

27. 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;
}

28. don’t be afraid of the math, this is more or less all you need (basic trigonometry)
source: www.zenbullets.com

29. additional resources
A lot of links to free online tutorials (from total beginner
to more advanced) and to creative coding books can be
found at p5art.tumblr.com/tutorials