8/8/2019 processing-1212941127054655-9

1/15

ProcessingJohn Resig- http://ejohn.org/

http://ejohn.org/http://ejohn.org/

8/8/2019 processing-1212941127054655-9

2/15

Processing Data Visualization programming language

Built on top of Java

8/8/2019 processing-1212941127054655-9

3/15

The Language Strictly typed

Has classes, inheritance

A bunch of globally-accessible functions (Veryflat API)

setup() and draw() methods

Very OpenGL-like

draw() is called continually at a specificframerate

8/8/2019 processing-1212941127054655-9

4/15

Draw A Line w/ Mouse While you hold the mouse down, draw a

line from the previous mouse point

http://ejohn.org/apps/processing.js/

examples/topics/continuouslines.html void setup() {

size(200, 200);

background(102);

}

void draw() {

stroke(255);

if(mousePressed) {

line(mouseX, mouseY, pmouseX, pmouseY);

}

}

http://ejohn.org/apps/processing.js/examples/topics/continuouslines.htmlhttp://ejohn.org/apps/processing.js/examples/topics/continuouslines.htmlhttp://ejohn.org/apps/processing.js/examples/topics/continuouslines.htmlhttp://ejohn.org/apps/processing.js/examples/topics/continuouslines.htmlhttp://ejohn.org/apps/processing.js/examples/topics/continuouslines.htmlhttp://ejohn.org/apps/processing.js/examples/topics/continuouslines.htmlhttp://ejohn.org/apps/processing.js/examples/topics/continuouslines.htmlhttp://ejohn.org/apps/processing.js/examples/topics/continuouslines.html

8/8/2019 processing-1212941127054655-9

5/15

Initialization setup() is called initially

size(...) set the width/height of the drawingarea

Call any other number of methods, suchas: background(...)- draw and fill a

background void setup() {

size(200, 200);

background(102);

}

8/8/2019 processing-1212941127054655-9

6/15

draw() loop draw() gets called as fast as possible, unless

a frameRate is specified

stroke() sets color of drawing outline

fill() sets inside color of drawing

mousePressed is true if mouse is down

mouseX, mouseY - mouse position void draw() {

stroke(255);

if(mousePressed) {

line(mouseX, mouseY, pmouseX, pmouseY);

}}

8/8/2019 processing-1212941127054655-9

7/15

Drawing Different drawing methods: line() rect()

arc() ellipse() point() quad()

triangle() bezier()

All use stroke(), strokeWeight(), fill()

8/8/2019 processing-1212941127054655-9

8/15

The Canvas OpenGL-y

Mutate the canvas rendering: translate() scale() rotate()

Save and Restore the state of the canvas: pushMatrix() popMatrix()

http://ejohn.org/apps/processing.js/

examples/basic/arm.html

http://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.htmlhttp://ejohn.org/apps/processing.js/examples/basic/arm.html

8/8/2019 processing-1212941127054655-9

9/15

Shapes A series of vertices, built into a shape fill(127);

beginShape();

for (int i=0; i

8/8/2019 processing-1212941127054655-9

10/15

8/8/2019 processing-1212941127054655-9

11/15

Math functions dist(), map(), constrain(), abs(),

floor(), ceil()

random(), noise()

atan2(), cos(), sin(), pow(), sqrt()

radians()

8/8/2019 processing-1212941127054655-9

12/15

Images Load in external images

http://ejohn.org/apps/processing.js/examples/topics/sequential.html

int numFrames = 12; // The number of frames in the animation

int frame = 0;

PImage[] images = new PImage[numFrames];void setup(){

size(200, 200);

frameRate(30);

for(int i=0; i

8/8/2019 processing-1212941127054655-9

13/15

Ported to JS Been working over the past couple months

Crude port of the Processing Language +

Porting the 2D Processing API All runs in JavaScript on top of HTML 5

Canvas

Works in all browsers (IE with excanvas)

8/8/2019 processing-1212941127054655-9

14/15

Processing.js Demos http://ejohn.org/apps/processing.js/

snake.html

http://ejohn.org/apps/processing.js/

molten.html

http://ejohn.org/apps/processing.js/examples/basic/

http://ejohn.org/apps/processing.js/examples/topics/

http://ejohn.org/apps/hero/

http://ejohn.org/apps/hero/http://ejohn.org/apps/hero/http://ejohn.org/apps/processing.js/examples/topics/http://ejohn.org/apps/processing.js/examples/topics/http://ejohn.org/apps/processing.js/examples/basic/http://ejohn.org/apps/processing.js/examples/basic/http://ejohn.org/apps/processing.js/molten.htmlhttp://ejohn.org/apps/processing.js/molten.htmlhttp://ejohn.org/apps/processing.js/snake.htmlhttp://ejohn.org/apps/hero/http://ejohn.org/apps/hero/http://ejohn.org/apps/processing.js/examples/topics/http://ejohn.org/apps/processing.js/examples/topics/http://ejohn.org/apps/processing.js/examples/topics/http://ejohn.org/apps/processing.js/examples/topics/http://ejohn.org/apps/processing.js/examples/basic/http://ejohn.org/apps/processing.js/examples/basic/http://ejohn.org/apps/processing.js/examples/basic/http://ejohn.org/apps/processing.js/examples/basic/http://ejohn.org/apps/processing.js/molten.htmlhttp://ejohn.org/apps/processing.js/molten.htmlhttp://ejohn.org/apps/processing.js/molten.htmlhttp://ejohn.org/apps/processing.js/molten.htmlhttp://ejohn.org/apps/processing.js/snake.htmlhttp://ejohn.org/apps/processing.js/snake.htmlhttp://ejohn.org/apps/processing.js/snake.htmlhttp://ejohn.org/apps/processing.js/snake.html

8/8/2019 processing-1212941127054655-9

15/15

Processing Demos http://acg.media.mit.edu/people/fry/

zipdecode/

http://complexification.net/gallery/

machines/substrate/

http://sublimeguile.com/processing/tree_071017b/

http://vimeo.com/311550

http://vimeo.com/311550http://sublimeguile.com/processing/tree_071017b/http://sublimeguile.com/processing/tree_071017b/http://complexification.net/gallery/machines/substrate/http://vimeo.com/311550http://vimeo.com/311550http://sublimeguile.com/processing/tree_071017b/http://sublimeguile.com/processing/tree_071017b/http://sublimeguile.com/processing/tree_071017b/http://sublimeguile.com/processing/tree_071017b/http://complexification.net/gallery/machines/substrate/http://complexification.net/gallery/machines/substrate/http://complexification.net/gallery/machines/substrate/http://complexification.net/gallery/machines/substrate/http://acg.media.mit.edu/people/fry/zipdecode/http://acg.media.mit.edu/people/fry/zipdecode/http://acg.media.mit.edu/people/fry/zipdecode/http://acg.media.mit.edu/people/fry/zipdecode/