Processing.js

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sun May 24 2020 16:53:23 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Processing.js
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 32f04662e49c0eb9387a
Keywords: 

My Notes
--------
I've briefly looked at Processing before.
In this workbook I'll explore how to use Processing with Xholon.
I've downloaded processing.min.js v1.4.8
I'm replicating some Processing examples[2] in this workbook's Xholon app.

May 24, 2020
------------
- I upgraded to version 1.6.6 from ref 3
 - this was the very last release, on December 4, 2020
 - this workbook still works
- p5js replaces processing.js
 - the two are not directly related

References
----------
(1) http://processingjs.org/
    "a port of the Processing Visualization Language"
    "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. It's not magic, but almost."

(2) http://processingjs.org/articles/jsQuickStart.html
    there are many possible ways that I could combine Xholon and Processing

(3) https://github.com/processing-js/processing-js
    A port of the Processing visualization language to JavaScript. http://processingjs.org/
    This project has been archived
    With the development of p5js and the API advances in Processing itself, as well as Processing.js itself having been in maintenance mode for quite a few years now, this project has been archived as of December 2018.

]]></Notes>  

<_-.XholonClass>
  <PhysicalSystem/>
  <Block/>
  <Brick/>
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<PhysicalSystem>
  <Block><Attribute_String roleName="Processing code">
// Processing code
void setup() {
  size(200, 200);
  background(100);
  stroke(255);
  ellipse(50, 50, 25, 25);
  println("hello web!");
  // Processing can access the Xholon JavaScript API
  println(xh.root().first().first());
}
  </Attribute_String></Block>
  
  <!-- I'm keeping the 2 Brick nodes to demonstrate that Xholon and Processing can coexist -->
  <Brick multiplicity="2"/>
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, canvas, processingInstance, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  $doc.getElementById("xhcanvas").innerHTML = '<canvas id="canvas1"' + '></canvas>';
  canvas = $doc.getElementById("canvas1");
  $wnd.xh.param("TimeStepInterval", "1000");
  $wnd.xh.require("processing.min");
},
act: function() {
  switch ($wnd.xh.param("TimeStep")) {
  
  case "1":
    // see ref [2] "Pre-compiling Processing code to JavaScript"
    var processingCode = me.first().text();
    var jsCode = $wnd.Processing.compile(processingCode).sourceCode;
    me.println(jsCode);
    new $wnd.Processing(canvas, processingCode);
    break;
  
  case "2":
    // attaching the sketchProc function to the canvas
    processingInstance = new $wnd.Processing(canvas, this.sketchProc);
    break;
  
  default: break;
  }
},

// this code is from ref [2] "Writing JavaScript-only Processing.js code"
sketchProc: function(processing) {
  // Override draw function, by default it will be called 60 times per second
  processing.draw = function() {
    // determine center and max clock arm length
    var centerX = processing.width / 2, centerY = processing.height / 2;
    var maxArmLength = Math.min(centerX, centerY);

    function drawArm(position, lengthScale, weight) {
      processing.strokeWeight(weight);
      processing.line(centerX, centerY,
        centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
        centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
    }

    // erase background
    processing.background(224);

    var now = new Date();

    // Moving hours arm by small increments
    var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
    drawArm(hoursPosition, 0.5, 5);

    // Moving minutes arm by small increments
    var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
    drawArm(minutesPosition, 0.80, 3);

    // Moving hour arm by second increments
    var secondsPosition = now.getSeconds() / 60;
    drawArm(secondsPosition, 0.90, 1);
  };
}

}
]]></Blockbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  $wnd.xh.Brickbehavior = function Brickbehavior() {}

  $wnd.xh.Brickbehavior.prototype.postConfigure = function() {
    this.brick = this.cnode.parent();
    this.iam = " red brick";
  };

  $wnd.xh.Brickbehavior.prototype.act = function() {
    this.brick.println("I am a" + this.iam);
  };
]]></Brickbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>