SlideShare ist ein Scribd-Unternehmen logo
1 von 47
Downloaden Sie, um offline zu lesen
Crea%ve	
  Coding	
  
Interac%on	
  Design	
  Lab	
  1,	
  IUAV,	
  WS	
  10/11	
  




                                               Till	
  Nagel,	
  FH	
  Potsdam,	
  10/2010	
  
“	
  
   A	
  man	
  paints	
  with	
  his	
  brain,	
  
   not	
  with	
  his	
  hands.	
  
                             Michelangelo	
  
Processing	
  Basics	
  
Processing	
  Basics	
  




                           Example:	
  RectResizeWithMouse	
  
Processing	
  Reference	
  
A	
  more	
  in-­‐depth	
  look	
  …	
  
Variables	
  
Variables	
  
Variables	
  
Variables	
  
Variables	
  
Variables	
  
Variables	
  
Variables	
  

       void	
  setup()	
  {	
  
                	
  size(200,	
  200);	
  
       }	
  
       void	
  draw()	
  {	
  
                	
  ellipse(mouseX,	
  mouseY,	
  20,	
  20);	
  
       }	
  
Con%nuous	
  variable	
  update	
  

      int	
  x	
  =	
  10;	
  
      void	
  setup()	
  {	
  
              	
  size(200,	
  200);	
  
      }	
  
      void	
  draw()	
  {	
  
              	
  line(x,	
  0,	
  x,	
  100);	
  
              	
  x	
  =	
  x	
  +	
  2;	
  
      }	
  
Con%nuous	
  variable	
  update	
  
Con%nuous	
  variable	
  update	
  
Con%nuous	
  variable	
  update	
  
Con%nuous	
  variable	
  update	
  
Con%nuous	
  variable	
  update	
  




                                      Example:	
  VarLoopChange	
  
Mul%ple	
  usage	
  of	
  variables	
  

      void	
  setup()	
  {	
  
              	
  size(200,	
  200);	
  
      }	
  
      void	
  draw()	
  {	
  
              	
  fill(mouseX,	
  mouseY,	
  0);	
  
              	
  ellipse(mouseX,	
  mouseY,	
  20,	
  20);	
  
      }	
  



                                                              Example:	
  Mul;Use	
  
Reading	
  discussion	
  
Condi%onals	
  
Condi%onals	
  

  if	
  (test)	
  {	
  
          	
  statements	
  
  }	
  




                               Images	
  from:	
  Casey	
  Reas,	
  Ben	
  Fry,	
  Processing,	
  MIT	
  Press,	
  2007	
  
Condi%onals	
  

  if	
  (x	
  <	
  150)	
  {	
  
          	
  line(20,	
  20,	
  180,	
  180);	
  
  }	
  
Condi%onals	
  
 if	
  (test)	
  {	
  
         	
  statements	
  1	
  
 }	
  
 else	
  {	
  
         	
  statements	
  2	
  
 }	
  
Condi%onals	
  
 if	
  (x	
  <	
  150)	
  {	
  
         	
  line(20,	
  20,	
  180,	
  180);	
  
 }	
  
 else	
  {	
  
         	
  ellipse(50,	
  50,	
  30,	
  30);	
  
 }	
  




                                                     Example:	
  If1	
  
Condi%onals	
  

 Condi;onals	
  control	
  the	
  program	
  flow.	
  

 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.	
  
Condi%onals	
  

 int	
  a	
  =	
  10;	
  
 int	
  b	
  =	
  20;	
  
 if	
  (a	
  >	
  10)	
  {	
  
          	
  line(10,	
  10,	
  100,	
  10);	
  
 }	
  
 if	
  (b	
  >=	
  20)	
  {	
  
          	
  line(10,	
  20,	
  100,	
  20);	
  
 }	
  
Condi%onals	
  

 int	
  a	
  =	
  10;	
  
 int	
  b	
  =	
  20;	
  
 if	
  (a	
  >	
  10)	
  {	
  
          	
  line(10,	
  10,	
  100,	
  10);	
  
 }	
  
 if	
  (b	
  >	
  20)	
  {	
  
          	
  line(10,	
  20,	
  100,	
  20);	
  
 }	
  
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);	
  
 }	
  
