Shiffman.Youtube.Processing4.sketches

$Shiffman.Youtube.Processing4.sketches.md

Shiffman Youtube Processing4 sketches Gists

4.1_ball_moving_transforming_use_if.pde

// Ce programme génère des aires sur une fenetre et fait apparaitre des formes en fonctions de la position de la balle qui se deplace

//4.1 Variables - Processing Tutorial _ The coding train youtube

float circleX; // we're going to use a var called circleX of type float // always use floats!
float circleY;
float radiusX;
float radiusY;
float speed;



void setup() { // run once = initialization

  size(640, 480); // draw window of size 640x480 px
  circleX = 0; // initialize, ie set value of circleX to zero  NB how it's ok to use an int value when var is declared as float!
  circleY = 240;
  radiusX = random(20, 30); // initialize var with random value between 20-29
  radiusY = random(20, 30);
  speed = 2;
}


void draw() { // loop over and over, until stopped. Every iteration is a different frame,

  println("mouseX" + mouseX); // print to console
  println("mouseY" + mouseY);

  //DRAWING Part
  
  background(100, 200, 300); // display background
  stroke(0); // draw with black
  line(200, 0, 200, 480); // draw line
  line(400, 0, 400, 480);
  fill(100); // use grey fill color
  ellipse(circleX, circleY, radiusX, radiusY); // draw circle

  //LOGIC Part
  
  if (mouseX < width) { // if mouseX stays in range of screen width. width is a built-in var that stores y coordinate of size()

    circleX = circleX + speed; // moving ellipse on x-axis by incrementing its value
    
    if (circleX >= 200) { // if circle position is over 200px on x-axis (condition 1)
      background(255, 0, 0); // draw a red background
      fill(100) ; 
      ellipse(circleX, circleY, radiusX + 50, radiusY + 50); // draw circle
      rect(100, circleY-25, radiusX*2, radiusY*2); // draw rectangle
      line(200, 0, 200, 480); // draw vertical line
      line(400, 0, 400, 480);
    }
    if (circleX >= 400) { //if ellipse position is beyond 400px on the x axis :(condition 2)
      background(0, 255, 0); // draw a background
      fill(100);
      ellipse(circleX, circleY, radiusX + 100, radiusY + 100);
      fill(0, 0, 255);
      rect(100, circleY-25, radiusX*2, radiusY*2);
      fill(0, 0, 255);
      rect(300, circleY-25, radiusX*2, radiusY*2);
      line(200, 0, 200, 480);
      line(400, 0, 400, 480);
    }
    if (circleX >= width) { // if ball reaches right edge : (condition 3)
      fill(0, 0, 255);
      rect(100, circleY-25, radiusX*2, radiusY*2);
      fill(0, 255, 0);
      rect(300, circleY-25, radiusX*2, radiusY*2);
      fill(0, 0, 255);
      rect(450, circleY-25, radiusX*2, radiusY*2);
      circleX = 0; //reset circleX to 0 on the x axis ie the other border
    }
  }
}
 // Notice how with if statements the three conditions (1,2,3) can happen 
 // If we had used if .... else if, only one of them could happen

4.1_mouse_position_balls_transformation_use_if.pde

//Ce programme affiche une image de ma famille et génère des formes psychedeliques en fonctions d'évènements de la souris

// Ctrl + T => autoformat

//4.1 Variables - Processing Tutorial _ The coding train youtube

float circleX; // we use foats now, it's more flexible, always use floats!
float circleY;
float radiusX;
float radiusY;
float speed;
float background_colorR;
float background_colorG;
float background_colorB;
PImage photo;


void setup() { // runs once = initialization
  size(640, 480); // sets window size
  circleX = random(640); // var initialization, NB how it's ok to use an int value when var is declared as float!
  circleY = random(480);
  radiusX = random(20, 30);
  radiusY = random(20, 30);
  speed = random(0.25, 2);
  background_colorR = random(0, 256);
  background_colorG = random(0, 256);
  background_colorB = random(0, 256);
  photo = loadImage("mafamille2.jpg");
  // background(pmouseX - background_colorR, pmouseY - background_colorG, background_colorB - (mouseX + mouseY)); // would make shapes stick to the screen
}


