What is Processing?

A progammaing language, based on Java

Simpest "Hello World"

println("Hello world.");

void setup() {
    println("Hello world.");
}

A better one

The best one

void setup() {
       size(400, 400);
       stroke(255);
       background(192, 64, 0);
}

void draw() {
       line(150, 25, mouseX, mouseY);
}

How do I start?

It's used to define initial enviroment properties such as screen size and to load media such as images and fonts as the program starts.

int x = 0;

void setup() {
  size(200, 200);
  background(0);
  noStroke();
  fill(102);
}

void draw() {
  rect(x, 10, 2, 80); 
  x = x + 1;
}

void setup() { }

the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. draw() is called automatically and should never be called explicitly.

float yPos = 0.0;

void setup() {  // setup() runs once
  size(200, 200);
  frameRate(30);
}
 
void draw() {  // draw() loops forever, until stopped
  background(204);
  yPos = yPos - 1.0;
  if (yPos < 0) {
    yPos = height;
  }
  line(0, yPos, width, yPos);
}

void draw() { }

Defines the dimension of the display window width and height in units of pixels. In a program that has the setup() function, the size() function must be the first line of code inside setup().

void setup() {
  size(320, 240);
}

void draw() {
  background(153);
  line(0, 0, width, height);
}

size()

Defines the dimension of the display window width and height in units of pixels. In a program that has the setup() function, the size() function must be the first line of code inside setup().

void setup() {
  size(320, 240);
}

void draw() {
  background(153);
  line(0, 0, width, height);
}

size()

or use fullScreen(), but not at the same time as size()

float yPos = 0.0;

void setup() {  // setup() runs once
  size(200, 200);
}
 
void draw() {  // draw() loops forever, until stopped
  background(204);
  line(30, 20, 85, 75);
  quad(38, 31, 86, 20, 69, 63, 30, 76);
  rect(120, 20, 55, 55);
  triangle(100, 100, 50, 150, 150, 150);
  ellipse(160, 146, 55, 55);
}

2D primitives

You can make entertaining games with just 2d primitives. Check out http://sonengamejam.org/entries/ Fall 2013.

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

void draw() {
  background(255);
  fill(153);
  rect(30, 20, 55, 55);
  
  fill(204, 102, 0);
  rect(60, 40, 55, 55);
}

fill()

Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange.

int value = 0;

void draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

void mouseClicked() {
  if (value == 0) {
    value = 255;
  } else {
    value = 0;
  }
}

Input: Mouse

When a mouse button is pressed, the value of the system variable mouseButton is set to either LEFT,RIGHT, or CENTER, depending on which button is pressed. 

int value = 0;

void draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

void keyPressed() {
  if (value == 0) {
    value = 255;
  } else {
    value = 0;
  }
}

Input: Keyboard

The keyPressed() function is called once every time a key is pressed. The key that was pressed is stored in the key variable. 

void draw() {
  background(255);
  textSize(32);
  text("word", 10, 30); 
  fill(0, 102, 153);
  text("word", 10, 60);
  fill(0, 102, 153, 51);
  text("word", 10, 90);
}

Displaying text

void draw() {
  background(255);
  textSize(32);
  text("word", 10, 30); 
  fill(0, 102, 153);
  text("word", 10, 60);
  fill(0, 102, 153, 51);
  text("word", 10, 90);
}

Displaying text

The keyPressed() function is called once every time a key is pressed. The key that was pressed is stored in the key variable. 

PImage photo;

void setup() {
  size(100, 100);
  photo = loadImage("laDefense.jpg");
}

void draw() {
  image(photo, 0, 0);
}

Using images

Loads an image into a variable of type PImage. Four types of images ( .gif, .jpg, .tga, .png) images may be loaded. To load correctly, images must be located in the data directory of the current sketch.

PImage img;

void setup() {
  img = loadImage("laDefense.jpg");
}

void draw() {
  imageMode(CENTER);
  image(img, 50, 50, 80, 80);
}

imageMode()

Modifies the location from which images are drawn by changing the way in which parameters given to image() are intepreted. Use CORNER, CORNERS, or CENTER. The default is CORNER.

That's probably the basics...

I made this

https://gist.github.com/Kyrremann/2b5622ba1a96119a29df

More

advanced

float x;

void setup() {
  size(400, 400);
  x = -50;
}

void draw() {
  background(255);
  rect(x, 175, 50, 50);
  x++;
  
  if (x > width) {
    x = -50;
  }
}

move stuff

float x;
float speed = 2;

void setup() {
  size(400, 400);
  x = -50;
}

void draw() {
  background(255);
  rect(x, 175, 50, 50);
  x += speed;
  
  if (x > width) {
    x = -50;
  }
}

with speed

int sw = 500, sh = 600, bw = 5, bh = 14;
float dt = 1; 
float L = 0, C = 0.001, g = 0.05;
float x = 0, y = 5; 
float vx = 2, vy = 3;

void setup() {
  size(500, 600);
  frameRate(60);
}

void draw() {
  //background(1); // legg til for å ikke lage en "stripe" av bokser
  float v = sqrt(vx*vx+vy*vy);    
  float ax = -C*L*v*vx;
  float ay = -C*L*v*vy - g;
  vx += ax * dt;
  vy += ay * dt;
  x += vx * dt;
  y += vy * dt;
  rect(x, ((sh - bh) - y), bw, bh);
 
  if(y < 0) {
    y = 0;
    vy *= -1.1;
  }
  if(y > sh) {
    y = sh - bh;
    vy = 3;
    vy *= -1.1;
  }
 
  if(x < 0) {
    x = 0;
    vx *= -1.1;
  }
  if(x > sw) {
    x =  sw - bw;
   vx *= -1.1;
  }
}

Simple bouncy physic