Processing.js.. “Something Completely Different”

Reading Time: 3 minutes

Perhaps by reading this you may be wondering what is Processing.js?
Well, Processing.js is a JavaScript port of a visualization-oriented language based on Java with the same name Processing (or p5 for short) made by John Resig, the creator of jQuery.

First, a little history about p5.

It was developed by Ben Fry and Casey Reas and it was intended to help electronic arts                                                              and visual design communities learn the basis of computer programming in a visual context.

And... what about it?

Processing.js is the little sister project of the popular visual programming language, but designed for the web.
Processing.js helps you to make your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You only write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.

Originally developed by Ben Fry and Casey Reas, this started as an open source programming language based on Java to help the electronic arts and visual design communities learn the basics of computer programming in a visual context.Processing.js takes this to the next level, allowing Processing code to be run to any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and even the upcoming Internet Explorer 9. Processing.js brings the best of visual programming to the web, both for Processing and web developers.

Ok, so when or where could I use it?

It's simple, for example: when you need to implement some animation or visual interaction without using Adobe's Flash, or when you want to make new interfaces (like using Arduino) or maybe if you want to put multimedia. That's why I like this.

Well, first of all you'll need the Processing.js (which could be downloaded here), and include it on your page:

<script src="processing-1.0.0.min.js"></script>

Then, wherever you want to use it just put it inside a canvas element (note: of course it has to be HTML5 canvas, which I will speak on my next post).

<canvas data-processing-sources="MySuperDuperInteractionFile.pjs."></canvas>

Load your web page, and it will parse, translate, and run your sketch in the browser... Tadaaaa! =)

In my experience, I've always hated those basic HELLO WORLD examples so here is a little example.
I won't explain all the Processing language, this will just show you a little bouncing ball, nothing great                               because out there you can find lots of more complex examples.

  float frame = 0;         // we start at frame 0
  float framerate = 24;    // our "sketch" will have a framerate of 24 frames per second.

  int ball_x;              // ball x coordinate
  int ball_y;              // ball y coordinate
  int ball_radius = 20;    // ball radius

  void setup() {
    size(200,200);         // set draw area size
    frameRate(framerate);  // set animation framerate
    ball_x = width/2;      // set the initial ball coordinates
    ball_y = ball_radius;  // set the initial ball coordinates
    stroke(#003300);       // set the default shape outline colour
    fill(#0000FF);         // set the default shape fill colour

  void draw() {
    frame++;                       // note that we're one frame further than last time
    float bounce_height = height/2 * abs(sin(PI*frame/framerate));  // compute the ball height for this frame
    float ball_height = height - (bounce_height+ball_radius);       // because the top of the screen is 0, and the bottom is "height",
    background(#FFFFEE);           // clear the drawing area
    ball_y = (int) (ball_height);  // set the new ball y position
    ellipse(ball_x,ball_y,ball_radius,ball_radius);                 // draw the ball

What can we see here?

If you noticed, we have three main sections, the global variables (nothing to say) the setup method which sets the configuration that will be used in our sketch and the draw method which well...will draw our sketch.

Wait a minute, Sketch?, yeap... sketches are the main way to use this program. If you remember Adobe Flash you'll easy understand a sketch because it works similar, they are like small scenes which together make a movie, and just as happens in it, you can use several sketches to make more complex things.

That's all folks! (for now).
Hope you have enjoyed this small change, as someone said before: Ruby is not the first nor will be the last programming language, it is always good to have alternatives.

Know more about us!

You May Also Like
Read More

Scheduled Notifications

Reading Time: 5 minutes Have you ever wondered how apps like Tinder, Facebook, Reddit and many more send annoying recurrent notifications to…

React coding tips

Reading Time: 3 minutes React coding tips I started working with React a couple of months ago. So far it has been…
Read More

ReactJS: Loops in JSX

Reading Time: 4 minutes Why React? Nowadays developers know that Javascript's world is constantly changing. Every day a new library, framework or…