void draw() { // loops over and over, until stopped. Every iteration is a different frame,

  background(photo);
  stroke(255); // définit la couleur du trait de ligne à la couleur "blanc"
  line(320, 0, 320, 480); // dessine une ligne verticale au milieu de l'écran

  if (mouseX < width && mouseY < height) { // if mouse is on the sketch window

    println("mouseX" + mouseX);
    println("mouseY" + mouseY);

    //Drawing Part

    if (mouseX >= 320 && mouseX <= 630) { // if mouseX stays in the x-range of the sketch window
      background(pmouseX - background_colorR, pmouseY - background_colorG, background_colorB - (mouseX + mouseY)); // displays background
      rect(pmouseX, pmouseY, mouseX, mouseY); // draws rectangle
      strokeWeight(3); //thickness of the lines of the shapes
      fill(pmouseX - random(0, 640), pmouseY - random(0, 480), random(255)); // fill color of the shape
      ellipse(width - mouseX, height - mouseY, radiusX, radiusY); // draws random shape that moves in reverse direction of the mouse

      //Logic Part

      circleX = circleX + speed; // moving ellipse on x-axis
      circleY = circleY + speed; // moving allipse on y-axis

      radiusX = pmouseX*random(0.1, 1) + random(-640, 0); // changing radiusX with mouse moves
      radiusY= pmouseY*random(0.1, 1) + random(-480, 0); // changing radiusY with mouse moves

      //we needed to assign new values to circleX so that we can move it by keeping incrementing its pxil position value by one
      //its moving at a rate of +1 pixel every frame, we can move it faster by incrementing it by a bigger number or slower by a smaller number
    }
    if (mouseY <= 10  || mouseY >= 460) { // if mouseY goes out of y-range of the sketch window
      background(photo);
      stroke(255); // définit la couleur du trait de ligne à la couleur "blanc"
      line(320, 0, 320, 480); // dessine une ligne verticale au milieu de l'écran
    }
  }
}

4.1_regions_rollovers_if_else_if.pde

//Ce programme génère un cadrant et change leur couleur en fonction de la position de la souris

//4.1 Variables - Processing Tutorial _ The coding train youtube

float circleX; // we're going to use a var called circleX of type float // always use floats!
float circleY;
float radiusX;
float radiusY;
float speed;



void setup() { // run once = initialization

  size(640, 480); // draw window of size 640x480 px
  circleX = 0; // initialize, ie set value of circleX to zero  NB how it's ok to use an int value when var is declared as float!
  circleY = 240;
  radiusX = random(20, 30); // initialize var with random value between 20-29
  radiusY = random(20, 30);
  speed = 2;
}


void draw() { // loop over and over, until stopped. Every iteration is a different frame,

  println("mouseX" + mouseX); // print to console
  println("mouseY" + mouseY);

  //DRAWING Part

  background(100, 200, 300); // display blue background
  stroke(0); // draw with black
  
  //LOGIC Part

if (mouseX > 0){ // if mouseX gets on the sketch window

  if (mouseX < 320 && mouseY < 240) { // if mouseX is in 1st quarter
      fill(255, 0, 0); // set fill color of the shape to red
      rect(0, 0, 320, 240); } // draw rectangle
      
  else if (mouseX > 320 && mouseY < 240) { //
     fill(0, 0, 255); // set fill color of the shape to blue
     rect(320, 0, 320, 240); }  // draw rectangle
      
  else if (mouseX < 320 && mouseY > 240) { //if ellipse position is beyond 400px on the x axis :(condition 2)
     fill(0, 255, 0); // set fill color of the shape to green
     rect(0, 240, 320, 240); }
     
  else if (mouseX > 320 && mouseY > 240) { //if ellipse position is beyond 400px on the x axis :(condition 2)
     fill(255, 255, 0); // set fill color of the shape to yellow
     rect(320, 240, 320, 240); }
     
}
  
 line(320, 0, 320, 480); // draw line. NB: by placing the line at the bottom of the draw loop, they'll always get printed drawn
 line(0, 240, 640, 240); // draw another line

}
// Notice how with if statements the three conditions (1,2,3) could all happen one after each other
// Now when we use .... else if, only the first condition met that is true can happen during each loop
// We"ve created horizontal region rollovers ie regions where when the mouse is over them, something happens

4.1b_mouse_position_based_events2.pde

//Ce programme affiche une image de ma famille et déclenche des actions à partir d'évènements de la souris

//4.1 Variables - Processing Tutorial _ The coding train youtube

float circleX; // we use foats now, it's more flexible, always use floats!
float circleY;
float radiusX;
float radiusY;
float speed;
float background_colorR;
float background_colorG;
float background_colorB;
PImage photo;


void setup() { // runs once = initialization
  size(640, 480); // sets window size
  circleX = random(640); // var initialization, NB how it's ok to use an int value when var is declared as float!
  circleY = random(480);
  radiusX = random(20, 30);
  radiusY = random(20, 30);
  speed = random(0.25, 2);
  background_colorR = random(0, 256);
  background_colorG = random(0, 256);
  background_colorB = random(0, 256);
  photo = loadImage("mafamille2.jpg");
  // background(pmouseX - background_colorR, pmouseY - background_colorG, background_colorB - (mouseX + mouseY)); // would make shapes stick to the screen
}


