Downloaded 14 times
![Doing animations on the web [2012]](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/85/Learning-ProcessingJS-2-320.jpg)
![Doing animations on the web [2012]](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/85/Learning-ProcessingJS-3-320.jpg)
![Doing animations on the web [2012]](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/85/Learning-ProcessingJS-4-320.jpg)
![How to access local files [Chrome]
Python to the resque!
> python -m SimpleHTTPServer](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/85/Learning-ProcessingJS-13-320.jpg)
![Doing animations on the web [2012]](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/75/Learning-ProcessingJS-2-2048.jpg)
![Doing animations on the web [2012]](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/75/Learning-ProcessingJS-3-2048.jpg)
![Doing animations on the web [2012]](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/75/Learning-ProcessingJS-4-2048.jpg)
![How to access local files [Chrome]
Python to the resque!
> python -m SimpleHTTPServer](https://image.slidesharecdn.com/processingjs-120112084456-phpapp01/75/Learning-ProcessingJS-13-2048.jpg)
Uploaded byJon Vlachoyiannis
Learning ProcessingJS
This document discusses ProcessingJS, which allows users to create interactive graphics and animations directly in their web browser. It can be used for sketching, prototyping, and sharing projects online. The document provides examples of creating animations and handling keyboard input. It also lists various platforms ProcessingJS can be used on and points the reader to additional resources for learning more about ProcessingJS.
![[Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://cdn.slidesharecdn.com/ss_thumbnails/animatronplayerv2-131114045057-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Learning ProcessingJS
- 1. ProcessingJS It's all fun and games! John Vlachogiannis @jonromero BugSense.com
- 2. Doing animations onthe web [2012]
- 3. Doing animations onthe web [2012]
- 4. Doing animations onthe web [2012]
- 5. What can the(web) artist do?
- 6.
- 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 versionsof ● Firefox ● Safari ● Chrome ● Opera ● Internet Explorer and their mobile versions :) but keep it secret from Apple!
- 12. Prerequisites 1. A texteditor (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 accesslocal files [Chrome] Python to the resque! > python -m SimpleHTTPServer
- 14. Starting 1. A setupfunction 2. A loop function
- 15.
- 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.
- 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.
- 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.
- 24.
- 25. Challenge for aHackthon? HTML 5.0 Platform game?
- 26. Find more aboutProcessing ● 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