Comparison	
  operators	
  

 >        	
  greater	
  than	
  

 <        	
  less	
  than	
  

 >=       	
  greater	
  than	
  or	
  equal	
  to	
  

 <=       	
  less	
  than	
  or	
  equal	
  to	
  

 ==	
     	
  equal	
  to	
  

 !=       	
  not	
  equal	
  to	
  
Simple	
  paTern	
  crea%on:	
  An	
  example	
  




                                                    Example:	
  PaPern1	
  
Exercises	
  

E6:	
  Download	
  and	
  modify	
  sketch	
  to	
  create	
  different	
  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.	
  
Condi%onals	
  &	
  Interac%on	
  


 if	
  (mousePressed)	
  {	
  
         	
  point(100,	
  200);	
  
 }	
  
Condi%onals	
  &	
  Interac%on	
  


 if	
  (mousePressed)	
  {	
  
         	
  x	
  =	
  x	
  +	
  1;	
  
 }	
  
 ellipse(x,	
  y,	
  10,	
  10);	
  
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	
  
Combined	
  condi%ons	
  


 if	
  (mouseX	
  >	
  50)	
  {	
  
         	
  fill(255,	
  0,	
  0);	
  
 }	
  
 rect(50,	
  0,	
  100,	
  height);	
  




                                          Example:	
  If2	
  
Combined	
  condi%ons	
  


 if	
  (mouseX	
  >	
  50	
  &&	
  mouseX	
  <	
  150)	
  {	
  
         	
  fill(255,	
  0,	
  0);	
  
 }	
  
 rect(50,	
  0,	
  100,	
  height);	
  
Combined	
  condi%ons	
  


 if	
  (mouseX	
  >	
  50	
  &&	
  mouseX	
  <	
  150)	
  {	
  
         	
  fill(255,	
  0,	
  0);	
  
 }	
  
 else	
  {	
  
         	
  fill(255);	
  
 }	
  
 rect(50,	
  0,	
  100,	
  height);	
  
Logical	
  operators	
  

 &&      	
  and	
  

 ||      	
  or	
  

 !       	
  not	
  
Exercises:	
  Saving	
  sketches	
  
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	
  different	
  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…)	
  
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.	
  
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	
  
boolean	
  active	
  =	
  false;	
  
if	
  (mousePressed)	
  {	
  
        	
  active	
  =	
  true;	
  
}	
  
if	
  (active)	
  {	
  
        	
  ellipse(x,	
  y,	
  10,	
  10);	
  
}	
  
Thank	
  you.	
  


                Copyright	
  Till	
  Nagel,	
  FH	
  Potsdam,	
  10/2010	
  

Weitere ähnliche Inhalte

Was ist angesagt?

Gentlest Introduction to Tensorflow - Part 3
Gentlest Introduction to Tensorflow - Part 3Gentlest Introduction to Tensorflow - Part 3
Gentlest Introduction to Tensorflow - Part 3Khor SoonHin
 
Creative Coding 1 - 1 Introduction
Creative Coding 1 - 1 IntroductionCreative Coding 1 - 1 Introduction
Creative Coding 1 - 1 IntroductionTill Nagel
 
Gentlest Introduction to Tensorflow - Part 2
Gentlest Introduction to Tensorflow - Part 2Gentlest Introduction to Tensorflow - Part 2
Gentlest Introduction to Tensorflow - Part 2Khor SoonHin
 
What is TensorFlow and why do we use it
What is TensorFlow and why do we use itWhat is TensorFlow and why do we use it
What is TensorFlow and why do we use itRobert John
 
Baby Steps to Machine Learning at DevFest Lagos 2019
Baby Steps to Machine Learning at DevFest Lagos 2019Baby Steps to Machine Learning at DevFest Lagos 2019
Baby Steps to Machine Learning at DevFest Lagos 2019Robert John
 
Gradient Descent
Gradient DescentGradient Descent
Gradient DescentJinho Choi
 
