An object-oriented wrapper for P5

p5.js Development
1

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.

2

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. :slight_smile:

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

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! :slight_smile:

Cheers
— mnse

5

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

1 Like
6

There are many libraries listed on libraries | p5.js which already kinda do that:

http://molleindustria.github.io/p5.play/

2 Likes
7

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.