Upcoming SlideShare
×

# Creative Coding 1 - 3 Conditions

676 views
547 views

Published on

Published in: Design
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
676
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
9
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Creative Coding 1 - 3 Conditions

1. 1. Crea%ve  Coding  Interac%on  Design  Lab  1,  IUAV,  WS  10/11   Till  Nagel,  FH  Potsdam,  10/2010
2. 2. “   A  man  paints  with  his  brain,   not  with  his  hands.   Michelangelo
3. 3. Processing  Basics
4. 4. Processing  Basics   Example:  RectResizeWithMouse
5. 5. Processing  Reference
6. 6. A  more  in-­‐depth  look  …
7. 7. Variables
8. 8. Variables
9. 9. Variables
10. 10. Variables
11. 11. Variables
12. 12. Variables
13. 13. Variables
14. 14. Variables   void  setup()  {    size(200,  200);   }   void  draw()  {    ellipse(mouseX,  mouseY,  20,  20);   }
15. 15. Con%nuous  variable  update   int  x  =  10;   void  setup()  {    size(200,  200);   }   void  draw()  {    line(x,  0,  x,  100);    x  =  x  +  2;   }
16. 16. Con%nuous  variable  update
17. 17. Con%nuous  variable  update
18. 18. Con%nuous  variable  update
19. 19. Con%nuous  variable  update
20. 20. Con%nuous  variable  update   Example:  VarLoopChange
21. 21. Mul%ple  usage  of  variables   void  setup()  {    size(200,  200);   }   void  draw()  {    fill(mouseX,  mouseY,  0);    ellipse(mouseX,  mouseY,  20,  20);   }   Example:  Mul;Use
23. 23. Condi%onals
24. 24. Condi%onals   if  (test)  {    statements   }   Images  from:  Casey  Reas,  Ben  Fry,  Processing,  MIT  Press,  2007
25. 25. Condi%onals   if  (x  <  150)  {    line(20,  20,  180,  180);   }
26. 26. Condi%onals   if  (test)  {    statements  1   }   else  {    statements  2   }
27. 27. Condi%onals   if  (x  <  150)  {    line(20,  20,  180,  180);   }   else  {    ellipse(50,  50,  30,  30);   }   Example:  If1
28. 28. Condi%onals   Condi;onals  control  the  program  ﬂow.   Each  condi;on  can  be  either  true  or  false.   It  checks  if  a  condi;on  is  true.   If  condi;on  is  true,  the  inner  statements  are  executed.
29. 29. Condi%onals   int  a  =  10;   int  b  =  20;   if  (a  >  10)  {    line(10,  10,  100,  10);   }   if  (b  >=  20)  {    line(10,  20,  100,  20);   }
30. 30. Condi%onals   int  a  =  10;   int  b  =  20;   if  (a  >  10)  {    line(10,  10,  100,  10);   }   if  (b  >  20)  {    line(10,  20,  100,  20);   }
31. 31. Condi%onals   int  a  =  10;   int  b  =  20;   if  (a  >=  10)  {    line(10,  10,  100,  10);    b  =  b  +  1;   }   if  (b  >  20)  {    line(10,  20,  100,  20);   }
32. 32. Comparison  operators   >  greater  than   <  less  than   >=  greater  than  or  equal  to   <=  less  than  or  equal  to   ==    equal  to   !=  not  equal  to
33. 33. Simple  paTern  crea%on:  An  example   Example:  PaPern1
34. 34. Exercises  E6:  Download  and  modify  sketch  to  create  diﬀerent  paPerns.      hTp://%llnagel.com/iuav/PaTernTemplate.zip  Varia%on:  Make  it  interac;ve  so  that  the  results  depends  on  mouse  movements.  Varia%on:  Use  random()  to  randomize  the  graphic.
35. 35. Condi%onals  &  Interac%on   if  (mousePressed)  {    point(100,  200);   }
36. 36. Condi%onals  &  Interac%on   if  (mousePressed)  {    x  =  x  +  1;   }   ellipse(x,  y,  10,  10);
37. 37. Boolean  variables   boolean  upper  =  mouseY  <  height/2;   if  (upper)  {    fill(255,  0,  0);   }   else  {    fill(0,  255,  0);   }   ellipse(mouseX,  mouseY,  10,  10);   Example:  IfElseShowcase
38. 38. Combined  condi%ons   if  (mouseX  >  50)  {    fill(255,  0,  0);   }   rect(50,  0,  100,  height);   Example:  If2
39. 39. Combined  condi%ons   if  (mouseX  >  50  &&  mouseX  <  150)  {    fill(255,  0,  0);   }   rect(50,  0,  100,  height);
40. 40. Combined  condi%ons   if  (mouseX  >  50  &&  mouseX  <  150)  {    fill(255,  0,  0);   }   else  {    fill(255);   }   rect(50,  0,  100,  height);
41. 41. Logical  operators   &&  and   ||  or   !  not
42. 42. Exercises:  Saving  sketches
43. 43. Exercises  E8:  Create  a  simple  drawing  program.  A  visual  element  should  be  drawn  at  the  mouse  posi;on  if  the  user  has  pressed  a  mouse  buPon.  Varia%on:  Use  mouseButton  to  draw  diﬀerent  shapes  dependent  on  which  mouse  buPon  the  user  has  pressed.  E9:  Draw  an  ellipse  which  increases  its  size  as  long  as  the  mouseBuPon  is  pressed.  Varia%on:  Make  other  visual  variables  dependent  on  the  size  (strokeWeight,  colour,  transparency…)
44. 44. Exercises  E10:  Create  a  buPon  with  two  states:  When  the  mouse  is  over  and  when  it  is  out,  again.  Varia%on:  Implement  mouse  click,  too.  Varia%on:  Use  this  buPon  to  ac;vate  a  behaviour.
45. 45. Assignment  A1:  Create  three  buPons.  Each  of  it  should  trigger  some  ac;on.    -­‐  As  group  of  2  students  -­‐  Make  sketches  (on  paper)  to  discuss  about  your  idea  -­‐  Thursday:  brief  presenta;on
46. 46. boolean  active  =  false;  if  (mousePressed)  {    active  =  true;  }  if  (active)  {    ellipse(x,  y,  10,  10);  }
47. 47. Thank  you.   Copyright  Till  Nagel,  FH  Potsdam,  10/2010