Lesson03 The Concept Of Limit 027 Slides
Lesson03   The Concept Of Limit 027 SlidesLesson03   The Concept Of Limit 027 Slides
Lesson03 The Concept Of Limit 027 SlidesMatthew Leingang
 
Lesson 16: Derivatives of Logarithmic and Exponential Functions
Lesson 16: Derivatives of Logarithmic and Exponential FunctionsLesson 16: Derivatives of Logarithmic and Exponential Functions
Lesson 16: Derivatives of Logarithmic and Exponential FunctionsMatthew Leingang
 
Kotlin - Null safety
Kotlin - Null safetyKotlin - Null safety
Kotlin - Null safetyss90311
 
Semianr 2. (2)
Semianr 2. (2)Semianr 2. (2)
Semianr 2. (2)jobishvd
 
Intermediate Microeconomic Theory Cheat Sheet 4
Intermediate Microeconomic Theory Cheat Sheet 4Intermediate Microeconomic Theory Cheat Sheet 4
Intermediate Microeconomic Theory Cheat Sheet 4Laurel Ayuyao
 
Deep Learning with Julia1.0 and Flux
Deep Learning with Julia1.0 and FluxDeep Learning with Julia1.0 and Flux
Deep Learning with Julia1.0 and FluxSatoshi Terasaki
 
Introduction to Generative Art with Processing
Introduction to Generative Art with ProcessingIntroduction to Generative Art with Processing
Introduction to Generative Art with Processingstefk00
 
Bar plots.ipynb colaboratory
Bar plots.ipynb   colaboratoryBar plots.ipynb   colaboratory
Bar plots.ipynb colaboratoryGokuldhev mony
 
Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...
Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...
Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...Fernando A. B. Sabino da Silva
 
Power Market and Models Convergence ?
Power Market and Models Convergence ?Power Market and Models Convergence ?
Power Market and Models Convergence ?NicolasRR
 

Was ist angesagt? (20)

Gentlest Introduction to Tensorflow - Part 3
Gentlest Introduction to Tensorflow - Part 3Gentlest Introduction to Tensorflow - Part 3
Gentlest Introduction to Tensorflow - Part 3
 
Creative Coding 1 - 1 Introduction
Creative Coding 1 - 1 IntroductionCreative Coding 1 - 1 Introduction
Creative Coding 1 - 1 Introduction
 
Gentlest Introduction to Tensorflow - Part 2
Gentlest Introduction to Tensorflow - Part 2Gentlest Introduction to Tensorflow - Part 2
Gentlest Introduction to Tensorflow - Part 2
 
Python program
Python programPython program
Python program
 
Google TensorFlow Tutorial
Google TensorFlow TutorialGoogle TensorFlow Tutorial
Google TensorFlow Tutorial
 
What is TensorFlow and why do we use it
What is TensorFlow and why do we use itWhat is TensorFlow and why do we use it
What is TensorFlow and why do we use it
 
Baby Steps to Machine Learning at DevFest Lagos 2019
Baby Steps to Machine Learning at DevFest Lagos 2019Baby Steps to Machine Learning at DevFest Lagos 2019
Baby Steps to Machine Learning at DevFest Lagos 2019
 
Gradient Descent
Gradient DescentGradient Descent
Gradient Descent
 
Lesson03 The Concept Of Limit 027 Slides
Lesson03   The Concept Of Limit 027 SlidesLesson03   The Concept Of Limit 027 Slides
Lesson03 The Concept Of Limit 027 Slides
 
Lesson 16: Derivatives of Logarithmic and Exponential Functions
Lesson 16: Derivatives of Logarithmic and Exponential FunctionsLesson 16: Derivatives of Logarithmic and Exponential Functions
Lesson 16: Derivatives of Logarithmic and Exponential Functions
 
TensorFlow
TensorFlowTensorFlow
TensorFlow
 
Kotlin - Null safety
Kotlin - Null safetyKotlin - Null safety
Kotlin - Null safety
 
Semianr 2. (2)
Semianr 2. (2)Semianr 2. (2)
Semianr 2. (2)
 
Intermediate Microeconomic Theory Cheat Sheet 4
Intermediate Microeconomic Theory Cheat Sheet 4Intermediate Microeconomic Theory Cheat Sheet 4
Intermediate Microeconomic Theory Cheat Sheet 4
 
