P5 a Processing.js Alternative

P5_ParticleSystem

Decent Processing integration into my application “Dex” has eluded me for awhile due to limitations within the JavaFX WebView component.  This is for a number of reasons such as lack of WebGL support.

I was able to achieve a degree of Processing integration by using the Selenium browser automation tool to automate the launching and rendering of dynamic output to a cobrowser.  It works fine for the most part, but its far from optimal.

While I plan to continue supporting Processing.js, I took the time to evaluate and decided to integrate P5.

What is P5?

p5.js is a JavaScript library that starts with the original goal of Processing—to make coding accessible for artists, designers, educators, and beginners—and reinterprets this for today’s web.  p5.js is a new interpretation, not an emulation or port, and it is in active development.

Moreover, processing.org links directly to the page, so it would seem that the Processing community has opted to embrace P5 in spite of it’s small differences.

For me, P5 is nice because it brings the capabilities of a processing-like language to the Dex and dex.js platforms.  And this allows for greater accessibility to the artists, designers, educators and beginners that Processing and P5 target.

In many cases, by changing a couple of lines, Processing scripts can be converted to P5 scripts.  P5 also supports touch devices.

Hello Line

The first example within P5 is as simple as you could hope for.  It simply draws a line on the screen with the supplied coordinates.

function setup() {
  line(15, 25, 70, 90);
}

Saving Sketches to Javascript Variables

Sketches can be stored as javascript variables as seen here:

var sketch = function( p ) {
  var x = 100;
  var y = 100;
  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x,y,50,50);
  };
};

Then they may be rendered like this:

var myp5 = new p5(sketch);

More Examples

If you are interested in seeing what P5 can do, there are a large number of examples that can be found here.

Thats all for now, time to sleep!

Advertisements

About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s