How i extends class in p5.js?


#1

Hi, i try to extends class in p5.js sketch, but not works…

How do you make this?

Any simple example please?


#2

can you give us an example of what you’re trying to do to work off of?


#3

JavaScript got a prototype inheritance system, in which we make available all properties to be extended by annexing them all to a constructor function’s property object {} called prototype: :card_file_box:

For example If we wanna extend the class p5 (classes are constructor functions btW) w/ a new method called square(), we can simply annex it to p5.prototype{} object, like this: :+1:

p5.prototype.square = function (x, y, size) {
  return this.rect(x, y, size, size);
};

And a more complex example, but now extending the class p5.Image instead, w/ a new method called resizeNN(): :ok_hand:


Why does no exists method in p5.js?
#4

Thanks for this info, i looking for use “class” and “extends” on p5.js

It´s possible?

i ´m a noob in javaScript.


#5

Yes, it is possible. But in order to use an extended p5 subclass, you’re gonna need to write your code using the dreadful “instance mode” approach: :roll_eyes:

“index.html”:

<script defer src=https://CDN.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

“sketch.js”:

/**
 * Class p5 Extended (v1.0.1)
 * GoToLoop (2018-Jun-13)
 * https://Discourse.Processing.org/t/how-i-extends-class-in-p5-js/894/5
 */

"use strict";

class p5Plus extends p5 {
  square(x, y, size) {
    return this.rect(x, y, size, size);
  }
}

function mySketch(p) {
  const RATIO = .75, BOLD = 3.5;

  p.setup = function () {
    p.createCanvas(p.displayWidth * RATIO, p.displayHeight * RATIO);
    p.rectMode(p.CENTER).colorMode(p.RGB).noLoop();
    p.fill('yellow').stroke('red').strokeWeight(BOLD);
  };

  p.draw = function () {
    p.background(0).square(p.width >> 1, p.height >> 1, p.width >> 1);
  };
}

new p5Plus(mySketch);

#6

Thanks for the info!!


#7

Thxs for the demo @GoToLoop. I have some questions on my own.

  1. This concept of global vs. instance more is common in js? With instance mode, you create your own scope, right? That is what allows to work with several instances. If you get to write js from scratch, it is enough to define a class to be able to have this instance mode feature?

  2. I have to ask… class is not a closure, or is it?

  3. Lastly, how does prototype gets inherit?

I will have to write my own little demo to see these concepts in action.

Kf


#9

For my part I use a straight ECMA6 syntax for this…

class Foo{
  constructor(){
    //...
  }
  someMethod(){//...}
}

class Bar extends Foo{
  //...
}

And so on. To me this approach is easier, since JS isn’t really my native language. I was wondering if those of you who know a lot more Javascript than I do could tell me if there are any significant disadvantages to doing it this way. I only see it rarely in other people’s code.


#10

I tried this in the processing IDE in p5.js mode and it does not work.
and some other things that work like the reserved word “const”.

I do not understand why this happens to me.


#11

AFAIK, PDE’s p5js Mode doesn’t allow the instance mode approach I guess. :grimacing:

The easiest way to run my demo sketches is by having any Firefox-based browser installed in your OS. :star_struck:

I recommend Firefox Developer Edition, Waterfox & Palemoon: :sunglasses:



http://www.Palemoon.org/

  • Create some folder and then place both files “index.html” & “sketch.js” there.
  • Finally open any Firefox-based browser and drag & drop the “index.html” file there.
  • It should be run alright now! :cowboy_hat_face:

P.S.: For Chromium-based browsers, read on this site below: :smile_cat:
http://Chrome-allow-file-access-from-file.com/


P5js keywords/functions Syntax highlighting
Drag and drop local files into p5 skecthes
#12

On the contrary; by using the keyword class, the JS language automatically annexes all the methods in the constructor()'s prototype{} object the most correct way. :muscle:

There are many ES5 folks out there who create the methods over & over inside the construtor function itself, rather than its prototype{}; which isn’t RAM savvy btW! :face_with_hand_over_mouth:


#13

This is a Processing concept thingy! Our “Global Mode” approach is strange to JS world! :scream:

Basically, it auto instantiates, then dumps & binds the whole p5 class to the global scope, which allows us to access them all w/o using the dot . operator. :clown_face:

Yup! And that’s the standard way most apps do in the JS world! :smirk:

Correct. However, we still can have multiple p5 “global mode” instances by placing them all inside separate <iframe> tags, like I did below: :money_mouth_face:

Do you mean my “Class p5 Extended” hack example? :thinking:

B/c we have to pass our function sketch as its argument: new p5Plus(mySketch);
That sketch needs to be using the “instance mode” approach. :no_mouth:


#14
  • Closures are outer variables & parameters which are accessed & remembered by inner functions, methods and classes (b/c a class is a constructor function).
  • In my “Class p5 Extended” sketch, the parameter p is a closure for methods setup() & draw().
  • And consts RATIO & BOLD are closures to method setup().
  • Since draw() doesn’t access either consts RATIO & BOLD inside it, they don’t become its closures, saving precious RAM!
  • Notice though that everything in the global scope is a potential closure to everything!
  • Therefore, if p5, p5Plus and mySketch() would be accessed within by any of our functions, they’d become closures to them too!

#15

Along w/ closures and how the keyword this works under JS, the innards of the prototype{} inheritance chain are the hardest parts of the JS language! :scream:

As I had already posted in this thread at my 1st reply, we can read a fully tech explanation about it here: :face_with_monocle:

But I’m gonna attempt a shorter explanation below… :flushed:

  • All JS objects got a “hidden” accessor property called __proto__:
  • When we use the operator new to create an object, it automatically assigns its __proto__ property the reference of its constructor’s prototype{} object:
  • Then, when we try to access some property of that object via the operator . dot or brackets [], if that property doesn’t exist in that object, the JS engine follows its __proto__ instead.
  • As long as that __proto__ correctly points out to its original constructor’s prototype{} object, it should find the “missing” property there instead.
  • Most properties in the prototype{} object are methods. Although it might have non-method types too.