User Tools

Site Tools


courses:2010.11.03.intro_prototyping

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
courses:2010.11.03.intro_prototyping [2010/11/07 22:02]
camille added code made during the course
courses:2010.11.03.intro_prototyping [2010/11/14 04:19] (current)
camille removed portraits
Line 1: Line 1:
 +====== nov 3: Processing: variables, functions, operators, control statements ======
 +
 +
 +==== Variables ====
 +
 +In summary: a variable is a container with a name and content (memory space). It is used to store a value.
 +  ​
 +In Processing you have specifically declare the type of variables you are using (typed variables):
 +<​code>​
 +boolean a = true   // create a variable "​a"​ of the type "​boolean"​ (true or false)
 +int b = 0;         // create a variable "​b"​ of the type "​int"​ (integer ±2 147 483 647)
 +float c = 0.0;     // create a variable "​c"​ of the type "​float"​ (number with decimal precision)
 +byte d = 127       // create a variable "​d"​ of the type "​byte"​ (number between 127 and -128) 
 +char e = '​A' ​      // create a variable "​e"​ of the type "​char"​ (character)
 +long f = 6655554; ​ // create a variable "​f"​ of the type "​long"​ (much large than integer) ​
 +</​code>​
 +
 +<​code>​
 +// declare our variables, at the right level/scope so they are accessible throughout the program
 +int circleSize = 15;
 +int circleX = 20;
 +int startX = 100;
 +int startY = 20;
 +int delta = 40;
 +
 +void setup(){
 +
 +  size(600,​400);​
 +  smooth();
 +  frameRate(30);​
 +  println("​starting up");
 +
 +}
 +
 +
 +void draw(){
 +
 +  // println("​loop"​);​
 +  // background(100);​
 +  fill(100, 10);
 +  rect(0, 0, width, height);
 +
 +
 +  // startX ​ = mouseX;
 +  // startY = mouseY
 +  delta = mouseX;
 +
 +
 +  // 10x10 circles
 +  for(int counterY = 0; counterY <10 ; counterY = counterY + 1){
 +
 +    for(int counter = 0; counter < 10 ; counter = counter + 1){ 
 +      // println("​counter:​ " + counter);
 +      fill(255);
 +      ellipse(startX + delta * counter, startY + delta * counterY, circleSize, circleSize);​
 +    }
 +
 +  }
 +
 +}
 +</​code>​
 +
 +
 +==== Functions ====
 +
 +  * a structured block of code
 +  * it has a type, a name and can have parameters (values passed to it)
 +
 +A simple function of type //void// called //setup// and it requires no parameters
 +<​code>​
 +void setup(){
 +
 +}
 +</​code>​
 +
 +Another function called //fill// and it can have different number of parameters
 +<​code>​
 +fill(0); ​            // greyscale
 +fill(100, 200);      // greyscale and alpha
 +fill(255, 0, 0);     // RGB
 +fill(255, 0, 0, 20); // RGB and alpha
 +</​code>​
 +
 +==== Operators ====
 +
 +<​code>​
 +&& (logical AND)
 +! (logical NOT)
 +|| (logical OR)
 +
 +== (equality)
 +> (greater than)
 +>= (greater than or equal to)
 +!= (inequality)
 +< (less than)
 +<= (less than or equal to)
 +</​code>​
 +
 +
 +==== Conditional statements ====
 +
 +//if/then// condition
 +<​code>​
 +if (test) { 
 +  statements ​
 +}
 +</​code>​
 +
 +//else// condition
 +<​code>​
 +if(expression) { 
 +  statements ​
 +} else { 
 +  statements ​
 +
 +
 +// also possible
 +
 +if(expression) { 
 +  statements ​
 +} else if(expression) { 
 +  statements ​
 +} else { 
 +  statements ​
 +}
 +</​code>​
 +
 +
 +//for loop//​statement
 +<​code>​
 +</​code>​
 +
 +//while loop// statement
 +<​code>​
 +</​code>​
 +
 +//​continue//​ statement
 +<​code>​
 +</​code>​
 +
 +//break// statement
 +<​code>​
 +</​code>​
 +
 +==== For loop and while, you can achieve the same result ====
 +<code java>
 +void setup() {
 +  size(800, 600);  ​
 +  smooth();
 +  frameRate(20);​
 +}
 +
 +void draw() {
 +  background(0);​
 +  fill(255, 0, 0);
 +  ​
 +  /*
 +  for( int x = 0; x <= 19; x++){
 +     ​ellipse(x * 30, 100, 20, 20); 
 +  }
 +  */
 +  ​
 +  int x = 0;
 +  ​
 +  while(x * 30 <= mouseX){
 +    println("​drawing ellipse number " + x);
 +    ellipse(x * 30, 100, 20, 20); 
 +    x++;
 +  }
 +}
 +</​code>​
 +
 +
 +==== Mouse and Keyboard Inputs ====
 +
 +How to control the code and build your logic/​process/​structure
 +
 +== Mouse ==
 +  * //​mouseButton//​ accessible directly in the draw function //​mousePressed//​ or in its own function //​mousePressed()//​
 +  * //​mouseReleased()//,​ //​mouseMoved()//​ and //​mouseDragged()//​ also available
 +  * mouse coordinates:​ //mouseX// and //mouseY//
 +  * mouse coordinates of the previous frame: //pmouseX// and //pmouseY//
 +
 +== Keystroke ==
 +
 +  * //key// vs //keyCode//
 +  * //​keyPressed()//​ and //​keyReleased()//​
 +
  
courses/2010.11.03.intro_prototyping.txt · Last modified: 2010/11/14 04:19 by camille