Expand to include p5 libraries/addons eg p5.sound #11

Activity

1. slin12 commented on Jan 24, 2018

   

   slin12

   on Jan 24, 2018

   More actions

   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.

   🎉React with 🎉2Reacted by Christopher Boette and Joseph Henry
2. shtrih commented on May 9, 2019

   

   shtrih

   on May 9, 2019

   Last edited by shtrih

   More actions

   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)
3. arsmth commented on Jun 2, 2019

   

   arsmth

   on Jun 2, 2019

   More actions

   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
   

   👍React with 👍5Reacted by Valentin Perez, christian, Nzo, Justin Sun-ho Kim and Simon

   👀React with 👀2Reacted by Justin John and Justin Sun-ho Kim
4. jamesrweb commented on May 23, 2020

   

   jamesrweb

   on May 23, 2020

   Member

   More actions

   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.
5. jamesrweb commented on Sep 23, 2020

   

   jamesrweb

   on Sep 23, 2020

   Last edited by jamesrweb

   Member

   More actions

   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.
6. jamesrweb

   closed this as completedon Sep 23, 2020
7. vennsoh commented on Nov 17, 2020

   

   vennsoh

   on Nov 17, 2020

   Last edited by vennsoh

   More actions

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