Learning ProcessingJS

1,973 views
1,831 views

Published on

Intro to ProcessingJS - HTML 5.0 games in the browser

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,973
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Learning ProcessingJS

  1. 1. ProcessingJS Its all fun and games! John Vlachogiannis @jonromeroBugSense.com
  2. 2. Doing animations on the web [2012]
  3. 3. Doing animations on the web [2012]
  4. 4. Doing animations on the web [2012]
  5. 5. What can the (web) artist do?
  6. 6. ProcessingYour electronic sketchbook
  7. 7. There are more!● Body navigation● Arduino● Brain control● Genetic Music/Graphics● Social integration● Visualizations● Limit = Sky
  8. 8. Platforms● Windows● GNU/Linux● Mac● Mobile● Arduino● and online (web browsers!)
  9. 9. ProcessingJSYour electronic sketchbook inside the browser!
  10. 10. SupportsThe latest versions of ● Firefox ● Safari ● Chrome ● Opera ● Internet Explorerand their mobile versions :)but keep it secret from Apple!
  11. 11. Prerequisites1. A text editor (or http://sketch.processing.org/)2. processing.js3. yourfile.html4. fun.pde or fun.js5. Mood for exploration/fun
  12. 12. How to access local files [Chrome]Python to the resque!> python -m SimpleHTTPServer
  13. 13. Starting1. A setup function2. A loop function
  14. 14. Example: peoplez.html
  15. 15. first.pdevoid 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!");}
  16. 16. first.pdevoid 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. 17. Example: wiggle.html
  18. 18. Animation time - wigglevoid 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);}
  19. 19. Animation time - ticklevoid 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. 20. Example: fly0.html
  21. 21. Keyboardvoid keyPressed() { if (keyCode == RIGHT) { gx += 2; } else if (keyCode == LEFT) { gx -= 2; } else if (keyCode == UP) { gy -= 2; } else if (keyCode == DOWN) { gy += 2; }}
  22. 22. Example: fly.html
  23. 23. Example: http://jon.io
  24. 24. Challenge for a Hackthon? HTML 5.0 Platform game?
  25. 25. Find more about Processing● Processing.org● ProcessingJS.orgMore information available for Processing, sosearch for algorithms there.
  26. 26. Thanks! "bug" me at @jonromerocode available at: https://github.com/jonromero/processingjs-examples

×