Deep Learning with Julia1.0 and Flux
Deep Learning with Julia1.0 and FluxDeep Learning with Julia1.0 and Flux
Deep Learning with Julia1.0 and Flux
 
Introduction to Generative Art with Processing
Introduction to Generative Art with ProcessingIntroduction to Generative Art with Processing
Introduction to Generative Art with Processing
 
20090622 Bp Study#22
20090622 Bp Study#2220090622 Bp Study#22
20090622 Bp Study#22
 
Bar plots.ipynb colaboratory
Bar plots.ipynb   colaboratoryBar plots.ipynb   colaboratory
Bar plots.ipynb colaboratory
 
Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...
Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...
Robust Portfolio Optimization with Multivariate Copulas: A Worst-Case CVaR Ap...
 
Power Market and Models Convergence ?
Power Market and Models Convergence ?Power Market and Models Convergence ?
Power Market and Models Convergence ?
 

Ähnlich wie Creative Coding 1 - 3 Conditions

Creative Coding 1 - 2 Variables
Creative Coding 1 - 2 VariablesCreative Coding 1 - 2 Variables
Creative Coding 1 - 2 VariablesTill Nagel
 
Applied Design Patterns - A Compiler Case Study
Applied Design Patterns - A Compiler Case Study Applied Design Patterns - A Compiler Case Study
Applied Design Patterns - A Compiler Case Study CodeOps Technologies LLP
 
Curve fitting and Optimization
Curve fitting and OptimizationCurve fitting and Optimization
Curve fitting and OptimizationSyahrul Senin
 
Introduction to JavaScript Scripting Language
Introduction to JavaScript Scripting LanguageIntroduction to JavaScript Scripting Language
Introduction to JavaScript Scripting Languagepushplata29
 
Review questions and answers
Review questions and answersReview questions and answers
Review questions and answersIIUM
 
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)TongXu520
 
Introduction to programming - class 3
Introduction to programming - class 3Introduction to programming - class 3
Introduction to programming - class 3Paul Brebner
 
Scala: Pattern matching, Concepts and Implementations
Scala: Pattern matching, Concepts and ImplementationsScala: Pattern matching, Concepts and Implementations
Scala: Pattern matching, Concepts and ImplementationsMICHRAFY MUSTAFA
 
Rational function representation
Rational function representationRational function representation
Rational function representationrey castro
 
2. The Fortran program below computes the Taylor series approximati.pdf
2. The Fortran program below computes the Taylor series approximati.pdf2. The Fortran program below computes the Taylor series approximati.pdf
2. The Fortran program below computes the Taylor series approximati.pdfkannanelectronite
 
Standford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, ViewsStandford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, Views彼得潘 Pan
 
COM1407: Program Control Structures – Repetition and Loops
COM1407: Program Control Structures – Repetition and Loops COM1407: Program Control Structures – Repetition and Loops
COM1407: Program Control Structures – Repetition and Loops Hemantha Kulathilake
 
More instructions for the lab write-up1) You are not obli.docx
More instructions for the lab write-up1) You are not obli.docxMore instructions for the lab write-up1) You are not obli.docx
More instructions for the lab write-up1) You are not obli.docxgilpinleeanna
 
Machine learning
Machine learningMachine learning
Machine learningShreyas G S
 
fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920
fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920
fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920Karl Rudeen
 

Ähnlich wie Creative Coding 1 - 3 Conditions (20)

Creative Coding 1 - 2 Variables
Creative Coding 1 - 2 VariablesCreative Coding 1 - 2 Variables
Creative Coding 1 - 2 Variables
 
Applied Design Patterns - A Compiler Case Study
Applied Design Patterns - A Compiler Case Study Applied Design Patterns - A Compiler Case Study
Applied Design Patterns - A Compiler Case Study
 
Curve fitting and Optimization
Curve fitting and OptimizationCurve fitting and Optimization
Curve fitting and Optimization
 
Introduction to JavaScript Scripting Language
Introduction to JavaScript Scripting LanguageIntroduction to JavaScript Scripting Language
Introduction to JavaScript Scripting Language
 
