Inheritance example does not actually implement inheritance using the extends keyword

[NSDesign]

Hi there,

Unlike the Processing.org inheritance example the P5.js doesn't actually implement class inheritance. Instead two separate classes are defined, each effectively defining their own separate spin methods. Whereas, the processing.org example, both the classes SpinArms and SpinSpots extend the Spin class respectively.

Cheers

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

@NSDesign If you'd like to fix this let me know here and I'll assign the issue to you.

[ShenpaiSharma]

Hi, @limzykenneth. If you don't mind, I would like to work on this issue as Inheritence is actually not using any inheritance property. It's, as said, just using two classes to define its movement.

[NSDesign]

Thanks for the replay, Yes I thin it should be fixed, as it's confusing for new users.

…

On Mon, Jan 18, 2021 at 1:35 AM Shubham Kumar ***@***.***> wrote: Hi, @limzykenneth <https://github.com/limzykenneth>. If you don't mind, I would like to work on this issue as Inheritence <https://p5js.org/examples/objects-inheritance.html> is actually not using any inheritance property. It's, as said, just using two classes to define its movement. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/processing/p5.js-website/issues/921#issuecomment-761822361>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBJDBH3V2O67FKXMCLX5ALS2LYSLANCNFSM4V5Z7L4A> .

-- Nicholas Sullivan Design

[ShenpaiSharma]

Yes, it is quite confusing that's why I think the given code in Inheritence should be replaced with given code as I have also checked this, and it was running all fine:

let spots, arm;

function setup() {
  createCanvas(640, 360);
  arm = new SpinArm(width/2, height/2, 0.01);
  spots = new SpinSpots(width/2, height/2, -0.02, 90.0);
}

function draw() {
  background(204);
  arm.update();
  arm.display();
  spots.update();
  spots.display();
}

class Spin {
  constructor(x,y,s) {
    this.x = x;
    this.y = y;
    this.speed = s;
    this.angle = 0.0;
  }
  
  update() {
    this.angle += this.speed;
  }
}

class SpinArm extends Spin {
  constructor(x, y, s) {
    super(x,y,s)
  }

  display() {
    strokeWeight(1);
    stroke(0);
    push();
    translate(this.x, this.y);
    this.angle += this.speed;
    rotate(this.angle);
    line(0, 0, 165, 0);
    pop();
  }
}

class SpinSpots extends Spin {
  constructor(x, y, s, d) {
    super(x,y,s)
    this.dim = d;
  }

  display() {
    noStroke();
    push();
    translate(this.x, this.y);
    this.angle += this.speed;
    rotate(this.angle);
    ellipse(-this.dim/2, 0, this.dim, this.dim);
    ellipse(this.dim/2, 0, this.dim, this.dim);
    pop();
  }
}

What do you think? @NSDesign @limzykenneth

[limzykenneth]

@ShenpaiSharma You can go ahead with a fix, I'll assign the issue to you.