How to convert p5.Something() to fit react

Question

In my file sketch.js before shifting to combined p5 and react, I had a command

amp = new p5.Amplitude();

after shifting to react, the 'p5' method is not defined anymore.

p.Amplitude()/song.Amplitude() isn't doing the job and returns

(TypeError: ... .Amplitude is not a constructor)

I really don't know from where or how import p5. I guess its something to do with the web config but not sure what.

I've npm install both p5 and react-p5-wrapper, and except this line and rest of the things that required amp all the code running as expected, and I can play music/adjust background with sliders etc ...

at the begging of the file I'm importing:

import React from 'react';
import 'p5/lib/addons/p5.sound';
import 'p5/lib/addons/p5.dom';

I will really be glad for little help!

have you looked at https://stackoverflow.com/questions/54868777/how-to-use-react-with-p5-js — Tim Ogilvy, Jun 12 '19 at 01:51

score 2 · Accepted Answer · answered Jun 12 '19 at 01:47

2

You might be able to try:

import * as p5 from './{library-path}/p5.js';

It looks like P5 was not originally set up for easy ES6 imports.

This GitHub issue from 2016 seems to identify a similar problem. https://github.com/processing/p5.js/issues/1734

More recently it looks like it can be used correctly with NPM:

https://medium.com/front-end-weekly/learning-the-p5-canvas-drawing-library-in-es6-and-webpack-bf514a679544

Also check out this other potential answer here.

How to use React with p5.js

answered Jun 12 '19 at 01:47

Tim Ogilvy

1,923
1
24
36

1

import * as p5 from 'p5' did the job for me! thank u! – Hagai Harari Jun 12 '19 at 01:53
I wonder if you could share your code here because I'm having similar issue and I can't get it working ): – Vennsoh Nov 19 '20 at 12:06

How to convert p5.Something() to fit react

1 Answers1