Expand to include p5 libraries/addons eg p5.sound

[Antbrooksuk]

Currently only the basic p5 is wrapped.

It is not clear how to include the libraries that sit in "p5\lib\addons".

[slin12]

To include the libraries, you can include the line import "p5/lib/addons/p5.sound"; in either the p5-wrapper or the sketch file. Either way you'll have access to the functions from the addons.

[shtrih]

For react-p5-wrapper version <= 0.0.4.
If you write import 'p5/lib/addons/p5.dom'; in the sketch file then it throws an error:

Uncaught ReferenceError: p5 is not defined
    at Object../node_modules/p5/lib/addons/p5.dom.js

Upd: here is the solution: #23 (comment)

[arsmth]

I would also like to know how to use the sound library. I get the following error when trying to use p5.FFT like so const fft = new p.FFT()

Uncaught TypeError: p.FFT is not a constructor

[jamesrweb]

The issue isn't actually with this library, if you are in node_modules\@types\p5\index.d.ts you will notice that the type declarations for p5 are missing the <reference path="./lib/addons/p5.sound.d.ts" /> tag even though the file exists 🤔.. I will make a PR into the p5-types repo sometime later in the week and hopefully once that is done you can use all the p5 sound methods via the p5.constructor object that is on the p5 object provided to all sketch modules.

[jamesrweb]

There is an example usage from the @types/p5 official package of using P5.sound in an app. There is also an answer for why this is, kind of, here.

Since P5.dom and P5.sound are add ons in the P5 eco-system by default anyway, it makes sense that you add them only as needed via imports or the usual script route.

With the example above and this in mind, I will now close the issue.

[vennsoh]

@jamesrweb I'm trying to get this working, just want to understand the step-by-step way of getting this working.

1. Do I need to first npm install --save @types/p5
2. Can I just add import * as p5 from "p5" and import "p5/lib/addons/p5.sound" in my Sketch file and use it straightaway?

My code, following this tutorial: https://www.youtube.com/watch?v=8HEgeAbYphA&feature=emb_logo

export default function sketch(p5) {
    p5.setup = () => {
        p5.createCanvas(400, 400)

        env = new p5.Envelope()
        env.setADSR(0.05, 0.1, 0.5, 1)
        env.setRange(1.2, 0)

        wave = new p5.Oscillator()
        wave.setType("sine")
        wave.start()
        wave.freq(440)
        wave.amp(env)
...

I tried them and I get the errors saying: