Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Processing and creative coding

971 views

Published on

Presentation about creative coding

Published in: Art & Photos
  • Be the first to comment

  • Be the first to like this

Introduction to Processing and creative coding

  1. 1. processing: a visual overview of creative coding
  2. 2. graphic design I source: thedotisblack.tumblr.com (results can be saved as PDFs)
  3. 3. graphic design II source: caseybloomquist.tumblr.com
  4. 4. graphic design III source: www.diana-lange.de
  5. 5. Motion stills sources: p5art.tumblr.com www.joshuadavis.com
  6. 6. collages source: blog.the816.com
  7. 7. collages II source: www.loftomatic.com
  8. 8. using imported SVGs source: art.andrewwalpole.com
  9. 9. manipulating photos I source: p5art.tumblr.com
  10. 10. manipulating photos II source: www.sergioalbiac.com
  11. 11. data vizualization sources: www.aaronkoblin.com benfry.com
  12. 12. animated GIFs I source: beesandbombs.tumblr.com
  13. 13. animated GIFs II source: echophon.tumblr.com
  14. 14. animated GIFs III sources: myartexperiments.tumblr.com caseybloomquist.tumblr.com
  15. 15. animated GIFs IV sources: patakk.tumblr.com psykzz.tumblr.com p5art.tumblr.com
  16. 16. animated GIFs V source: hamoid.tumblr.com
  17. 17. particles and swarms (basic examples) source: www.openprocessing.org
  18. 18. animating existing pixels sources: bigblueboo.tumblr.com p5art.tumblr.com
  19. 19. reinterpreting existing material source: p5art.tumblr.com
  20. 20. using 3D space sources: jstephenlee.tumblr.com etall.tumblr.com bigblueboo.tumblr.com
  21. 21. interaction source: www.airtightinteractive.com web link source: caseybloomquist.tumblr.com web link
  22. 22. videos I source: uchu-jin.tumblr.com web link (video removed)
  23. 23. videos II source: vimeo.com/ravenkwok web link (video removed)
  24. 24. videos IV source: amnonp5.wordpress.com web link (video removed)
  25. 25. videos IV source: www.diana-lange.de web link (video removed)
  26. 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. 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. 28. don’t be afraid of the math, this is more or less all you need (basic trigonometry) source: www.zenbullets.com
  29. 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

×