What is Processing?

How do basic sketches work?

Two main parts

void setup() 
{
  // called at the beginning
}
void draw() 
{
  // run every refresh
  // default 60 frames per second
}
					

Set screen size

void setup() 
{
  size(400, 600); // width, height (pixels)
}
					

Draw something

void setup() 
{
  size(400, 600);
}

void draw() 
{
  fill(255, 0, 0); // make fill color red
  // centered at x, y and width, height
  ellipse(200, 200, 300, 300);
}
					

Draw order

void setup() 
{
  size(400, 600);
}

void draw() 
{
  fill(255, 0, 0);
  ellipse(200, 200, 300, 300);
  fill(0, 255, 0);
  // top left x,y and width, height
  rect(50, 250, 300, 300);
}
					

How can I animate this?

Draw a bunch!

void setup() 
{
  size(400, 600);
}

int y = 0;
void draw() 
{
  fill(255, 0, 0);
  ellipse(200, y, 300, 300);
  y = y + 1; // update the y component
}
					

Draw a bunch better!

void setup() 
{
  size(400, 600);
}

int y = 0;
void draw() 
{
  background(255); // white background
  fill(255, 0, 0);
  ellipse(200, y, 300, 300);
  y = y + 1;
}
					

How can I make my sketch more interactive?

If statements

void setup() {
    size(300, 300);
}

void draw() {
    // if the mouse is above the 150th pixel
    if(mouseY < 150) {
        fill(255, 0, 0); 
    }
    // if the mouse is below the 150th pixel
    if(mouseY >= 150) {
        fill(0, 255, 0);
    }
    ellipse(150, 150, 100, 100);
}
						

Else statement

void setup() {
    size(300, 300);
}

void draw() {
    // if the mouse is above the 150th pixel
    if(mouseY < 150) {
        fill(255, 0, 0);
    // otherwise 
    } else {
        fill(0, 255, 0);
    }
    ellipse(150, 150, 100, 100);
}
						

For loop

void setup() {
    size(300, 300);
    fill(0, 0, 255);
}

void draw() {
    for (int i = 15; i < 300; i = i + 30) {
        ellipse(i, 150, 30, 30);
    }
}
						

Nested For loop

void setup() {
    size(300, 300);
    fill(0, 0, 255);
}

void draw() {
    for (int i = 15; i < 300; i = i + 30) {
        for (int j = 15; j < 300; j = j + 30) {
            ellipse(i, j, 30, 30);
        }
    }
}
						

Functions

void setup() {
    size(300, 300);
}
void draw() {
    blueCircle(150, 100);
    yellowCircle(150, 200);
}
void blueCircle(int x, int y) {
    fill(0, 0, 255);
    ellipse(x, y, 50, 50);
}
void yellowCircle(int x, int y) {
    fill(255, 255, 0);
    ellipse(x, y, 50, 50);
}
						

How can I click things?

Click

void setup() {
  size(512, 512);  
}

void draw() {  
}

// special method, every mouse click
void mousePressed() {
  println("Mouse pressed at ("+mouseX+","+mouseY+")");
}
					

Click better

void setup() {
    size(512, 512);  
}

void draw() {
    fill(0, 255, 0);
    rect(206, 206, 100, 100);  
}

void mousePressed() {
    if ((mouseX > 206) && (mouseX < 206 + 100) 
        && (mouseY > 206) && (mouseY < 206 + 100)) {
        println("Square! :)");
    } else {
        println("Not square! :(");
    }
}
					

Click with math

void setup() {
  size(512, 512);  
}

void draw() {
  fill(255, 0, 0);
  ellipse(256, 256, 100, 100);  
}

void mousePressed() {
  // a^2 + b^2 < c^2, Pythagorean Theorem
  if (sq(mouseX-256)+sq(mouseY-256) < sq(50)) {
    println("Circle! :)");
  } else {
    println("Not circle! :(");
  }
}
						

Press Buttons

void setup() {
    size(512, 512);  
    fill(0, 0, 0);
}
void draw() {
    rect(56, 56, 400, 400);  
}
void keyPressed() {
    if (key == 'r') {
        fill(255, 0, 0);
    } else if (key == 'g') {
        fill(0, 255, 0);
    } else if (key == 'b') {
        fill(0, 0, 255);
    }
}
						

Crazy Stuff, Please!

Ribbon

void setup() {
    size(512, 512);
    background(0, 0, 0);
}

void draw() {
    // set color to black and mostly transparent
    fill(0, 10);
    // draw a rectangle the size of the window
    rect(0, 0, width, height);
    // Set color to white
    fill(255);
    // No borders
    noStroke();
    ellipse(mouseX, mouseY, 50, 50);
}
                        

Fractals

void setup() {
    size(512, 512);  
}
void draw() {
    square(0, 0, 512, 512, 255);
}
void square(int x, int y, int w, int h, int c) {
    fill(c);
    rect(x, y, w, h);
    if (w > 1) {
        square(x, y, w/3, h/3, 255 - c);
        square(x + w - w/3, y, w/3, h/3, 255 - c);
        square(x, y + h - h/3, w/3, h/3, 255 - c);
        square(x + w - w/3, y + h - h/3, w/3, h/3, 255 - c);
    }
}
						

Barnsley fern

Flappy Bird

Built-in Examples

How can I share this with my mom?

Export it!

What are we doing today?

Goal

Make a UI with at least 4 click-able events/objects. Examples:

• the cow goes...
• body anatomy
• this is a circle

Begin!