//Navigation

Introduction
Basics
Modes
Render Modes
101 and exercises
Saving Frames
Different Screens
Slideshow
Timing events
Intro to Generative Design
Readings

Processing

Introduction



Processing is an open source tool designed by Casey Reas and Ben Fry from MIT. It is a java application that was originally created to enable nonprogrammers to make digital artworks.

Processing includes
  • an integrated development environment (IDE)
  • a programming language
  • tools to publish the applications for the web or desktop.

Because Processing runs using Java, it can do almost anything Java can do. You can use it to read and write data, work with images, video or sound, draw in two or three dimensions, create artificial intelligence, and simulate physics.

A Processing sketch has two fundamental methods:
  1. setup()
  2. draw()
The first method is invoked when your application starts and the second is invoked over and over again. It is the main loop of your application.



setup()

Any instructions put in the setup() method run when the application first starts. It is where you prepare the application, like setting up the size and the frame rate. 
void setup(){
     size(400,400);
     //number of times per second that the 
     //draw() method is called 
     frameRate(30);
     
     print("all done setting up");
      
 }
 void setup(){
  size(400,400);
  frameRate(30);
  print("all done setting up");
}

void draw(){
  stroke(0x33FF0000);
  fill(0x330000FF);
  strokeWeight(random(10));
  ellipse(mouseX, mouseY, 200,200);
}




Putting something on the screen is easy in Processing:

Using commands like line means everything you do can give you immediate visual response. line() does what it sounds like it does, and takes four simple arguments—two pairs of x and y coordinates. One for the start point and another for the end point. 
line(0,0,200,200);


Processing is interactive:

Add a draw() loop, and the line you draw can become interactive if you use the coordinates of the mouse: 
void setup() {  
    size(400,400);  
}  
void draw() {  
    background(255); //try moving this line to setup and watch what happens!  
    line(0,0,mouseX,mouseY);  
}

Processing can help you visualize numbers:

The numbers can also be meaningful values – in this case, from the internal clock. 
void setup() {
  size(400,400);
  strokeWeight(50);
  strokeCap(SQUARE);
}
void draw() {
  smooth();
  background(255);
  line(100,0,100,(hour()/24.0)*height);
  line(200,0,200,(minute()/60.0)*height);
  line(300,0,300,(second()/60.0)*height);
}

Processing uses variables:

Using variables in place of fixed number values allows you to adjust that value – over time for animation, to transform the value aesthetically, and to experiment with how code works. In fact, the best way to start to figure out code – even before you're sure how it works – is often to start messing around with values. Sometimes breaking code you don't understand can be a great learning experience. Watch what happens when you move mouseX and mouseY with our interactive line: 
void setup() {  
    size(400,400);  
}  
  
void draw() {  
    background(200);  
    line(mouseY,height/2,width/2,mouseX);  
}



Processing can use loops

Seeing a loop happen – even a simple one – illustrates the way the process of iteration can work in more complex problems. 
int numOfLines = 10;  
int distance = 10;  
  
size(200,200);  
background(0);  
stroke(255);  
strokeWeight(3);  
  
int yPos = 20;  
for(int i=0; i<numOfLines; i++) {  
  line(20,yPos,width-20,yPos);  
  yPos += distance;  
}  

//bonus!  
/* 
//int yPos = 20; 
for(int i=0; i<numOfLines; i++) { 
  line(20,yPos,width-20,yPos); 
  yPos += distance; 
  distance += 2; 
} 
*/
Here's another for loop example: 
//Continuous radial gradient
size(200,200);
background(0);
for (int i=255; i>0; i--){
    noStroke();
    fill(255-i);
    ellipse(width/2, height/2, i, i);
}
And another:
for (int i = 0; i < classes; i++) {
   doHomework();
}



Processing can loop over arrays:
Using arrays (lists) with loops can help to simplify code, even in a simple example – loops and lists are a natural match for one another, since the former lets you iterate through the latter. 
int[] circles = {170,113,78,30,13};  
size(400,400);  
background(150);  
noStroke();  
smooth();  
  
for (int i=0;i<circles.length;i++){  
  fill(random(0,255),random(0,255),random(0,255));  
  ellipse(width/2,height/2,circles[i],circles[i]);  
}

Processing can have loops within loops:
You can also place a loop inside a loop. Huh?
It helps to see the result. 
int[] circles = {170,113,78,30,13};  
size(400,400);  
background(150);  
noStroke();  
smooth();  
  
for (int j=0;j<4;j++) {  
  for (int i=0;i<circles.length;i++){  
	fill(random(0,255),random(0,255),random(0,255));  
	ellipse((width/4)*j,(height/4)*j,circles[i],circles[i]);  
  }  
}
You can extend the loops within loops concept to more involved iteration, such as iterating through columns, then rows – essential to processing the individual pixels in an image.


Curly braces{}

The curly brace is a syntactical structural element. They always appear in balanced pairs (an open and closed brace), and are used to structure blocks of code. Here's a conditional if...else example: 
if (thisSeason == "summer") {
    enjoySummerVacation();
} else {
    studyInSchool();
}


Functions:

Functions can be understood as recipes. In pseudo-code:
makes cake "Cakemaker" (eggs, flour, ingredients, etc...) {  
  step 1  
  step 2  
  step 3  
  return cake, serves 8  
}


Here's a function example: 
void  enjoySummerVacation() {
    println("sleep late and no homework");
}


Dot syntax and Objects

Another syntactical structure is the dot (.)

Object-oriented programming may seem mystical, but it's really just a way to better organize code functions. For instance, in the case of the cake:
makes cake "Cakemaker" (eggs, flour, ingredients, etc...) {  
  step 1  
  step 2  
  step 3  
  return cake, serves 8  
}
you might consider the cake's attributes and what can be done to it (make a cake, eat a cake, throw a cake on the ground), and then organize your cake class relative to smaller categories of related things (cupcakes) and bigger categories of things (dessert).

Procedural programming uses functions to organize a program. In OOP, you build much more complex structures called classes.

To use a class, you create instances of it, known as objects. 
Cat myCat=new Cat();


Classes contain properties and methods. You can think of the properties as the traits of the object and the methods as actions you perform on/with the traits. For example, if you create a class called Cat, some of the properties might be color, weight, and markings, and a method might be getBreed(). You use the dot syntax as a way to connect an object with its properties and/or methods.

If you create an object Clark from the Cat class, the object can call the getBreed() method using dot syntax, like this: 
Cat Clark=new Cat();
String breed = Clark.getBreed();