# Angular object models

**URL:** <https://discourse.processing.org/t/angular-object-models/8028>\
**Category:** Libraries\
**Created:** [February 1, 2019, 6:19pm UTC](https://discourse.processing.org/t/angular-object-models/8028 "2019-02-01T18:19:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![domedisorder](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@domedisorder](https://discourse.processing.org/u/domedisorder)\
**Post date:** [February 1, 2019, 6:19pm UTC](https://discourse.processing.org/t/angular-object-models/8028/1 "2019-02-01T18:19:01Z")

</div>

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](https://youtu.be/urR596FsU68?t=960) where he does something similar.

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

```auto
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();

    
  }

}

```

---

<div class="post-metadata">

**Author:** ![domedisorder](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@domedisorder](https://discourse.processing.org/u/domedisorder)\
**Post date:** [February 3, 2019, 5:54pm UTC](https://discourse.processing.org/t/angular-object-models/8028/2 "2019-02-03T17:54:43Z")

</div>

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();

...
```