Using Processing.js to draw in your browser

Today I had a look at the JavaScript library Processing.js. You can use this library to draw in your browser using the Processing language. For example, you create the following simple HTML page and save it as processing.htm.

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

Then when you create a file hello.pde in the same directory as your HTML page with the following content.

size(400, 400);
rect(80, 70, 60, 240);
rect(280, 70, 60, 240);
rect(140, 170, 140, 40);

If you now load your HTML page in your browser. It should display a simple graphic. For me, this did not work in Chrome because the hello.pde file is loaded with XMLHttpRequest and creates a same-origin policy violation. But it worked in Firefox.


I will continue exploring the Processing.js library.


Leave a Reply

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

You are commenting using your 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