Thursday, January 12, 2017

Processing Day 1

Let’s code!

//This is an excerpt of a program we created in Processing. If you missed today here is a link to the worksheet we used and the presentation.



Static - Code runs once.

size(600, 400); // sets the canvas size
background(0); // sets the background color of the canvas to black
stroke(255);   // sets the outline or perimeter to the white
strokeWeight(10);  // sets the width of the stroke
fill(127); // fills in the area of the shape or object that follows
rect(200, 100, 200, 100)  // draws a rectangle starting at rect(x, y, w, h);


   Screen Shot 2017-01-09 at 11.43.20 PM.png

Interactivity


The majority of programs produced with Processing are made using active or dynamic mode. We were just using static mode. We want our software to keep generating or looping through our code.


We therefore need to new functions!  


  1. setup()  { code run between these curly braces will only run once. }


  1. draw() { this code can run repeatedly until the sketch is stopped }


The structure of an active mode sketch generally follows the pattern identified in the example below:
Screen Shot 2017-01-09 at 11.25.25 PM.png
  1. Let’s modify our old program:
      void setup ( ) {
           size(600, 400);
          }
        
      void draw ( ) {
background(0);
stroke(255);  
strokeWeight(10);  // beastly!
fill(127);
ellipse(200, 100, 25, 25);   // changed the rect into a circle
}
          Screen Shot 2017-01-09 at 11.50.38 PM.png


4. No real difference except now we have a small circle!


  1. Well big deal right? Now let’s use some built-in variables: mouseX and mouseY and put those into our code.
void setup ( ) {
 size(600, 400);
}
        
void draw ( ) {
 background(0);
 stroke(255);  
 fill(127);
 ellipse(mouseX, mouseY, 25, 25);   // changed the rect into a circle
}


ScreenFlow.gif


  1. OK… this is kind of fun. Let’s think…. Can we modify this code so that we cause the circle to make a trace as we drag it through the screen?
  2. What is happening in our code with the background( ) function?
    1. Let’s put that in setup and then run the code!
void setup ( ) {
 size(600, 400);
ScreenFlow.gif
 background(0);
}
        
void draw ( ) {
 stroke(255);  
 fill(127);
 ellipse(mouseX, mouseY, 25, 25);   
}


  1. Now let’s add an Event and some color. We need a new Variable and a new function
    1. mousePressed
    2. random( );   // assigns a random integer
    3. We will use random(255); as we have colors from 0 - 255
  2. Let’s Code!
void setup ( ) {
 size(600, 400);
 background(0);
}
        
void draw ( ) {
 If (mousePressed) {
 stroke(255);  
 fill(random(255), random(255),random(255));     // fill( r, g, b);
 ellipse(mouseX, mouseY, 25, 25);
}
}  
                       ScreenFlow.gif
 
  1. Let’s add a bit more functionality to our sketch
    1. We will add two more built in variables
      1. saveFrame( );
      2. keyPressed( );


if (keyPressed == true && key=='s') {
   saveFrame("sketch1.jpg");
 // change sketch1 to your name
 }


 // erase your drawing when you press keyboard 'r'
 if (keyPressed == true && key == 'r') {
   background(0);

Finished Program


void setup( ) {
 fullScreen( );
 background(0);
}


void draw ( ) {
 if (mousePressed) {
    fill(random(255), random(255), random(255));
    ellipse(mouseX, mouseY, 25, 25);
}


    if (keyPressed == true && key=='s') {
       saveFrame("sketch1.jpg");  // change sketch1 to your name
    }


   // erase your drawing when you press keyboard 'r'
   if (keyPressed == true && key == 'r') {
      background(0);
   }
 }