Processing.js Experiment

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try.

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try, Processingjs is a port of the Processing programming language,and it lets You program images, interactions and animations for the web without using Flash or Java applets, it uses JavaScript to draw shapes and manipulate images on the HTML5 canvas element (You’ll need a browser that supports it …cough..IE…cough…ISSUE 15), so if you like building data visualizations, creating user-interfaces and developing web-based games Processing.js might be your thing.
So I decided to do a simple test and boy it was really simple to implement existing Processing sketches.
Here’s a little 3 steps explanation on how I did that experiment;

Step Number 1.-

First things first in order to play with Processing.js you’ll need to download and include it inside the tag of your html file.

?View Code HTML4STRICT
1
 <script src="script/js/processing-js/processing-0.9.6.min.js" type="text/javascript"><!--mce:0--></script>

Step Number 2.-

Now on the body tag You’ll need to open up a new canvas tag, and that’s where the processing.js will be running.

?View Code HTML4STRICT
1
You need a <a href="http://www.google.com/chrome" target="_blank">modern browser</a> to view this.

So what’s going on here ? You need to tell the canvas the location of the sketch that you’ll be running (in this case the worms.pjs file), in the datasrc attribute and a explaining text in case the user’s browser dont support HTML5 yet other way all they’ll see is a blank screen.

Step Number 3.-

The actual Processing.js that will display those playfull worms on Your HTML, if you’ve used Processing before you’ll notice that there’s actually nothing diffrent form what You do in a regular Processing sketch and if you copy and paste this in the Processing enviroment it will run as any other sketch.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
Mover[] movers = new Mover[30];
 
void setup() {
  size(viewportwidth,viewportheight);
  smooth();
  background(0);
  // Initializing all the elements of the array
  for (int i = 0; i < movers.length; i++) {
    movers[i] = new Mover(); 
  }
}
 
void draw() {
  noStroke();
  fill(10,0);
  rect(0,0,width,height);
 
  // Calling functions of all of the objects in the array.
  for (int i = 0; i < movers.length; i++) {
    movers[i].update();
    movers[i].checkEdges();
    movers[i].display(); 
  }
}
 
class Mover {
 
  PVector location;
  PVector velocity;
  PVector acceleration;
  float topspeed;
 
  Mover() {
    location = new PVector(random(width),random(height));
    velocity = new PVector(0,0);
    topspeed = 4;
  }
 
  void update() {
 
    // Our algorithm for calculating acceleration:
    PVector mouse = new PVector(mouseX,mouseY);
    PVector dir = PVector.sub(mouse,location);  // Find vector pointing towards mouse
    dir.normalize();     // Normalize
    dir.mult(0.5);       // Scale 
    acceleration = dir;  // Set to acceleration
 
    // Motion 101!  Velocity changes by acceleration.  Location changes by velocity.
    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }
 
  void display() {
    stroke(0);
    fill(175);
    ellipse(location.x,location.y,16,16);
  }
 
  void checkEdges() {
 
    if (location.x > width) {
      location.x = 0;
    } else if (location.x < 0) {
      location.x = width;
    }
 
    if (location.y > height) {
      location.y = 0;
    }  else if (location.y < 0) {
      location.y = height;
    }
 
  }
 
}

So that’s it You may open your html file in the browser and will see a nice animated wormy things chasing your mouse across the screen.

Hope this little explaings helps You get started with Processing.js, I’ll be doing a little more of experimentation with it myself and tell You how it goes.

Until next time See You.

Author: Dave Gamez

Digital Craftsman from México and have more than 14 years of experience both in design and development in the digital field. I currently work in web, desktop, mobile and illustration projects alike and spend my time between being Technology Director at Team-O a Digital Studio I co-founded with Cecy Meade and doing consultancy work, when time allows it I like to experiment and tinker with code, animation and illustration.