Best way to run processing sketch in webpage

Processing Project Guidance
15

Given Pjs is a JS library inasmuch as p5js is, we can write sketches using JS syntax (or any other language transpilable to JS) for the Pjs library too! :triumph:

The catch is, that a small part of Processingā€™s API gives the same name for both a system variable and a function. :sweat:

For example, the name frameRate in Processing can either refer to a variable or a function: :astonished:

  1. Variable frameRate: http://ProcessingJS.org/reference/frameRate/
  2. Function frameRate(): http://ProcessingJS.org/reference/frameRate_/

But alike Java, JS doesnā€™t offer diff. namespaces for each category.
Functions, classes, objects and any type of data are simply all stored in variables. :expressionless:
Therefore, the Pjs library gotta change the name of either the system variable or the function to something else.

Also, some Processingā€™s function names which match Javaā€™s keywords, like int or float, are also renamed, both in Processing & Pjs:

  1. Function int(): http://ProcessingJS.org/reference/int_/
  2. Keyword int: http://ProcessingJS.org/reference/int/

For example, if we copy & paste the sketch example below:

int a = int(PI);
frameRate(30.7);
println(frameRate);

In http://ProcessingJS.org/tools/processing-helper.html
And click at ā€œConvert to JSā€ button; itā€™s gonna output the following JS syntax:

// this code was autogenerated from PJS
(function($p) {

    var a = $p.parseInt($p.PI);
    $p.frameRate(30.7);
    $p.println($p.__frameRate);
})

Notice that function int() became parseInt(), function frameRate() stayed the same, but its corresponding system variable became __frameRate! :dizzy_face:

If we take those small quirks into account, itā€™s perfectly possible to write sketches in JS syntax targeting Pjs in place of p5js. :muscle:

Although weā€™d need to write our sketches for Pjs very similarly weā€™d write to p5js using its ā€œInstance Modeā€ approach: :roll_eyes:

For further details, read from these links: :smirk_cat:

  1. Can i import my stuff into wallpaper engine? - Coding Questions - Processing Foundation
  2. http://ProcessingJS.org/articles/jsQuickStart.html
2 Likes