Learning ProcessingJS

ProcessingJS Its all fun and games! John Vlachogiannis @jonromeroBugSense.com

Doing animations on the web [2012]

What can the (web) artist do?

ProcessingYour 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!)

ProcessingJSYour electronic sketchbook inside the browser!

SupportsThe latest versions of ● Firefox ● Safari ● Chrome ● Opera ● Internet Explorerand their mobile versions :)but keep it secret from Apple!

Prerequisites1. A text editor (or http://sketch.processing.org/)2. processing.js3. yourfile.html4. fun.pde or fun.js5. Mood for exploration/fun

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

Starting1. A setup function2. A loop function

Example: peoplez.html

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

Example: wiggle.html

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

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

Example: fly0.html

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

Example: fly.html

Example: http://jon.io

Challenge for a Hackthon? HTML 5.0 Platform game?

Find more about Processing● Processing.org● ProcessingJS.orgMore information available for Processing, sosearch for algorithms there.

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

http://www.redditmedia.com	38
http://a0.twimg.com	13

Learning ProcessingJS

by Jon Vlachoyiannis on Jan 12, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 51

Statistics

Learning ProcessingJS — Presentation Transcript