Description
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" } }
Originally posted by @dimadem in #198 (comment)