Introduction to Processing and 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
- 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