Introduction to Processing
Introduction to ProcessingIntroduction to Processing
Introduction to Processing
 
Review questions and answers
Review questions and answersReview questions and answers
Review questions and answers
 
program logbook 2
program logbook 2program logbook 2
program logbook 2
 
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)
 
E10
E10E10
E10
 
Introduction to programming - class 3
Introduction to programming - class 3Introduction to programming - class 3
Introduction to programming - class 3
 
Scala: Pattern matching, Concepts and Implementations
Scala: Pattern matching, Concepts and ImplementationsScala: Pattern matching, Concepts and Implementations
Scala: Pattern matching, Concepts and Implementations
 
Rational function representation
Rational function representationRational function representation
Rational function representation
 
2. The Fortran program below computes the Taylor series approximati.pdf
2. The Fortran program below computes the Taylor series approximati.pdf2. The Fortran program below computes the Taylor series approximati.pdf
2. The Fortran program below computes the Taylor series approximati.pdf
 
Standford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, ViewsStandford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, Views
 
COM1407: Program Control Structures – Repetition and Loops
COM1407: Program Control Structures – Repetition and Loops COM1407: Program Control Structures – Repetition and Loops
COM1407: Program Control Structures – Repetition and Loops
 
More instructions for the lab write-up1) You are not obli.docx
More instructions for the lab write-up1) You are not obli.docxMore instructions for the lab write-up1) You are not obli.docx
More instructions for the lab write-up1) You are not obli.docx
 
Canvas
CanvasCanvas
Canvas
 
Canvas
CanvasCanvas
Canvas
 
Machine learning
Machine learningMachine learning
Machine learning
 
fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920
fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920
fb69b412-97cb-4e8d-8a28-574c09557d35-160618025920
 

Mehr von Till Nagel

Visually analyzing urban mobility - Results and insights from three student r...
Visually analyzing urban mobility - Results and insights from three student r...Visually analyzing urban mobility - Results and insights from three student r...
Visually analyzing urban mobility - Results and insights from three student r...Till Nagel
 
GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...
GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...
GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...Till Nagel
 
Unfolding Spatial Data
Unfolding Spatial DataUnfolding Spatial Data
Unfolding Spatial DataTill Nagel
 
Human-Data Interaction
Human-Data InteractionHuman-Data Interaction
Human-Data InteractionTill Nagel
 
Einführung in die Datenvisualisierung - Workshop
Einführung in die Datenvisualisierung - WorkshopEinführung in die Datenvisualisierung - Workshop
Einführung in die Datenvisualisierung - WorkshopTill Nagel
 
Inszenierte Analyse - Von attraktiver Visualisierung zu tieferem Verständnis
Inszenierte Analyse - Von attraktiver Visualisierung zu tieferem VerständnisInszenierte Analyse - Von attraktiver Visualisierung zu tieferem Verständnis
Inszenierte Analyse - Von attraktiver Visualisierung zu tieferem VerständnisTill Nagel
 
cf. city flows - A comparative visualization of bike sharing systems
cf. city flows - A comparative visualization of bike sharing systemscf. city flows - A comparative visualization of bike sharing systems
cf. city flows - A comparative visualization of bike sharing systemsTill Nagel
 
Meandering - On the design process of visualizations
Meandering - On the design process of visualizationsMeandering - On the design process of visualizations
Meandering - On the design process of visualizationsTill Nagel
 
Unfolding the City - Urban Mobility Visualizations
Unfolding the City - Urban Mobility VisualizationsUnfolding the City - Urban Mobility Visualizations
Unfolding the City - Urban Mobility VisualizationsTill Nagel
 
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...Till Nagel
 
Unfolding the City
Unfolding the CityUnfolding the City
Unfolding the CityTill Nagel
 
Unfolding - Workshop at RCA
Unfolding - Workshop at RCAUnfolding - Workshop at RCA
Unfolding - Workshop at RCATill Nagel
 