void draw() { // loops over and over, until stopped. Every iteration is a different frame,

  background(photo);
  stroke(255); // définit la couleur du trait de ligne à la couleur "blanc"
  line(320, 0, 320, 480); // dessine une ligne verticale au milieu de l'écran

  if (mouseX < width && mouseY < height) { // if mouse is on the sketch window

    println("mouseX" + mouseX);
    println("mouseY" + mouseY);

    //Drawing Part

    if (mouseX >= 320 && mouseX <= 630) { // if mouseX stays in the x-range of the sketch window
      background(pmouseX - background_colorR, pmouseY - background_colorG, background_colorB - (mouseX + mouseY)); // displays background
      rect(pmouseX, pmouseY, mouseX, mouseY); // draws rectangle
      strokeWeight(3); //thickness of the lines of the shapes
      fill(pmouseX - random(0, 640), pmouseY - random(0, 480), random(255)); // fill color of the shape
      ellipse(width - mouseX, height - mouseY, radiusX, radiusY); // draws random shape that moves in reverse direction of the mouse

      //Logic Part

      circleX = circleX + speed; // moving ellipse on x-axis
      circleY = circleY + speed; // moving allipse on y-axis

      radiusX = pmouseX*random(0.1, 1) + random(-640, 0); // changing radiusX with mouse moves
      radiusY= pmouseY*random(0.1, 1) + random(-480, 0); // changing radiusY with mouse moves

      //we needed to assign new values to circleX so that we can move it by keeping incrementing its pxil position value by one
      //its moving at a rate of +1 pixel every frame, we can move it faster by incrementing it by a bigger number or slower by a smaller number
    }
    if (mouseY <= 10  || mouseY >= 460) { // if mouseY goes out of y-range of the sketch window
      background(photo);
      stroke(255); // définit la couleur du trait de ligne à la couleur "blanc"
      line(320, 0, 320, 480); // dessine une ligne verticale au milieu de l'écran
    }
  }
}

4.1c_moving_growing_ball.pde

// Ce programme génère une ellipse qui traverse l'écran en s'agrandissant, comme une comète

// Ctrl + T => autoformat

//4.1 Variables - Processing Tutorial _ The coding train youtube

float circleX; // we use foats now, it's more flexible, always use floats!
float circleY;
float radiusX;
float radiusY;
float speed;
float increase;
float fill_color;
float background_colorR;
float background_colorG;
float background_colorB;
float color_variation;


void setup() { // runs once = initialization
  size(640, 480); // sets window size
  circleX = random(0,640); // var initialization, NB how it's ok to use an int value when var is declared as float!
  circleY = random(0,480);
  radiusX = random(20,30);
  radiusY = random(20,30);
  speed = random(0.5,5);
  increase = random(-10,10);
  fill_color = random(256);
  background_colorR = random(256);
  background_colorG = random(256);
  background_colorB = random(256);
}


void draw() { // loops over and over, until stopped. Every iteration is a different frame,

  //Drawing Part

  background(background_colorR, background_colorG, background_colorB);
  fill(fill_color, fill_color + 100, fill_color + 200);
  ellipse(circleX, circleY, radiusX, radiusY); //We draw a cercle at coordinates (circleX, circleY) inside the window

  //Logic Part
  
  circleX = circleX + speed; // moving ellipse on x-axis
  circleY = circleY + speed; // moving allipse on y-axis
  
  radiusX = radiusX - increase;
  radiusY= radiusY - increase;
  
  //we needed to assign new values to circleX so that we can move it by keeping incrementing its pxil position value by one
  //its moving at a rate of +1 pixel every frame, we can move it faster by incrementing it by a bigger number or slower by a smaller number
}

5.4_ball_starts_stops_onclick.pde

// This programs generates and starts or stops the ball by clicking on the mouse

// 5.4 Bool var _ Processing

// A. Original Script

/** 
float x;

void setup() {
 size(640,480); 
}

void draw(){
 
  //Drawing Part
 background(0);
 fill(255);
 
 //Logic
 ellipse(x,150, 24, 24);
 x = x +2;
}
**/


// B. Now we don't want the mouse to move until we click the nouse

//option 1: modify script using if mousePressed()

/**
float x;

void setup() {
 size(640,480); 
}

void draw(){
 
  //Drawing Part
 background(0);
 fill(255);
 
 //Logic
 ellipse(x,150, 24, 24);
 if(mousePressed){// now when we click the mouse the ball starts, and stops when we release the button
 x = x +2;
 }
}

void mousePressed(){ 
// The mousePressed() function is an event listener, watching when mouse is pressed.
//It is called once after every time a mouse button is pressed.

}
**/


//option 2: now we want the event of clicking the mouse to trigger the ball movement for ever

/**
float x;
boolean going;

void setup() {
 size(640,480);
 going = false;
}


void draw(){
 
  //Drawing Part
 background(0);
 fill(255);
 ellipse(x,150, 24, 24);

 //Logic
 
 if(going) {// now when we click the mouse the ball starts, and stops when we release the button
   x = x + 2 ; }
}

void mousePressed(){ 
// The mousePressed() function is an event listener, watching when mouse is pressed.
// It is called ONCE after EVERY TIME a mouse button is pressed. When it is called, mousePressed built-in var = true just during
//the time the mouse is pressed. It returns to false whenever the mouse is released.

if (going){ //if going is false, which is the case by default
  going = false;} // keep going false, notice we could have said:if !going
else {
going = true;}

}
**/


//option 3: same than option 2 but shorter

float x;
boolean going;// a boolean variable is like a switch in our program that can be switched to off or on
// and we can act upon its value with conditionals: if "off" do this, if "on" do that ...

void setup() {
 size(640,480);
 going = false;
}


