Processing.js

A quick tutorial by fabiola

Why?

What is processing.js ?

Let's look at processing first!

Processing

​

1. Programming Language
2. Development Environment
3. Online Community

​

​

Why do I like it?

​

• Great teaching tool
• Open source
• Active community
• So many external libraries
• It produces beautiful results

​

Demo Processing, please!

Processing.js

- Processing ported to browser

​

- makes use of HTML5 Canvas Element

​

- data visualizations, digital art, interactive animations, educational graphs, video games...

​

- runs in FireFox, Safari, Chrome, Opera, and Internet Explorer.

Let's see some examples!

Marius Watz's Abstract.js

​

Bezier Curves Explained

​

Josh Nimoy's Ball Droppings

Simon Last's Paintbrush, TweetWeather

A lot more, here:

http://processingjs.org/exhibition/

What does the code look like?

Two options:

​

1st Method: 2nd Method:

​

Needed Files: Needed Files:

1. processing.js 1. processing.js

2. anything.html 2. anything.html

3. anything.pde

​

The anything.html file will look like:

<script src="processing.js"></script> �<canvas data-processing-sources="anything.pde"></canvas>�

The anything.pde file will look like:

void setup()�{� size(200,200);� background(125);� fill(255);� noLoop();� PFont fontA = loadFont("courier");� textFont(fontA, 14); �}�void draw(){ � text("Hello Web!",20,20);� println("Hello ErrorLog!");�}

​

In the second method the anything.html file will look like:

<script src="processing.js"></script>�<script type="text/processing" data-processing-target="mycanvas">�

void setup(){� size(200,200);� background(125);� fill(255);� noLoop();� PFont fontA = loadFont("courier");� textFont(fontA, 14); �}�void draw(){ � text("Hello Web!",20,20);� println("Hello ErrorLog!");�}�</script>�<canvas id="mycanvas"></canvas>

​

Let's try it!

Final note

Processing.js is not the only web-drawing tool

​

Two main competitors:

- Paper.js

- Raphaël

​

Web Drawing Tool Comparison

For a more in-depth comparison

http://zgrossbart.github.com/3gears/

​

​

Questions?

if you want to try this out and have questions, feel free to email me: fhanna@ucsc.edu