Static Mode: triangle mean preview, square is for when code crashes. Pick Java, Android or Java script. 200px squared is default on empty sketch. Size function - size(x, y); . All values to have ";" on the end. Shapes - name(x, y, w, l); e.g. ellipse(400, 30, 45, 200); . Adding colour - fill(red, green, blue); , e.g. fill(255, 0, 0); = red. Use for text and shapes. Applies to the objects below. Black = 0; transparent = noFill(); Outline of object = strokeWeight (5); , outline colour = stroke(255, 0, 0);

Interactive mode: always start with - void setup() { -next line- size(x, y); -next line- }. -next line- void draw() { -next line- object etc. -next line- } . to add text without Processing acknowledging it, begin with //. To track what numbers are doing (black bit at the bottom), do println(); command. Mouse location (mouseX, mouseY); .

<< Code for this interactive clock
float nameDiameter;
void setup() {
size(700, 700);
nameDiameter = 0.1;
}
void draw() {
fill(second(), second(), minute());
strokeWeight(1);
stroke(0);
ellipse(mouseX, mouseY, second(), second());
println9mouseX);
nameDiameter += 0.1;
}

Code for a music visualization:
import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;
Minim minim;
AudioPlayer song;
void setup() {
size(500, 500);
minim = new Minim(this);
song = minim.loadFile("nameofsong.mp3", 1000);
song.play();
}
void draw() {
background(200, 100, 300);
float pulse = song.left.get(100);
println(pulse);
no stroke();
fill(0, 400, 300);
ellipse(width/2, height/2, pulse*200, pulse*200);
}
void stop()
{
song.close();
minim.stop();
super.stop();
}

Text: tools > create font. Choose font. Copy name and adjust size. Help Reference > reference > PFont |rearrange code|. Importing images: declare first - PImage name;. In setup - name =loadImage ("imagename"); save. Drag image onto sketch. In draw - image(name, coordinateX, coordinateY);. || means or, && means and.

Hover over button/mouse location=picture change code:

PFont font;
PImage tiger;
PImage bug;
void setup() {
size (700, 700);
font = loadFont("nameoffont.vlw");
tiger = loadImage("imageoftiger.jpg");
bug = loadImage("imageofbug.jpg");
}
void draw() {
background (250, 100, 200);
if(mouseX > 300) {
image(tiger, 0, 0);
} else if (mouseY < 600) {
image(bug, 0, 0);
} else {
fill (0, 300, 100);
textFont(font, 32);
text(X Value is " +mouseX, 200, 400);
}
}

Video capture: lightness in the room sensor - copy code for video capture, use similar principle as with rollover image on left.

import processing.video.*;
Capture cam;
float myBrightness;
pImage light;
PImage dark;
PFont font;
void setup(){
size(1037, 1584);
cam = new Capture(this);
cam.start();
light = loadImage("light.jpg");
dark = loadImage("dark.jpg");
font = loadFont("fontname.vlw");
}
void draw() {
if (cam.available() == true) {
cam.read():
}
cam.loadPixels();
for (int i = 0; i < cam.pixels.length; i++){
r = red (cam.pixels[i]);
g = green (cam.pixels[i]);
b = blue (cam.pixels[i]);
myBrightness = (r+g+b)/3;
}
println(myBrightness);
if(myBrightness > 6){
image(light, 0, 0);
} else if (myBrightness < 6){
image(dark, 0, 0);
}
if(myBrightness > 8){
fill (400, 0, 0);
textFont(font, 32);
text("Lightness value is " +myBrightness, 200, 400);
} else {
fill (400, 0, 0);
textFont(font, 32);
text(Lightness value is " +myBrightness, 200, 400);
}

Processing Workshop

Processing.org > reference > library > extend functions. Install library > go to libraries > unzip file in processing sketches folder. "Examples" has codes to show effect. Minim means audio