Shared library for simple functions

Hi, I’m trying to create a simple library of functions that can be used by elementary school students to do some coding. The first function is one that draws a grid on the canvas with simple coordinate labels. These students are truly beginners.

Each student has their own login. No, they don’t use github. No they can’t be expected to faithfully type in 8 lines of grid function code without errors. They can likely type:
add_learning_grid();
which will overlay their canvas with a grid scaled to their actual size.

How do I share this library function into their accounts so they can just use it?

Thanks in advance,
-Peter

1 Like

I would create a sketch, save it and make a new tab to put all the functions.
Then, I’d share the sketch folder with every student.

The only possible problem with this is that your students could break the functions, as you cannot hide a tab while using Processing’s IDE.

1 Like

The challenge I have is that I’m teaching a classroom of 7-11 year olds in our elementary school. Whatever setup is created has to be easy-automatic. Sharing sketches at this age is beyond their ability to do without errors.

In exploring alternatives, I decided a public github is easiest after all. Here’s the goal:

  1. Create a grid on the canvas so that a student can visualize coordinates.
  2. Write numbers on the top and left side of the grid, next to the grid lines.
  3. As the mouse moves over, display somewhere the X,Y coordinate of the location of the mouse in canvas space.

I’ve done 1 & 2, and loaded it in github here:
https://po4599.github.io/javascript/grid.js
I will add #3 shortly, but have to test extensively to make sure the mouse action doesn’t break student’s code.

This can then be added by inserting
<script src=“https://po4599.github.io/javascript/grid.js”></script>
into index.html.

But even this edit of index.html is beyond them. Think issues with single quote vs. double quote, or colon vs. semi-colon. Is that a dot or a comma?

Ideally I’d like to share a library with all of my students, so the just need to add
grid();
into their code to see a grid.

Ideas?
-Peter

1 Like

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

Wow very good reply here.

Now, what is your goal and the environment exactly?

When they just need a grid and do some typing there (and don’t need to program as such) and your school environment allows you to install an exe file on each computer: just write a processing sketch with grid and text input, compile it to exe and copy it on each computer. Then they run this instead of processing.

Problem solved.

1 Like

GoToLoop… fantastic reply. Thank you! +1 I will dig into the details and test on the various platforms.

Chrisir, we are teaching Javascript to Elementary School students. They all use Chromebooks, iPads, or similar. A 100% browser based solution is a requirement. In addition, the students do not bring their chromebooks home, but instead have home computers that will login into the cloud environment.

The p5.js platform suits the needs very well. But at this age, additional tools such as a grid with mouse location aids in their visualization of drawing actions. I’m adding a color picker as well, which will give them an each way to set colors of objects created.

1 Like

@podryna – another possibility, depending on your needs, is to use the built-in “duplicate” functionality of the p5.js web editor.

For any given exercise / assignment, create a template sketch that includes your library code in a separate file. Then have each student create a copy of it to begin editing. They will be able to use any functions in your library because they are pre-installed in the template sketch.

2 Likes

Does the duplicate operation allow duplication across accounts? Each student has then own sandbox, hence their own account/login.
-Peter

By the p5.js web editor I meant:

https://editor.p5js.org/

When you say “sandbox” do you mean that they are each running their own full web editor server locally on their Chromebook or iPad? I’m not sure what “sandbox” means for a web hosted solution.

Yes, I’m using editor.p5js.org The term sandbox is used in its normal form: an area where work can be done independent or other sandboxes (in this case other logins). Sandboxes are often hosted in the cloud, assuming the cloud server handles independent logins. I’m not sure you could serve p5js locally on a Chromebook. You’d need some sort of custom Chrome plugin, and a cloud server to provide database services.

So let me ask the question a little more succinctly: Can I duplicate a sketch across multiple logins in editor.p5js.org? I know I can duplicate a sketch in my own (teacher) login. But that doesn’t get it to the student’s login.
-Peter

1 Like

Sorry I misunderstood you. The “duplicate” button is a “pull” – it works like “fork” on GitHub. So the model is:

  1. teacher creates template
  2. students log in to web editor
  3. teacher gives template link to students (cut-paste a normal URL, you can also “Share”)
  4. students open a copy of the original template in a browser tab
    (if they modify it at this point, that doesn’t modify the original – it isn’t a shared document like Google Docs. Their changes will be lost if the tab closes, although they can optionally Save)
  5. students “duplicate” – this creates a full copy of the template sketch under their own account.
  6. students modify their duplicate and save their changes.

The web editor is also like GitHub in that it doesn’t have a permissions model for forking “duplication” – anything that you can see, you can duplicate.

1 Like

Hey, that’s very clever. Never thought of that. I’ll do some testing. Thanks!

1 Like

Great – if you have time, let us know how it works for you!