P5.js: TypeScript p5 inheritance

[vanpana]

Nature of issue?

• [x] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [x] Other (specify if possible)

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: latest
• Web browser and version: Chrome 71.0.3578.98
• Operating System: macOS Mojave
• Steps to reproduce this:
  I want to extend the p5 library in order to have error text on various locations on the screen. Right now, my class looks like:

import * as p5 from 'p5';

export class CustomP5 extends p5 {
  ...
  constructor(sketch, htmlElement) {
    super(sketch, htmlElement);

    // Set tooltip error variable
    this.resetTooltipError();
  }

  setSetup(setupFunction) {
    super.setup = () => {
      setupFunction();
      this.setupAdditional();
    }
  }

  setDraw(drawFunction) {
    super.draw = () => {
      drawFunction();
      this.drawAdditional();
    };
  }

  showTooltipError() {
    ...
  }

Everything is working fine, except some properties. For example, if I access super.height I'll get 0, while if I access this.height I'll get the actual height. But, when accessing this.height I get an error saying that height isn't defined in CustomP5, which is right, but at the same time confusing.

Is there a reason why super.height, super.mouseX, super.mouseY don't work, while super.draw or super.mousePressed are working correctly?

PS: I'm quite new to js and ts, so be patient if I'm wrong, please.

[lmccart]

Hi @vanpana the typescript p5 definitions are maintained by another user, you can log the issue here: https://github.com/p5-types/p5.ts

[vanpana]

Hello! Thanks for the quick answer! I have asked and I was told to find a way to extend p5 using ES6 classes. Is there any wiki related to this?

[lmccart]

maybe this helps? https://github.com/processing/p5.js/blob/master/developer_docs/creating_libraries.md

[kenny1983]

Hey @vanpana! Did you manage to get anywhere with this? I'm also looking for a way to extend a p5 instance using ES6 syntax, but haven't gotten very far after an hour of searching :/ Any guidance that you could provide would be hugely appreciated! ;-)

[outofambit]

i think @brysonian might have a hack for something like this...

[brysonian]

Yeah i've had luck with this. I'll pull out an example tonight, but in the meantime you can look at this: https://github.com/uclaconditional/identity-sketch/blob/dev/src/Sketch.js (which also has a decent p5 parcel setup)

Two key things, 1) you need @babel/plugin-syntax-class-properties and @babel/plugin-proposal-class-properties if you want cleaner syntax, and 2) you can pass a no-op to super() which will cause the sketch to use the draw setup etc that you define in your class so something like:

class Sketch extends p5 {
  constructor() {
    super(() => {});
  }

  setup = () => {
   // do stuff
    const canvas = this.createCanvas(this.windowWidth, this.windowHeight);
  }

  draw = () => {
    // call sketch methods on this
    this.background(255);

    // other stuff
   }
}
const sketch = new Sketch();

Incidentally i've been playing with some ideas on other interfaces to p5 for projects using modern js one example that doesn't use classes is here: https://gist.github.com/brysonian/98bc61560e4f29ead093507ff4589fd5 i'd love some feedback on how folks are using p5 with other tools, frameworks, and build systems.

[brysonian]

Ok, here is a repo that is a more barebones example https://github.com/uclaconditional/p5-class-parcel-example

[lmccart]

this is great thanks @brysonian!

[kenny1983]

this is great thanks @brysonian!

Yes thank you very much @brysonian! Works a treat! 😄