Angular object models

p5.js Libraries
1

I’d like to create a model for the objects I’m drawing but I’m struggling with how to do that in Angular. I know p5 methods aren’t recognized outside of specific functions but that seems to be what I need to do here?

I’m attempting to follow along with The Coding Train here where he does something similar.

Thoughts? Code below with push… etc is undefined errors.

import * as Matter from 'matter-js';
import * as p5 from 'p5';

export class Box {
  [x: string]: any;
  constructor(x, y, w, h, world) {
    this.w = w;
    this.h = h;
    this.body = Matter.Bodies.rectangle(x,y,w,h)
    Matter.World.add(world, this.body);

  }

  show() {


       let pos = this.body.position;
       let angle = this.body.angle;

       p5.Push();
       p5.translate(pos.x, pos.y);
       p5.rect(0,0, this.w, this.h);
       p5.pop();

    
  }

}
2

Seems instead of importing p5 into my Box model I can pass my instance of p5 into the show method as such.

From my component…

const sketch = (s) => {

...

s.draw = () => {
   s.background(51);
   // s.rect(box1.position.x, box1.position.y, 80, 80);
   box1.show(s)
 };

...

And updated Box model show() method

...

show(p5) {
   let pos = this.body.position;
   let angle = this.body.angle;

   p5.push();
   p5.translate(pos.x, pos.y);
   p5.rect(0,0, this.w, this.h);
   p5.pop();

...
2 Likes