Processing visual programming language

Ken Webb 2011-01-23T21:11:05Z

Processing is "an open source programming language and environment for people who want to create images, animations, and interactions".

Processing.js is "the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest".

This is a sample Processing program, taken from the Processing.js site, and wrapped as a Xholon BrowserJS script. The script can be pasted into a running Xholon app such as the Bestiary applet.

<script implName="lang:BrowserJS:inline:"><![CDATA[
var myCanvas = "" +
"<canvas id='processing-canvas' width='200' height='200'></canvas>" +
"<script type='application/processing' target='processing-canvas'>" +
"void setup()" +
"{" +
"  size(200, 200);" +
"  stroke(255);" +
"  frameRate(30);" +
"}" +
"float y = 100;" +
"void draw()" +
"{" +
"  background(0);" +
"  y = y - 1;" +
"  if (y < 0) { y = height; }" +
"  line(0, y, width, y);" +
"}" +
"</script>";
$('div#divOne').html(myCanvas);
loadProcessingScripts();
]]></script>

Here's another example, adapted from the Processing.js site. It uses the backslash character \ to combine multiple lines into a single JavaScript string.

<script implName="lang:BrowserJS:inline:"><![CDATA[
var myCanvas = "\
<canvas id='processing-canvas' width='200' height='200'></canvas>\
<script type='application/processing' target='processing-canvas'>\
void setup()\
{\
  size(480, 480);\
  smooth();\
}\
void draw()\
{\
  if (mousePressed) {stroke(255, 0, 0, 63);; fill(255, 0, 0, 63);}\
  else {stroke(255); fill(255)}\
  ellipse(mouseX, mouseY, 20, 20);\
}\
</script>";
$('div#divOne').html(myCanvas);
loadProcessingScripts();
]]></script>

The following script can be used with the Bestiary app. It shows that Processing.js code can directly access Xholon's Java classes. This is VERY slow, but it works.

<script implName="lang:BrowserJS:inline:"><![CDATA[
var myCanvas = "\
<canvas id='processing-canvas'></canvas>\
<script type='application/processing' target='processing-canvas'>\
Object gridOwner = null;\
Object upperLeft = null;\
int cellSize = 5;\
int nRows = 0;\
int nCols = 0;\
void setup()\
{\
  size(500, 500);\
  noLoop();\
  background(0, 126, 0);\
  noStroke();\
  smooth();\
  nRows = height / cellSize;\
  nCols = width / cellSize;\
  gridOwner = applicationKey.getRoot().getFirstChild().getNextSibling();\
  upperLeft = gridOwner.getFirstChild().getFirstChild();\
  fill(0, 255, 0);\
  text(contextNodeKey.getParentNode(), 30, 60);\
  drawGrid();\
}\
void draw()\
{\
  drawGrid();\
}\
void mousePressed()\
{\
  redraw();\
}\
void drawGrid() {\
  fill(0, 126, 0);\
  rect(0, 0, 499, 499);\
  fill(255, 0, 0);\
  Object currentCell = upperLeft;\
  Object startOfRow = upperLeft;\
  for (int i = 0; i < nRows; i++) {\
    for (int j = 0; j < nCols; j++) {\
      if (currentCell.hasChildNodes()) {\
        rect(j*cellSize, i*cellSize, cellSize, cellSize);\
      }\
      currentCell = currentCell.port[1];\
    }\
    startOfRow = startOfRow.port[2];\
    currentCell = startOfRow;\
  }\
}\
</script>";
$('div#divOne').html(myCanvas);
loadProcessingScripts();
]]></script>

return to main page