An object-oriented wrapper for P5

p5.js Development
3

If memory serves, most of those classes are from p5.sound.

I would like to wrap most of the drawing primitives so that you can treat elements on the canvas as if they are discrete objects instead of just pixels.

For example:

class  Square extends Node2D {
  constructor(data) {
    super(data);
  }

  translate(x, y) {
    this.data.translate.x = x;
    this.data.translate.y = y;
  }
  
  rotate(angle) {
    this.data.rotate = angle;
  }
  
  scale(factor) {
    this.data.scale = factor;
  }

  stroke(color) {
    this.data.stroke = color;
  }

  fill(color) {
    this.data.fill = color;
  }

  draw() {
    push();

    if (this.data.translate) {
      translate(this.data.translate.x, this.data.translate.y);
    }

    if (this.data.rotate) {
      rotate(this.data.rotate);
    }

    if (this.data.scale) {
      scale(this.data.scale);
    }

    if (this.data.fill) {
      fill(this.data.fill);
    }

    if (this.data.stroke) {
      stroke(this.data.stroke);
    }
    
    if (this.data.strokeWeight) {
      strokeWeight(this.data.strokeWeight);
    }

    square(this.data.x, this.data.y, this.data.size);
    
    pop();
  }
}