Document how to use P5 plugins and constructors

[jamesrweb]

As discussed in multiple issues such as #62, #61, #11, #23 and more, there seems to be confusion as to how we can use plugins out of the box. This being the case, we should document how to use plugins and constructors without external dependencies. This comment could provide a foundation for the documentation but is far from refined currently and would need reformulated accordingly.

[jamesrweb]

@caines1989 would you be up for taking this one on?

[caines1989]

sure I dont mind at all :D

[dimadem]

Hello, it would be great, to see some example with audio experience at this point, do you have anyone?

#61 (comment) but is far from refined currently and would need reformulated accordingly.

I've trying with this comment, but sketch is not builded.

if import "p5/lib/addons/p5.sound"; added to sketch without any calling plugins.
I see

If i comment it, everything working well.

[jamesrweb]

Hello, it would be great, to see some example with audio experience at this point, do you have anyone?

#61 (comment) but is far from refined currently and would need reformulated accordingly.

I've trying with this comment, but sketch is not builded.

if import "p5/lib/addons/p5.sound"; added to sketch without any calling plugins.

I see

If i comment it, everything working well.

Please share details of the issue including any installed dependencies, your code and any logs or error messages in a new issue for easier tracking🙏🏻!

[dimadem]

Okay, so let's go with code and so on

sketch.js
`
// import "p5/lib/addons/p5.sound";

export default function sketch(p5) {
let cycles;
let fft;
let webCam;
let img;
let cnv;
let fr = 30;
let pd = 1.0;

p5.setup = () => {
p5.pixelDensity(pd);
p5.frameRate(fr);
cnv = p5.createCanvas(p5.windowWidth, p5.windowHeight);
cnv.style("z-index", "-1");
// cnv.mousePressed(p5.userStartAudio);
//activate module in and output
// cycles = new p5.AudioIn();
// cycles.start();
// cycles.connect();
// fft = new p5.FFT();
};

p5.draw = () => {
p5.background(p5.random(0, 20), 5);

//Mikado pattern
p5.stroke(p5.random(255), p5.random(255), p5.random(255));
p5.line(
  p5.random(p5.width),
  p5.random(p5.height),
  p5.random(p5.width),
  p5.random(p5.height)
);
p5.strokeWeight(8);

// var wave = fft.waveform();
//console.log(fft.waveform);

// p5.beginShape();
// for (var i = 0; i < p5.width; i++) {
//   var index = p5.floor(p5.map(i, 0, p5.width, 0, wave.length));
//   var x = i;
//   var y = wave[index] * 300 + p5.height / 2;
//   p5.point(x, y);
// }
// p5.endShape();

};
}
`

Also here we go with wrapper

`
"use client";

import Canvas3d from "@/components/polyMenu/Canvas3d";
import { Inter } from "@next/font/google";
import { ReactP5Wrapper } from "react-p5-wrapper";
import sketch from "../components/mikado/sketch";

// add different font
const inter = Inter({ subsets: ["latin"] });

export default function Home() {
return (

);
}
`

And dependencies

{ "name": "---", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@next/font": "13.1.2", "@react-three/drei": "^9.53.0", "@react-three/fiber": "^8.10.0", "@types/three": "^0.148.0", "eslint": "8.32.0", "eslint-config-next": "13.1.2", "next": "13.1.2", "r3f-perf": "^6.6.3", "react": "18.2.0", "react-dom": "18.2.0", "react-p5-wrapper": "^3.4.0", "three": "^0.148.0" }, "devDependencies": { "autoprefixer": "^10.4.13", "postcss": "^8.4.21", "tailwindcss": "^3.2.4" } }