void draw(){
 
  //Drawing Part
 background(0);
 fill(255);
 ellipse(x,150, 24, 24);

 //Logic
 
 if(going) {// now when we click the mouse the ball starts, and stops when we release the button
   x = x + 2 ; }// ball position on x axis is incremented by 2 px after each iterationof draw() loop
}

void mousePressed(){ 
/** The mousePressed() function is an event listener, watching when mouse is pressed.
It is called ONCE after EVERY TIME a mouse button is pressed. When it is called, mousePressed built-in var = true just during
the time the mouse is pressed. It returns to false whenever the mouse is released.
**/
going = !going;  //bam!
}

5.4_regions_rollovers2_if_else_if.pde

//Ce programme génère un cadrant et change leur couleur en fonction de la position de la souris

//5.4 Logical Operators - Processing Tutorial _ The coding train youtube

float circleX;
float circleY;
float radiusX;
float radiusY;
float speed;

void setup() { // run once = initialization

  size(640, 480); // draw window of size 640x480 px
  circleX = 0; // initialize, ie set value of circleX to zero  NB how it's ok to use an int value when var is declared as float!
  circleY = 240;
  radiusX = random(20, 30); // initialize var with random value between 20-29
  radiusY = random(20, 30);
  speed = 2;
}


void draw() { // loop over and over, until stopped. Every iteration is a different frame,

  println("mouseX" + mouseX); // print to console
  println("mouseY" + mouseY);

  //DRAWING Part

  background(100, 200, 300); // display blue background
  stroke(0); // draw with black
  
  //LOGIC Part

if (mouseX > 0){ // if mouseX gets on the sketch window

  if (mouseX < 320 && mouseY < 240) { // if mouseX is in left-top quarter
      fill(255, 0, 0); // set fill color of the shape to red
      rect(0, 0, 320, 240); } // draw rectangle
      
  else if (mouseX > 320 && mouseY < 240) { // if mouseX is in right-top quarter
     fill(0, 0, 255); // set fill color of the shape to blue
     rect(320, 0, 320, 240); }  // draw rectangle
      
  else if ((mouseX < 320) && !(mouseY < 240)) { // if mouseX is in left-down quarter
     fill(0, 255, 0); // set fill color of the shape to green
     rect(0, 240, 320, 240); } // draw rectangle
     
  else if (mouseX > 320 && mouseY > 240) { //if mouseX is in right-down quarter
     fill(255, 255, 0); // set fill color of the shape to yellow
     rect(320, 240, 320, 240); } // draw rectangle
     
}
  
 line(320, 0, 320, 480); // draw line. NB: by placing the line at the bottom of the draw loop, they'll always get printed drawn
 line(0, 240, 640, 240); // draw another line

}

// When we use .... else if, only the first condition met that is true can happen during each loop
// We"ve created horizontal region rollovers ie regions where when the mouse is over them, something happens

5.5_balls_bouncing_mouse_triggered_screen_changing.pde

//Ce programme génère 2 balles qui rebondissent (suivant x et y) et l'arrière plan change de couleur en fonction de la position de la souris

// 5.5 Bouncing Ball HOMEWORK

/** We want the ball to bounce on the border

1. try bounce BALL on the horizontal borders (along y axis)_ ok cf. use of circleY var
2. have it speed up or slow down when it reaches borders _ ok cf. use of acceleration var
3. Findout why  xspeed = xspeed * -0.9 causes the ball to get stuck while -1.1 doesn't _ ok
//answer: let's say circleX reaches 639, at the next draw() iteration, xspeed = -0,9*10 = -9 then  doesn't make it reach the other border so 
4. Think about simulating gravity _ not ok didn't aachieve it :(

**/

// B. MY VERSION USING LOGICAL OPERATORS

/**
float circleX;
float xspeed;

void setup(){
  size(640,480);
  circleX = 0;
  xspeed = 10;
}

void draw(){
   background(51);
   fill(102);
   stroke(255);
   ellipse(circleX,height/2,32,32);
   
   circleX = circleX + xspeed;
   
   if (circleX > width || circleX <0 ){
     if (circleX < 0){ xspeed = 10;}
     else {xspeed = -10;}
     }
}
**/

// C. IMPROVED VERSION USING LOGICAL OPERATORS

float circleX;
float circleY;
float circleY2;
float xspeed;
float yspeed;
float yspeed2;
boolean clic;
float acceleration;
float gravity;

void setup(){
  size(640,480);
  circleY = 0;
  xspeed = 10; //notice! speed has to be big enough to send the ball back on the other border, otherwise the bouncing condition (xposition) will never be true
  yspeed = 10;
  acceleration = 1;
  clic = false;
  
}

void draw(){
   background(mouseX, mouseY, random(0,256)); // draw a random background in fonction of mouse position
   stroke(255); // stroke color is white
   fill(102); // fill color is grey
   ellipse(width/2,circleY, 32,32); // draw a circle in the middle of the upper border
   ellipse(circleX,height/2, 32,32); // draw a circle in the middle of the left border
   
   if (clic){
     
     circleX = circleX + xspeed * acceleration;
     circleY = circleY + yspeed * acceleration;
   
     if (circleX > width || circleX <0 ){ // if ball outreaches border
        xspeed *= -1 ; // inverse speed => makes the ball increment/decrement its x position in the opposite direction
        acceleration += 0.05; // accelerate it
     }
   
     if (circleY > height || circleY <0 ){
        yspeed = yspeed * -1 ;  // inverse speed => makes the ball increment/decrement its y position in the opposite direction
     }
   }
}

