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.

Creative Coding 1 - 1 Introduction

1,010 views

Published on

Introduction in the Processing workshop at the IUAV University of Venice, October 2010

  • Be the first to comment

Creative Coding 1 - 1 Introduction

  1. 1. Crea%ve  Coding  Interac%on  Design  Lab  1,  IUAV,  WS  10/11   Till  Nagel,  FH  Potsdam,  10/2010  
  2. 2. Lovebytes   MaG  Pyke,  Karsten  Schmidt,  2007  
  3. 3. We  feel  fine   Jonathan  Harris,  Sepandar  Kamvar,  2005  
  4. 4. Translator  II,  Grower   Sabrina  Raaf,  2004  
  5. 5. Color  by  Numbers   Loove  Brooms,  Milo  Lavén,  Erik  Krikortz,  2006  
  6. 6. Color  by  Numbers   Loove  Brooms,  Milo  Lavén,  Erik  Krikortz,  2006  
  7. 7. 1  +  2  +  3  +  4  +  5  =  ?  
  8. 8. 1  +  2  +  3  +  4  +  5  =  ?  1  +  2  =          3  
  9. 9. 1  +  2  +  3  +  4  +  5  =  ?  1  +  2          3  +  3  =                  6  
  10. 10. 1  +  2  +  3  +  4  +  5  =  ?  1  +  2          3  +  3                  6  +  4  =                        10  
  11. 11. 1  +  2  +  3  +  4  +  5  =  ?  1  +  2          3  +  3                  6  +  4                        10  +  5  =  15  
  12. 12. Algorithm  
  13. 13. Algorithm   From:  The  Times,  23.  November  2005  
  14. 14. How  to  describe  these  paGerns?  
  15. 15. Algorithm  A  set  of  steps  or  rules.  A  language  understood  by  both  sides  (sender  and  recipient).  Can  be  wriEen  in  various  forms:  natural  language  such  as  English  or  Italian,  diagrams,  computer  programs,  etc  Specific,  simple  instrucJons.  Split  up  a  problem  into  smaller  ones.  
  16. 16. Excercise  Create  two  10  ×  10  cm  squares.  Draw  an  image  in  the  leO  one  in  a  way  nobody  else  can  see  what  you  are  drawing.  
  17. 17. Excercise  Create  two  10  ×  10  cm  squares.  Draw  an  image  in  the  leO  one  in  a  way  nobody  else  can  see  what  you  are  drawing.  Find  a  partner.  When  both  of  you  are  finished,  one  should  explain  his  drawing  to  the  other  one,  so  he  can  create  a  copy  of  it.  This  should  be  done  solely  by  describing  the  image.    
  18. 18. Let’s  start  coding  …  
  19. 19. Processing   Toolbar   Text  editor   Messages   Console  
  20. 20. Statements   doThis();   doThat();   makeBeautifulGraphics();  
  21. 21. size(width,  height);   size(100,  100);   size(300,  100);  
  22. 22. background(value);   background(0);   background(127);   background(255);  
  23. 23. Coordinate  system  and  posi%ons  
  24. 24. line(x1,  y1,  x2,  y2);   line(50,  20,  100,  100);   line(30,  10,  30,  180);   line(50,  10,  50,  180);   line(90,  120,  180,  95);  
  25. 25. rect(x,  y,  width,  height);   rect(50,  20,  100,  100);   rect(10,  10,  50,  50);   rect(80,  70,  60,  110);  
  26. 26. ellipse(x,  y,  width,  height);   ellipse(90,  90,  100,  100);   ellipse(90,  90,  160,  160);   ellipse(110,  120,  70,  30);  
  27. 27. Order  of  statements   ellipse(70,  70,  110,  110);   rect(80,  80,  100,  100);   rect(80,  80,  100,  100);   ellipse(70,  70,  110,  110);  
  28. 28. Some  other  drawing  statements   triangle(x1,  y1,  x2,  y2,  x3,  y3);   quad(x1,  y1,  x2,  y2,  x3,  y3,  x4,  y4);   curve(x1,  y1,  x2,  y2,  x3,  y3,  x4,  y4);   arc(x,  y,  width,  height,  start,  stop);   …  
  29. 29. Colours:  fill(value);   fill(0);   rect(80,  80,  100,  100);   fill(255);   rect(80,  80,  100,  100);   fill(0);   ellipse(70,  70,  110,  110);  
  30. 30. Colours:  stroke(value);   stroke(0);   rect(50,  20,  100,  100);   stroke(255);   rect(50,  20,  100,  100);   stroke(255);   fill(0);   rect(50,  20,  100,  100);  
  31. 31. Transparency   fill(255);   rect(80,  80,  100,  100);   fill(0,  100);   ellipse(70,  70,  110,  110);   fill(255);   rect(80,  80,  100,  100);   fill(0,  10);   ellipse(70,  70,  110,  110);  
  32. 32. Other  colour  statements   noStroke();   noFill();   strokeWeight(weight);   …  
  33. 33. Excercises   E1:  Write  your  first  Processing  sketch.  Download  and  install   Processing  from  hEp://processing.org/download     Sketch  a  composiJon  out  of  two  intersecJng  lines  and  one   rectangle  on  paper,  then  re-­‐create  it  in  Processing.   E2:  Draw  a  face.  Use  only  the  following  funcJons:  size(),   background(),  stroke(),  noStroke(),  fill(),  noFill(),  ellipse()     E3:  Read  the  tutorial  and  reference  about  colours.   Create  a  coloured  2D  filling  paEern  with  simple  shapes.  
  34. 34. Homework   H1:  Find  some  paEern  in  the  real  world.  Take  the  original  or   make  a  photo  and  bring  it  in,  tomorrow.   H2:  Read  the  interview  with  Jared  Tarbell  (Processing  book,   p.  157  or  handout).  Try  to  understand  the  algorithms  and  think   about  how  to  implement  those  in  Processing.  
  35. 35. Thank  you.   Copyright  Till  Nagel,  FH  Potsdam,  10/2010  

×