Using Processing.js to draw in your browser

— Posted inCoding — 1 min read

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>
<html>
  <head>
    http://processing-1.4.8.min.js
  </head>
  <body>
    <canvas data-processing-sources="hello.pde"></canvas>
  </body>
</html>

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.

hello

I will continue exploring the Processing.js library.

Comment