Unfolding - A Library for Interactive Maps and Geovisualizations
Unfolding - A Library for Interactive Maps and GeovisualizationsUnfolding - A Library for Interactive Maps and Geovisualizations
Unfolding - A Library for Interactive Maps and GeovisualizationsTill Nagel
 
Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...
Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...
Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...Till Nagel
 
Multitouch Lab Intro - Urbane Ebenen
Multitouch Lab Intro - Urbane EbenenMultitouch Lab Intro - Urbane Ebenen
Multitouch Lab Intro - Urbane EbenenTill Nagel
 
Sankey Arcs - Visualizing edge weights in path graphs
Sankey Arcs - Visualizing edge weights in path graphsSankey Arcs - Visualizing edge weights in path graphs
Sankey Arcs - Visualizing edge weights in path graphsTill Nagel
 
Interactive Exploration of Geospatial Network Visualization
Interactive Exploration of Geospatial Network Visualization Interactive Exploration of Geospatial Network Visualization
Interactive Exploration of Geospatial Network Visualization Till Nagel
 
Live Singapore - Interaktive Visualisierungen urbaner Daten
Live Singapore - Interaktive Visualisierungen urbaner DatenLive Singapore - Interaktive Visualisierungen urbaner Daten
Live Singapore - Interaktive Visualisierungen urbaner DatenTill Nagel
 
Unfolding Library for Interactive Maps
Unfolding Library for Interactive MapsUnfolding Library for Interactive Maps
Unfolding Library for Interactive MapsTill Nagel
 

Mehr von Till Nagel (20)

Visually analyzing urban mobility - Results and insights from three student r...
Visually analyzing urban mobility - Results and insights from three student r...Visually analyzing urban mobility - Results and insights from three student r...
Visually analyzing urban mobility - Results and insights from three student r...
 
GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...
GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...
GeoVisualisierung in der Lehre - Wie forschendes Lernen zu funktionalen Proto...
 
Unfolding Spatial Data
Unfolding Spatial DataUnfolding Spatial Data
Unfolding Spatial Data
 
Human-Data Interaction
Human-Data InteractionHuman-Data Interaction
Human-Data Interaction
 
Einführung in die Datenvisualisierung - Workshop
Einführung in die Datenvisualisierung - WorkshopEinführung in die Datenvisualisierung - Workshop
Einführung in die Datenvisualisierung - Workshop
 
Inszenierte Analyse - Von attraktiver Visualisierung zu tieferem Verständnis
Inszenierte Analyse - Von attraktiver Visualisierung zu tieferem VerständnisInszenierte Analyse - Von attraktiver Visualisierung zu tieferem Verständnis
Inszenierte Analyse - Von attraktiver Visualisierung zu tieferem Verständnis
 
cf. city flows - A comparative visualization of bike sharing systems
cf. city flows - A comparative visualization of bike sharing systemscf. city flows - A comparative visualization of bike sharing systems
cf. city flows - A comparative visualization of bike sharing systems
 
Meandering - On the design process of visualizations
Meandering - On the design process of visualizationsMeandering - On the design process of visualizations
Meandering - On the design process of visualizations
 
Unfolding the City - Urban Mobility Visualizations
Unfolding the City - Urban Mobility VisualizationsUnfolding the City - Urban Mobility Visualizations
Unfolding the City - Urban Mobility Visualizations
 
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...
Touching Transport - A Case Study on Visualizing Metropolitan Public Transit ...
 
Unfolding the City
Unfolding the CityUnfolding the City
Unfolding the City
 
Unfolding - Workshop at RCA
Unfolding - Workshop at RCAUnfolding - Workshop at RCA
Unfolding - Workshop at RCA
 
Unfolding - A Library for Interactive Maps and Geovisualizations
Unfolding - A Library for Interactive Maps and GeovisualizationsUnfolding - A Library for Interactive Maps and Geovisualizations
Unfolding - A Library for Interactive Maps and Geovisualizations
 
Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...
Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...
Unfolding - A Simple Library for Interactive Maps and Geovisualizations in Pr...
 
mæve
mævemæve
mæve
 
Multitouch Lab Intro - Urbane Ebenen
Multitouch Lab Intro - Urbane EbenenMultitouch Lab Intro - Urbane Ebenen
Multitouch Lab Intro - Urbane Ebenen
 
