# An object-oriented wrapper for P5

**URL:** <https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180>\
**Category:** Development\
**Created:** [July 31, 2022, 9:28pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180 "2022-07-31T21:28:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SanzSeraph](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@SanzSeraph](https://discourse.processing.org/u/SanzSeraph)\
**Post date:** [July 31, 2022, 9:28pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180/1 "2022-07-31T21:28:16Z")

</div>

I love the simplicity of p5 and the fact that it shies away from an object-oriented API. This actually makes it conceptually closer to how lower level languages work.

However, I’m wondering if it would be valuable to have an object-oriented wrapper library for those who want to “graduate” to a paradigm more prevalent in production applications. I can imagine building a game engine on top of such a library.

I’ve looked through all of the libraries and don’t see anything like that, so I assume that I’m not reinventing the wheel. But I do wonder if anyone else thinks this would be valuable, or if I would be doing it for my own entertainment.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 1, 2022, 11:06am UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180/2 "2022-08-01T11:06:28Z")

</div>

Hi @SanzSeraph,

what exactly do you want to wrap. I think it is quite object-oriented as far as js allows…

Cheers  
— mnse

Here’s a list of some classes which are provided by p5js… (nearly all are extensions of p5.Element, similar to Object in java).

> class: ‘p5’  
> class: ‘p5.Amplitude’  
> class: ‘p5.AudioIn’  
> class: ‘p5.AudioVoice’  
> class: ‘p5.Camera’  
> class: ‘p5.Color’  
> class: ‘p5.Compressor’  
> class: ‘p5.Convolver’  
> class: ‘p5.Delay’  
> class: ‘p5.Distortion’  
> class: ‘p5.Effect’  
> class: ‘p5.Element’  
> class: ‘p5.Envelope’  
> class: ‘p5.EQ’  
> class: ‘p5.FFT’  
> class: ‘p5.File’  
> class: ‘p5.Filter’  
> class: ‘p5.Font’  
> class: ‘p5.Gain’  
> class: ‘p5.Geometry’  
> class: ‘p5.Graphics’  
> class: ‘p5.Image’  
> class: ‘p5.MediaElement’  
> class: ‘p5.MonoSynth’  
> class: ‘p5.Noise’  
> class: ‘p5.NumberDict’  
> class: ‘p5.Oscillator’  
> class: ‘p5.Panner3D’  
> class: ‘p5.Part’  
> class: ‘p5.PeakDetect’  
> class: ‘p5.Phrase’  
> class: ‘p5.PolySynth’  
> class: ‘p5.PrintWriter’  
> class: ‘p5.Pulse’  
> class: ‘p5.Reverb’  
> class: ‘p5.Score’  
> class: ‘p5.Shader’  
> class: ‘p5.SoundFile’  
> class: ‘p5.SoundLoop’  
> class: ‘p5.SoundRecorder’  
> class: ‘p5.Table’  
> class: ‘p5.TableRow’  
> class: ‘p5.TypedDict’  
> class: ‘p5.Vector’  
> class: ‘p5.XML’

However, I can understand what you mean, as it is not implemented like in this example. 🙂

> **[examples | p5.js](https://p5js.org/examples/objects-objects.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![SanzSeraph](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@SanzSeraph](https://discourse.processing.org/u/SanzSeraph)\
**Post date:** [August 1, 2022, 12:18pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180/3 "2022-08-01T12:18:18Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 1, 2022, 12:50pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180/4 "2022-08-01T12:50:39Z")

</div>

Hi @SanzSeraph,

In principle there is nothing against doing this and implementing another abstraction layer.  
I personally wouldn’t use it, because if my model already contains its own abstraction layers and I want to represent/display it on an atomic level, the direct way is fine for me and I don’t need additional classes representing for example geometric primitives.  
But this is purely a matter of taste. Certainly there are also cases which it would be usefull and I bet there are people which will use it.  
But even if you are doing it for your own entertainment it will be fun for sure… and reminds me a bit when I developed some basic libraries and a GUI Framework on my own years ago … Just for fun! 🙂

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![SanzSeraph](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@SanzSeraph](https://discourse.processing.org/u/SanzSeraph)\
**Post date:** [August 1, 2022, 1:16pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180/5 "2022-08-01T13:16:47Z")

</div>

Now I’m interested to see how you do it. 😊

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 1, 2022, 2:22pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180/6 "2022-08-01T14:22:18Z")

</div>

> [@SanzSeraph](#):
>
> … so that you can treat elements on the canvas as if they are discrete objects instead of just pixels.

There are many libraries listed on [libraries | p5.js](https://p5js.org/libraries/) which already kinda do that:

> **[GitHub - zachmohammed/P5.Create](https://github.com/zachmohammed/P5.Create)**
>
> Contribute to zachmohammed/P5.Create development by creating an account on GitHub.

> **[GitHub - generative-light/p5.scribble.js: Draw 2D primitives in a sketchy...](https://github.com/generative-light/p5.scribble.js)**
>
> Draw 2D primitives in a sketchy look in p5.js. Contribute to generative-light/p5.scribble.js development by creating an account on GitHub.

> **[GitHub - pfe1223/Shape5js: Shape wrapper for P5.js](https://github.com/pfe1223/Shape5js)**
>
> Shape wrapper for P5.js. Contribute to pfe1223/Shape5js development by creating an account on GitHub.

> **[GitHub - wixette/p5.animS: p5.animS animates p5.js shapes by rendering their...](https://github.com/wixette/p5.animS)**
>
> p5.animS animates p5.js shapes by rendering their drawing processes. - GitHub - wixette/p5.animS: p5.animS animates p5.js shapes by rendering their drawing processes.

[http://molleindustria.github.io/p5.play/](http://molleindustria.github.io/p5.play/)

---

<div class="post-metadata">

**Author:** ![SanzSeraph](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@SanzSeraph](https://discourse.processing.org/u/SanzSeraph)\
**Post date:** [August 1, 2022, 3:04pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180/7 "2022-08-01T15:04:00Z")

</div>

Yeah, I looked at all of those. They either don’t do what I’m envisioning or they are more specialized than what I’m envisioning. I don’t want this to be a game engine, although I do think of it as a great foundation for writing a game engine. Shape5js is much closer to what I’m going for, but it doesn’t provide classes to represent things like text and curves. I might even introduce layers by using P5’s API for creating multiple canvases.