a port of the Processing Visualization Language

/* @pjs */ directives

A single directive:
/* @pjs preload="image1.jpg"; */
Multiple directives on a single line:
/* @pjs preload="image1.jpg,image2.jpg"; crisp="true"; */
Multiple directives over multiple lines:
/* @pjs preload="image1.jpg,image2.jpg"; crisp="true"; */ Note: You can only have one directives block in a sketch, which should be the first line of your sketch. If you wish to use multiple directives, see the examples.

As Processing.js offers a tighter integration between Processing sketches and webpages than the traditional applet approach, certain functions that are normally regulated by Processing are left to be handled by the browser. This approach means that certain behaviour that is expected from a sketch may not work without additional "outside the sketch" instructions, for which /* @pjs */ directives must be used. There are two types of directives: directives that tell Processing.js to buffer data that must be available to a sketch when it is run (preload, font), and directives that tell Processing.js how to behave once the sketch is running (crisp, globalKeyEvents, pauseOnBlur).

These directives are in block comment syntax so that they do not interfere with a sketch when it runs as native Processing, but if you do not wish to pollute your source with @pjs directives, you can also store your directives in a separate file, and only call this file on your page:


/* @pjs crisp="true"; pauseOnBlur="true"; */


<canvas id="sketchcanvas" data-processing-sources="directives.pde mysketch.pde"></canvas>

/* @pjs directive="value"; */ 

Multiple directives can be on one line or on multiple lines. Both ways require semi-colons between directives.

/* @pjs directive_1="value"; directive_2="value"; ... */

/* @pjs directive_1="value";

In Javascript-only Processing.js code you cannot use these directives. You must change the options directly on the Processing.Sketch object. See the examples below for changing these properties on variables bound to a Processing or Processing.Sketch instance:

var mySketch = new Processing.Sketch(
  function(p) { p.draw = function(){...}; ... }
mySketch.options.crispLines = true;
var myProcessing = new Processing("myCanvas", mySketch);

var pi = new Processing("myCanvas");
pi.externals.sketch.options.crispLines = true;

NOTE: all @pjs directives, including the "@pjs" instruction, are case-sensitive.
Usage Web & Application, Processing.js compatibility
Related font

This reference is licensed under the CC BY-NC-SA 2.0 license:

Creative Commons License
Fork me on GitHub