Sankey Arcs - Visualizing edge weights in path graphs
Sankey Arcs - Visualizing edge weights in path graphsSankey Arcs - Visualizing edge weights in path graphs
Sankey Arcs - Visualizing edge weights in path graphs
 
Interactive Exploration of Geospatial Network Visualization
Interactive Exploration of Geospatial Network Visualization Interactive Exploration of Geospatial Network Visualization
Interactive Exploration of Geospatial Network Visualization
 
Live Singapore - Interaktive Visualisierungen urbaner Daten
Live Singapore - Interaktive Visualisierungen urbaner DatenLive Singapore - Interaktive Visualisierungen urbaner Daten
Live Singapore - Interaktive Visualisierungen urbaner Daten
 
Unfolding Library for Interactive Maps
Unfolding Library for Interactive MapsUnfolding Library for Interactive Maps
Unfolding Library for Interactive Maps
 

Kürzlich hochgeladen

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 

Kürzlich hochgeladen (18)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 

Creative Coding 1 - 3 Conditions

  • 1. Crea%ve  Coding   Interac%on  Design  Lab  1,  IUAV,  WS  10/11   Till  Nagel,  FH  Potsdam,  10/2010  
  • 2. “   A  man  paints  with  his  brain,   not  with  his  hands.   Michelangelo  
  • 4. Processing  Basics   Example:  RectResizeWithMouse  
  • 6. A  more  in-­‐depth  look  …  
  • 14. Variables   void  setup()  {    size(200,  200);   }   void  draw()  {    ellipse(mouseX,  mouseY,  20,  20);   }  
  • 15. Con%nuous  variable  update   int  x  =  10;   void  setup()  {    size(200,  200);   }   void  draw()  {    line(x,  0,  x,  100);    x  =  x  +  2;   }  
  • 20. Con%nuous  variable  update   Example:  VarLoopChange  
  • 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  
  • 24. Condi%onals   if  (test)  {    statements   }   Images  from:  Casey  Reas,  Ben  Fry,  Processing,  MIT  Press,  2007  
  • 25. Condi%onals   if  (x  <  150)  {    line(20,  20,  180,  180);   }  
  • 26. Condi%onals   if  (test)  {    statements  1   }   else  {    statements  2   }  
  • 27. Condi%onals   if  (x  <  150)  {    line(20,  20,  180,  180);   }   else  {    ellipse(50,  50,  30,  30);   }   Example:  If1  
  • 28. Condi%onals   Condi;onals  control  the  program  flow.   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. 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. 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. 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. Comparison  operators   >  greater  than   <  less  than   >=  greater  than  or  equal  to   <=  less  than  or  equal  to   ==    equal  to   !=  not  equal  to  
  • 33. Simple  paTern  crea%on:  An  example   Example:  PaPern1  
  • 34. Exercises   E6:  Download  and  modify  sketch  to  create  different  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. Condi%onals  &  Interac%on   if  (mousePressed)  {    point(100,  200);   }  
  • 36. Condi%onals  &  Interac%on   if  (mousePressed)  {    x  =  x  +  1;   }   ellipse(x,  y,  10,  10);  
  • 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. Combined  condi%ons   if  (mouseX  >  50)  {    fill(255,  0,  0);   }   rect(50,  0,  100,  height);   Example:  If2  
  • 39. Combined  condi%ons   if  (mouseX  >  50  &&  mouseX  <  150)  {    fill(255,  0,  0);   }   rect(50,  0,  100,  height);  
  • 40. Combined  condi%ons   if  (mouseX  >  50  &&  mouseX  <  150)  {    fill(255,  0,  0);   }   else  {    fill(255);   }   rect(50,  0,  100,  height);  
  • 41. Logical  operators   &&  and   ||  or   !  not  
  • 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  different  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. 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. 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. boolean  active  =  false;   if  (mousePressed)  {    active  =  true;   }   if  (active)  {    ellipse(x,  y,  10,  10);   }  
  • 47. Thank  you.   Copyright  Till  Nagel,  FH  Potsdam,  10/2010