P5-wrapper/react

Expand to include p5 libraries/addons eg p5.sound

Antbrooksuk opened this issue · 6 comments

Antbrooksuk commented

Currently only the basic p5 is wrapped.

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

slin12 commented

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.

  • 🎉2
shtrih commented

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 commented

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
  • 👍5
  • 👀2
jamesrweb commented

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 commented

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 commented

@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:
image