void mousePressed(){
  clic = !clic;
}

5.5_real_ball_boucing_on_window_edge.pde

// Ce prog génère 2 balles qui rebondissent

// 5.5 Bouncing Ball

/** We want the ball to bounce on the border
In pseudo code, we want:

A partir du bord gauche, que la balle bouge à la vitesse xspeed // circleX = circleX + speed;
Si la balle touche le bord droit, // 
alors repars vers la gauche ! //
Si la balle touche le bord gauche, //
alors repars vers la droite ...

**/

// A. BASIC VERSION

/**
float circleX;
float xspeed;

void setup(){
  size(640,480);
  circleX = 0;
  xspeed = 10;
}

void draw(){
   background(51);
   fill(102);
   stroke(255);
   ellipse(circleX,height/2,32,32);
   
   circleX = circleX + xspeed;
   
   if (circleX > width){
    xspeed = -10;}
    
   if (circleX < 0){
     xspeed = 10;}
}
**/

// B. MY IMPROVED VERSION USING LOGICAL OPERATORS

/**
float circleX;
float xspeed;

void setup(){
  size(640,480);
  circleX = 0;
  xspeed = 10;
}

void draw(){
   background(51);
   fill(102);
   stroke(255);
   ellipse(circleX,height/2,32,32);
   
   circleX = circleX + xspeed;
   
   if (circleX > width || circleX <0 ){
     if (circleX < 0){ xspeed = 10;}
     else {xspeed = -10;}
     }
}
**/

// C. DANIEL'S IMPROVED VERSION USING LOGICAL OPERATORS


float circleX;
float xspeed;

void setup(){
  size(640,480);
  circleX = 0;
  xspeed = 10;
}

void draw(){
   background(51);
   fill(102);
   stroke(255);
   ellipse(circleX,height/2,32,32);
   
   circleX = circleX + xspeed;
   
   if (circleX > width || circleX <0 ){
    xspeed = xspeed * -1 ; //we inverse speed whenever ball outreaches borders achieving same effect than version B
     }
}

6.2_for_loop_grid_filled_with_balls.pde

//Ce programme génére une grille remplie de balles rouges grace

//6.2 2 Loops _ Grid exercise WITH FOR LOOP

// STATIC VERSION OF PREVIOUS SKETCH , WE REMOVED THE DRAW() AND SETUP() FONCTIONS BUT THE RESULT IS THE SAME
 
 int i;
 int j = 25;
 
 size(650,500); 

  
 background(0);
 stroke(255);
 strokeWeight(2);
 
 
 for (int x = 50; x <width; x = x +50){// 1.init cond ; 2. boolean condition ; 3. increment
   line(x,0,x,height ); //4. statement: draw vertical line at x down to bottom of screen
 }
 
 
 for (int y=50; y<height; y = y + 50){  //init cond ; 2. boolean condition ; 3. increment
    line(0 ,y,width,y); //draw horizontal line at y to the other side of screen
 }

// My 1ST attempt to fill the grid with red balls of diameter 20 px every 50 px, I didn't succeed to fill last column nor last bottom left corner :(

/**
  fill(255,0,0);
  
  for (i=25; i < 601; i = i + 50){ // for every row
    ellipse(i,j,25,25);
      for ( j = 25; j<450; j = j + 50){ // for every column
       ellipse(i, j,20,20);}

 }
 **/
   
// My 2ND attempt to fill the grid with balls of diameter 20 px every 50 px after watching the video tuto 6.6 on Nested Loops
// IT WORKS!!


  fill(255,0,0); // the ball will have random colors
  
  for (i=25; i < width; i = i + 50){ // for "column 1" set "i = 25" ...
      for ( j = 25; j< height; j = j + 50){ // ... then set "j = 25", then "j = 75", .... until "j >= height"  
         ellipse(i, j,20,20);} // draw a circle at coordinates (i = 25, j = 25), then (25, 75), then (25, 125) , etc. draw a circle at all j coordinates for the same i coordinate (we draw columns 1 first... we could have drawn line first by inverting inner and outer lines).

                                   // then for "column 2" set "i = 75" ....
                                   // then set "j = 25", then "j = 75", .... until "j >= height"  ....
                                   // draw a circle at coordinates (i = 75, j = 25), then (75, 75), then (75, 125) , etc
                                   
                                   //etc...
 }

6.2_while_loop_grids_with_balls.pde

// Ce programme génère une ligne de balles de couleur sur une grille

//6.2 2 Loops _ Grid exercise

// VERSION 1


float x;
float y;

void setup(){
  
 size(640,480); 
 x = 0;
}

void draw(){
  
 background(0);
 stroke(255);
 strokeWeight(2);
 
 x = 50;
 y = 50;
 
 while(x <width){
 

 line(x,0,x,height ); //draw vertical line at x down to bottom of screen
 x = x +50; //increment x position by 50px
 }
 
 while(y < height){
  line(0 ,y,width,y); //draw horizontal line at y to the other side of screen
  y = y + 50; //increment y position by 50px
 }

  fill(255,0,0);
  for (int i=25; i < 601; i = i + 50){
 ellipse(i,25,25,25);
}

}

8.0_OOP.Bubble_class_creation_with_app.pde

//Bubble Class

class Bubble {

  float x;
  float y;
  float diameter;

  Bubble(float tempD) {
    x = width/2;
    y = height;
    diameter = tempD;
  }

  void ascend() {
    y--;
    x = x + random(-2,2);
  }

  void display() {
    stroke(0);
    fill(127,100);
    ellipse(x, y, diameter, diameter);
  }

  void top() {
    if (y < -diameter/2) {
      y = height+diameter/2;
    }
  }
}


// Bubble objects App

Bubble b1;
Bubble b2;

void setup() {
  size(640, 360);
  b1 = new Bubble(64);
  b2 = new Bubble(16);
}

void draw() {
  background(255);
  b1.ascend();
  b1.display();
  b1.top();

  b2.ascend();
  b2.display();
  b2.top();
}

bouncing_ball.pde

// Ce programme génère un rond et le deplace en fonction des mvts de la souris suivant x et inversement suivant y

void setup() { // runs once = initialization

size(800,800); // sets window size

}

void draw() { // loops over and over, until stopped

background(100,200,300); 

//Placing background here is what gives the illusion of movement
//Background is wiped after it loop iteration, so the form is seen as mooving from one point to another
// following the moves of the mouse
//If background was placed in the setup bllock, the background woulld stay still and each move of the 
//form would stick to the screen, on aurait un tracé des positions successives de la forme après chaque iteration
// de la boucle draw(){}
//the numbers are the R,G,B colors of background 

stroke(255,0,0); //trait en couleur RGB

strokeWeight(3); //epaisseur trait

fill(#fff894,55); // couleur remplissage forme

ellipseMode(CENTER);

ellipse(mouseX, height-mouseY,200,200); 

// In order to introduce variation, we use variables
// MouseX is a word that stands for a number (ie the x,y coordinates of the mouse), it's a variable
// MouseX is a built-in var

/**stroke(0,255,0); //RGB

strokeWeight(2); 

fill(#fff200);

ellipse(mouseX, mouseY, 100,100); // dessine elipse

ellipse(mouseX, mouseY, 100,100);

stroke(204,102,0); //RGB

strokeWeight(3);

fill(100,50);

rectMode(CENTER);

rect(mouseX,mouseY,125,50); **/

}

chest_board_blinking_balls.pde

// Ce programme génère un échiquier composé de cases en niveau de gris et le remplit de balles clignotantes aux couleurs basées sur la
//position de la souris


void setup() {

  size(650, 500);
}


void draw() {

  //1. Lets draw a grid of squares of random colors with a nested for loop

  for (int y=0; y < height; y = y + 50) {  // for "line 1" set "y = 0" ...
    for (int x =0; x < width; x = x + 50) { // ... then set "x = 0", then "x = 50", .... until "x >= width"
      fill(random(255));
      rect(x, y, 50, 50); // draw a square at coordinates (x = 0, y = 0), then (50, 0), then (100, 0) , etc. draw a square at all x coordinates for the same y coordinate (here we draw lines first...)
    }
  }
  
    // then for "line 2" set "y = 50" ....
    // then set "x = 50", then "x = 100", .... until "x >= width"  ....
    // draw a square at coordinates (x = 50, y = 5O), then (100, 50), then (150, 50) , etc

    //etc...
  
  
  
  //2. Now, Lets fill the grid with balls of random colors that will change color based on mouse position

  for (int i=25; i < width; i = i + 50) { // for "column 1" set "i = 25" ...
    for (int  j = 25; j< height; j = j + 50) { // ... then set "j = 25", then "j = 75", .... until "j >= height"

      float random_color1 = random(0, mouseX); // we declare and initialize local var for the random color
      float  random_color2 = random(0, mouseY);
      float random_color3 = random(mouseX, mouseY);
      fill(random_color1, random_color2, random_color3); // the ball will have random colors
      ellipse(i, j, 20, 20); // draw a circle at coordinates (i = 25, j = 25), then (25, 75), then (25, 125) , etc. draw a circle at all j coordinates for the same i coordinate (we draw column 1 first... we could have drawn line first by inverting inner and outer lines).
      } 
  }
  
    // then for "column 2" set "i = 75" ....
    // then set "j = 25", then "j = 75", .... until "j >= height"  ....
    // draw a circle at coordinates (i = 75, j = 25), then (75, 75), then (75, 125) , etc

    //etc...
}

click_based_events.pde

// Ce programme génére une application de dessin basique avec la souris

// Ctrl + T => autoformat

//This program shows how to trigger or stop the draw() loop with events mousePressed, keyPressed


void setup() { // runs once = initialization
  size(800, 800); // sets window size
  background(100, 200, 300);
  }
  /** This time we must put background in the set so we can keep what we draw!
  The sketch window not being wiped after each iteration...
  So, each point drawn stays displayed after each iteration of the draw() loop, 
  thus forming a continuous line on the screen**/

  
void draw() { // loops over and over, until stopped

  stroke(255, 0, 0);
  strokeWeight(3);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

void mousePressed() {
 background(100, 200, 300);  //This sets the background to the default one, giving the illusion of erasing the drawing
}

functions_bouncing_balls_start_stop.pde

//A. Let's make our bouncing ball prog we did earlier MODULAR using functions

It should have 3 main fn (or modules) inside draw() : 

1. DisplayBall();
2.moveBall();
3. checkEdges();

**/

float circleX;
float circleY;
float circleY2;
float xspeed;
float yspeed;
float yspeed2;
boolean clic;
float acceleration;
float gravity;

void setup(){
  size(640,480);
  circleY = 0;
  xspeed = 10;
  yspeed = 10;
  acceleration = 1;
  clic = false;
}

void draw(){
  
  background(mouseX, mouseY, random(0,256)); 
  displayBall(); // displayBall fn
  if (clic){ 
  moveBall(); // moveBall fn
  checkEdges(); // checkEdges fn
  //if we encounter a problem, we could easily debug our prog by commenting one or two of these fn in order to know 
  //from which of them the problem comes from
   }
   
}


// Function Definitions



void displayBall(){
   fill(102); // fill color is grey
   ellipse(width/2,circleY, 32,32); // draw a circle in the middle of the upper border
   ellipse(circleX,height/2, 32,32); // draw a circle in the middle of the left border
}


void moveBall(){
     circleX = circleX + xspeed * acceleration;
     circleY = circleY + yspeed * acceleration;   
}


void checkEdges(){  
     if (circleX > width || circleX <0 ){ // if ball outreaches border
        xspeed *= -1 ; // inverse speed => makes the ball increment/decrement its x position in the opposite direction
        acceleration += 0.05; // accelerate it
     }
   
     if (circleY > height || circleY <0 ){
        yspeed = yspeed * -1 ;  // inverse speed => makes the ball increment/decrement its y position in the opposite direction
     }
 }
 
 
void mousePressed(){
  clic = !clic;
}

shapes_appear_disappear_nested_if_else.pde

//Ce programme génère des formes et les fait apparaitre ou disparaitre des formes en fonction de la position de la souris

//4.1 Variables - Processing Tutorial _ The coding train youtube

float circleX; // we're going to use a var called circleX of type float // always use floats!
float circleY;
float radiusX;
float radiusY;
float speed;



void setup() { // run once = initialization

  size(640, 480); // draw window of size 640x480 px
  circleX = 0; // initialize, ie set value of circleX to zero  NB how it's ok to use an int value when var is declared as float!
  circleY = 240;
  radiusX = random(20, 30); // initialize var with random value between 20-29
  radiusY = random(20, 30);
  speed = 2;
}


void draw() { // loop over and over, until stopped. Every iteration is a different frame,

  println("mouseX" + mouseX); // print to console
  println("mouseY" + mouseY);

  //DRAWING Part

  background(100, 200, 300); // display blue background
  stroke(0); // draw with black
  
  //LOGIC Part

  if (mouseX < 630 || mouseY <= 470) { // if mouseX is in range of screen width. width is a built-in var that stores y coordinate of size()

    if (mouseX >= 400) { // if circle position is over 400px on x-axis (condition 1)
      fill(255, 0, 0); // set fill color of the shape to red
      rect(100, circleY-25, radiusX*2, radiusY*2); // draw rectangle
      
    } else if (mouseX >= 200) { //if ellipse position is beyond 400px on the x axis :(condition 2)
     fill(0, 0, 255); // set fill color of the shape to blue
     rect(500, circleY-25, radiusX*2, radiusY*2);
      
    } else if (mouseX > 0 && mouseX <= 200) { //if ellipse position is beyond 400px on the x axis :(condition 2)
      fill(0, 255, 0); // set fill color of the shape to green
      rect(300, circleY-25, radiusX*2, radiusY*2);
      
    }
  }
  
 line(200, 0, 200, 480); // draw line. NB: by placing the line at the bottom of the draw loop, they'll always get printed drawn
 line(400, 0, 400, 480); // draw another line
}
// Notice how with if statements the three conditions (1,2,3) could all happen one after each other
// Now when we use .... else if, only the first condition met that is true can happen during each loop
// We"ve created horizontal region rollovers ie regions where when the mouse is over them, something happens

sketch_basics.pde

// this program draw lines

size(800,800); //sets a window
stroke(025); // sets stroke color
line(120, 80, 400, 300);

// draw an ellipse
ellipse(400,400,600,500);

while_loop_accordeon.pde

//Ce programme génère des lignes verticales qui remplissent l'écran de gauche à droite comme un accordéon

// VERSION 1: loops vs draw

/**
void setup() {

  size(640, 480);
}

void draw() { // this "outer" loop is for animation, each iteration is one frame, it happens over and over

  background(0);
  strokeWeight(2);
  stroke(255);

int x =0; // x position is reset to zero before the while loop happens

  while (x< mouseX) { // this "inner" loops repeats multiple times (sometimes "many times", sometimes "a few times" depending on mouseX position) during each frame of animation.
    line(x, 0, x, height);
    x = x+20;
  }
  
  //the effect achieved is an accordeon effect that will span from position 0 up to the postion of mouseX
  
}
**/


//VERSION 2: loops vs draw / Giving the impression of slowing down the draw loop, making it appear like if each line is the result of one iteration of the draw loop, which is not the case!

float endX =0 ;

void setup() {

  size(640, 480);
}

void draw() { // this "outer" loop happens over and over, each iteration is one frame

  background(0);
  strokeWeight(2);
  stroke(255);

int x =0; // x position is set to zero before the 1st time the while loop happens and after each subsequent exit of the while loop (when bool cond is or becomes false), which causes a new iteration of the draw loop to happen again

  while (x< endX) { // this "inner" loops is always executed in its entirety during EACH frame of animation.
    line(x, 0, x, height); // draw a vertical line at position x  as long as condition is true
    x = x+20; // increment the position of x by 20 px and draw the next line 20 px further as long as condition is true
  } // we exit this loop only when the boolean condition (x < endX) is false
  
  // all the lines the while ("inner") loop has had the time to draw until condition became false are displayed by the draw("outer) loop whenever we exit the while loop. 
  //So, 0 line is drawn at 1st draw() iteration, then 1 line is drawn and displayed between during iteration 2 and 42 *, then 2 lines are drawn and displayed during iteration 43 and 44, etc...
  
  endX = endX + 1;  // endX is only incremented by 1 everytime we get out of the while loop
  // then, a new iteration of draw() happens
 
} 

  //the effect achieved by this program is an accordeon effect that will span from position 0 up to endX, giving an impression of drawing a line at a slower pace 

while_loop_balls.pde

// Ce programme génère des multitudes de balles qui se rapprochent (jusqu'à former une ligne) ou s'éloignent quand on déplace la souris

/**
The code inside an if statement execute either 0 times (if cond is false) or 1 time (if cond is true)
But whith a while loop, the code can execute either, 0, 1, 2, 3 .... or an infinite number of times as long as 
cond stays true.

!! IMPORTANT 
1. LOOPS MUST ALWAYS HAVE AN EXIT CONDITION, 
2. WE MUST MAKE SURE THE EXIT CONDITION CAN BE MET

**/


float x;

void setup(){
  size(640,480);
  x = 0;
}

void draw(){
 
  background(0);
  
  x = 0; // initialize x to 0 before each loop
  
  while(x < width){
     
    println("mouse position is " + mouseX + " x position is " + x );
    println(" ");
    if (mouseX < 1){ //exit condition in case mouseX = 0 what would cause an infinite loop trying to execute x = x + mouseX when x=0 and mouseX = 0 causing x=x=0 forever
     x = x + 1; } //exit condition statement: make sure exit condition is met by incrementing x by 1 so x doesnt stay equal to 0 when mouseX=0
   //we made sure the value of x will always be some positive number   
     else{
     x = x + mouseX; }//increment x position by mouseX. This is where the risk of an infinite loop was if mouseX is value was O, but it was prevented with the exit condition and statement
   
    println("cercle is going to drawn at x = " + x);
    println(" ");
    
    fill(101);
    stroke(255);
    ellipse(x, 150, 16, 16);
    
  }
  
}

while_loop_grid.pde

// Ce programme génère une grille (comme un damier) dont la taille des cases varie de manière aléatoire

//6.2 2 Loops _ Grid exercise

// VERSION 1: static grid

/**
float x;
float y;
float i;
float incrementi;
float incrementj;

void setup(){
  
 size(640,480); 
 x = 0;
}

void draw(){
  
 background(0);
 
 stroke(255);
 strokeWeight(2);
 
 x = 50;
 y = 50;
 
 while(x <width){
   
 line(x,0,x,height ); //draw vertical line at x down to bottom of screen
 x = x +50; //increment x position by 50px
 }
 
 while(y < height){
   
  line(0 ,y,width,y); //draw horizontal line at y to the other side of screen
  y = y + 50; //increment y position by 50px
 }

fill(255,0,0);

}
**/


// VERSION 2 WITH RANDOM SPACING BETWEEN THE LINES

float x;
float y;
float spacing = 50;

void setup(){
  
 size(640,480); 
// spacing = 50; DIDN'T WORK B/C Variables declared within setup() are not accessible within other functions, including draw().
}

void draw(){
  
 background(0);
 
 
 spacing = spacing +  random(-2,2);
 stroke(255);
 strokeWeight(2);

 
 x=0;
 while(x <width){
   
 line(x,0,x,height ); //draw vertical line at x down to bottom of screen
 x = x + spacing; //increment x position by a random number of pixels
 }
 
 y=0;
 while(y < height){
   
  line(0 ,y,width,y); //draw horizontal line at y to the other side of screen
  y = y + spacing; //increment y position by a random number of px
 }
 
}