The “index.html” file can be written as short as this: ![:cowboy_hat_face: :cowboy_hat_face:](https://emoji.discourse-cdn.com/google_classic/cowboy_hat_face.png?v=12)
<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: :stuck_out_tongue:](https://emoji.discourse-cdn.com/google_classic/stuck_out_tongue.png?v=12)
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: :open_mouth:](https://emoji.discourse-cdn.com/google_classic/open_mouth.png?v=12)
The best moment to draw your grid is right after the draw() callback returns. ![:paintbrush: :paintbrush:](https://emoji.discourse-cdn.com/google_classic/paintbrush.png?v=12)
p5js got an undocumented method exclusive for 3rd-party libraries named registerMethod() which allows us to register our own callback functions: ![:see_no_evil: :see_no_evil:](https://emoji.discourse-cdn.com/google_classic/see_no_evil.png?v=12)
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: :face_with_monocle:](https://emoji.discourse-cdn.com/google_classic/face_with_monocle.png?v=12)
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: :innocent:](https://emoji.discourse-cdn.com/google_classic/innocent.png?v=12)
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: :globe_with_meridians:](https://emoji.discourse-cdn.com/google_classic/globe_with_meridians.png?v=12)
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: :star_struck:](https://emoji.discourse-cdn.com/google_classic/star_struck.png?v=12)
You can see an online demo along its full source on this link below: ![:link: :link:](https://emoji.discourse-cdn.com/google_classic/link.png?v=12)
And that same demo sketch running now on full page: ![:running_man: :running_man:](https://emoji.discourse-cdn.com/google_classic/running_man.png?v=12)
Register-Method-Post-Draw.Glitch.me
I’m also gonna leave all the 3 source code files posted here as well: ![:sunglasses: :sunglasses:](https://emoji.discourse-cdn.com/google_classic/sunglasses.png?v=12)
“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;
};