Processing.JS

What is Processing.JS?

Digital art, visualizations & interactive web animations
...without plugins!

A JavaScript port of the Processing Visualization Language.

Processing (the language)

  • It's not JavaScript (gasp)!
  • Object Oriented
  • Designed for Artists & Makers
  • Easy to learn

Why Processing?

vs.

D3.js - CanvasJS HTML5 Charts - JavaScript InfoViz Toolkit - Kinetic.JS - Raphael - SWFObject - Three.JS - Two.JS - FrameEngine - PhiloGB - ChartJS - iio engine

Including Processing.JS


 
 

 <canvas data-processing-sources="hello.pde"></canvas>

 

Let's try!

hello.pde


float radius = 50.0;
int X, Y, nX, nY;
int delay = 16;

void setup() {
  size ( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;
}

void draw() {
  radius = radius + sin( frameCount / 4 );
  X += (nX-X)/delay;
  Y += (nY-Y)/delay;
  background( 100 );
  fill( 0, 121, 184 );
  stroke(255);
  ellipse( X, Y, radius, radius );
}

void mouseMoved() {
  nX = mouseX;
  nY = mouseY;
}

Using JS from Processing

  • It's easy!
  • Processing code has access to global scope
  • JavaScript can be in-lined in Processing

Using Processing from JS

videos.pde



void addVideo(String hostname, int length) {

  // Do something very clever in Processing!

}

index.html


 
function addVideo(name, length) {

  // Get Processing
  var pjs = Processing.getInstanceById('mysketch');

  // Call a method
  pjs.addVideo(name, length);

};

An Example using

node.js   express.js   socket.io   processing.js

Express.JS


 
// modules
var io     = require('socket.io').listen(app),
var spawn  = require('child_process').spawn,
 
            

 
// tail logs
var tailer = spawn('./loggrep2.sh');
 
            

 
// handle socket connection
io.sockets.on('connection', function(socket) {
   tailer.stdout.on('data', function (data){
      console.log(data.toString('utf8'));
      socket.emit('log', "["+data.toString('utf8')+"]");
   });
});
 

HTML


 



<canvas id="mysketch" data-processing-sources="videos.pde">
</canvas>
 

JavaScript


 
// Listen to the server.
var socket = io.connect("http://localhost:3003");
 
            

 
// Do something when we get data.
socket.on('log', function (data) {
  var req = JSON.parse(data);
  var tld = req['URL'];
  var len = req['Content-length'];
  addVideo(tld, len);
});
 
            

 
// Pass data to Processing.
function addVideo(name, length) {
  var pjs = Processing.getInstanceById('mysketch');
  pjs.addVideo(name, length);
};
 

Processing


// Draw some circles.

class Bubble {  
  int x, y;

  // ...

  void draw() { 
     ellipse(x, y, height, width); 
  }  
}
            

// Draw the rest of the $#%^ing owl.

void addVideo(String hostname, int length) {
   tld = (TLD) websites.get(hostname.toString());
   tld.points.add(
     new Bubble((20 + 20*tld.size()), tld.height)
   ); 
}

thanks

processing.js