Intro to ProcessingJS - HTML 5.0 games in the browser

1. ProcessingJS
It's all fun and games!
John Vlachogiannis
@jonromero
BugSense.com

2. Doing animations on the web [2012]

3. Doing animations on the web [2012]

4. Doing animations on the web [2012]

5. What can the (web) artist do?

6. Processing
Your electronic sketchbook

8. There are more!
● Body navigation
● Arduino
● Brain control
● Genetic Music/Graphics
● Social integration
● Visualizations
● Limit = Sky

9. Platforms
● Windows
● GNU/Linux
● Mac
● Mobile
● Arduino
● and online (web browsers!)

10. ProcessingJS
Your electronic sketchbook
inside the browser!

11. Supports
The latest versions of
● Firefox
● Safari
● Chrome
● Opera
● Internet Explorer
and their mobile versions :)
but keep it secret from Apple!

12. 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

13. How to access local files [Chrome]
Python to the resque!
> python -m SimpleHTTPServer

14. Starting
1. A setup function
2. A loop function

15. Example: peoplez.html

16. 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!");
}

17. 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!");
}

18. Example: wiggle.html

19. 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);
}

20. 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);
}

21. Example: fly0.html

22. 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;
}
}

23. Example: fly.html

24. Example: http://jon.io

25. Challenge for a Hackthon?
HTML 5.0 Platform game?

26. Find more about Processing
● Processing.org
● ProcessingJS.org
More information available for Processing, so
search for algorithms there.

27. Thanks!
"bug" me at @jonromero
code available at: https://github.com/jonromero/processingjs-
examples