Shared library for simple functions

p5.js Development
4

The “index.html” file can be written as short as this: :cowboy_hat_face:

<script src=https://cdn.JsDelivr.net/npm/p5></script>
<script src=https://po4599.GitHub.io/javascript/grid.js></script>
<script src=sketch.js></script>

Take another look at the short “index.html” above and you won’t spot any quotes or anything like it! :stuck_out_tongue:

How about instead coding your “grid.js” library in such a way that it seamlessly injects itself into the p5js library as part of its API? :open_mouth:

The best moment to draw your grid is right after the draw() callback returns. :paintbrush:

p5js got an undocumented method exclusive for 3rd-party libraries named registerMethod() which allows us to register our own callback functions: :see_no_evil:
https://github.com/processing/p5.js/blob/1.0.1/src/core/main.js#L593-L599

Which are later on called back on 4 specific moments: :face_with_monocle:
https://github.com/processing/p5.js/blob/1.0.1/src/core/main.js#L715-L716

For example, the init[] registered functions are called back when the sketch is still being initialized:
https://github.com/processing/p5.js/blob/1.0.1/src/core/main.js#L494-L499

While pre[] & post[] respectively happen just before & after draw() is called back:
https://github.com/processing/p5.js/blob/1.0.1/src/core/structure.js#L392-L399

So basically it’s just a matter of invoking registerMethod() to register grid() as a “post” category callback. :innocent:

In the version I’ve come up w/ your grid() function was rewritten in such a way it’s compatible to both global & instance mode sketches: :globe_with_meridians:

And while I was at it, I’ve also added 3 new methods (toggleGrid(), showGrid() & isGridVisible()) to p5js’ API so the grid display can be toggled on/off. :star_struck:

You can see an online demo along its full source on this link below: :link:

And that same demo sketch running now on full page: :running_man:
Register-Method-Post-Draw.Glitch.me

I’m also gonna leave all the 3 source code files posted here as well: :sunglasses:

“index.html”:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=grid.js></script>
<!-- <script defer src=https://Register-Method-Post-Draw.Glitch.me/grid.js></script> -->

<script defer src=sketch.js></script>
<!-- <script defer src=https://Register-Method-Post-Draw.Glitch.me/sketch.js></script> -->

“sketch.js”:

'use strict';

const FRAMES_TO_TOGGLE = 5,
      ALL_COLORS = 0x1000,
      RGB_COMPONENTS = 3;

function setup() {
  createCanvas(1200, 600).mousePressed(redraw);
  noLoop();
}

function draw() {
  background('#' + hex(~~random(ALL_COLORS), RGB_COMPONENTS));
  frameCount % FRAMES_TO_TOGGLE || print(toggleGrid().isGridVisible());
}

“grid.js”:

/**
 * Register Method Post Draw (v1.2.3)
 * GoToLoop (2019-Mar-05)
 *
 * Discourse.Processing.org/t/shared-library-for-simple-functions/18374/4
 * Glitch.com/~matter-js-bouncing-colorful-balls
 */

'use strict';

p5.prototype.registerMethod('init', function initGrid() {
  this._gridIsVisible = true;

  this._gridStyles = {
    'FILL': 'yellow', // 0o200
    'STROKE': 0o250,
    'BOLD': 1,
    'GRID': 10,
    'OFF_X': 2,
    'OFF_Y': 12,
    'TEXT': {
      'FILL': 0o350, // 0
      'SIZE': 11,
      'OFFSET_X': 60,
      'OFFSET_Y': 2,
      'FONT': 'Courier',
      'STYLE': this.BOLD,
      'HOR': this.LEFT,
      'VER': this.BASELINE
    }
  };
});

p5.prototype.registerMethod('post', function grid() {
  const ctx = this == window && p5.instance || this;
  if (!ctx._gridIsVisible | ctx._renderer.isP3D)  return;

  const { width: w, height: h, mouseX, mouseY, _gridStyles } = ctx,
        { FILL, STROKE, BOLD, GRID, OFF_X, OFF_Y, TEXT } = _gridStyles,
        stepX = w / GRID, stepY = h / GRID,
        loc = mouseX + ',' + mouseY;

  ctx.push();
  ctx.resetMatrix().fill(FILL).stroke(STROKE).strokeWeight(BOLD);

  ctx.textFont(TEXT.FONT).textStyle(TEXT.STYLE);
  ctx.textSize(TEXT.SIZE).textAlign(TEXT.HOR, TEXT.VER);

  for (var y = 0; y < h; y += stepY)  for (var x = 0; x < w; x += stepX) {
    ctx.line(x, 0, x, h).line(0, y, w, y);
    x || ctx.text(Math.round(y), OFF_X, y - OFF_X);
    y || ctx.text(Math.round(x), x + OFF_X, OFF_Y);
  }

  ctx.fill(TEXT.FILL).text(loc, w - TEXT.OFFSET_X, h - TEXT.OFFSET_Y);
  ctx.pop();
});

p5.prototype.toggleGrid = function () {
  this._gridIsVisible = !this._gridIsVisible;
  return this;
};

p5.prototype.showGrid = function (visible=true) {
  this._gridIsVisible = !!visible;
  return this;
};

p5.prototype.isGridVisible = function () {
  return this._gridIsVisible;
};
2 Likes