Learning ProcessingJS

ProcessingJS
It's all fun and games!

John Vlachogiannis
@jonromero

BugSense.com

Doing animations on the web [2012]

Processing

Your electronic sketchbook

There are more!

● Body navigation
● Arduino
● Brain control
● Genetic Music/Graphics
● Social integration
● Visualizations
● Limit = Sky

Platforms

● Windows
● GNU/Linux
● Mac
● Mobile
● Arduino

● and online (web browsers!)

ProcessingJS

Your electronic sketchbook
inside the browser!

Supports

The latest versions of

● Firefox
● Safari
● Chrome
● Opera
● Internet Explorer

and their mobile versions :)
but keep it secret from Apple!

Prerequisites

1. A text editor (or http://sketch.processing.org/)
2. processing.js
3. yourfile.html
4. fun.pde or fun.js
5. Mood for exploration/fun

How to access local files [Chrome]

Python to the resque!

> python -m SimpleHTTPServer

Starting

1. A setup function
2. A loop function

first.pde
void setup()
{
size(500,500);
background(125);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}

void draw(){
text("Hello Peoplez of Europe",20,20);
println("Hello ErrorLog!");
}

Animation time - wiggle

void draw()
{
fill(204, 120);
rect(0, 0, width, height);
fill(0);
// If the cursor is over the text, change the position
if ((mouseX >= x) && (mouseX <= x+55) &&
(mouseY >= y-24) && (mouseY <= y)) {
x += random(-5, 5);
y += random(-5, 5);
}
text("tickle", x, y);
}

Animation time - tickle

void draw()
{
fill(204, 120);
rect(0, 0, width, height);
fill(0);
// If the cursor is over the text, change the position
if ((mouseX >= x) && (mouseX <= x+55) &&
(mouseY >= y-24) && (mouseY <= y)) {
x += random(-5, 5);
y += random(-5, 5);
}
text("tickle", x, y);
}

Keyboard
void keyPressed() {
if (keyCode == RIGHT) {
gx += 2;
}
else if (keyCode == LEFT) {
gx -= 2;
}
else if (keyCode == UP) {
gy -= 2;
}
else if (keyCode == DOWN) {
gy += 2;
}
}

Challenge for a Hackthon?
HTML 5.0 Platform game?

Find more about Processing

● Processing.org
● ProcessingJS.org

More information available for Processing, so
search for algorithms there.

Thanks!
"bug" me at @jonromero

code available at: https://github.com/jonromero/processingjs-
examples

Learning ProcessingJS

More Related Content

What's hot

Similar to Learning ProcessingJS

Recently uploaded

Learning ProcessingJS