let angle = 0 let mic; let fft; function setup() { createCanvas(400, 400); mic = new p5.AudioIn(); //AUDIO SETTING mic.start(); fft = new p5.FFT(); fft.setInput(mic); } function draw() { background(220); petals(); noStroke(); fill(255); ellipse(200, 200, 100, 100); // the center of flower function petals() { push() translate(200, 200); // flower leaves rotate(angle); noStroke(); const colors = ['magenta','red', 'orange','#7fff00','#0f0','#0ff','blue','#bf49ff']; let waveform = fft.waveform(); for (let i=0; i<8; i++) { let y = 100 - waveform[i]*100; //i want those flower leaves to rotate responds to mic let color = colors[i]; fill(color) ellipse(100, 0, 200, 60) rotate(radians(45)); angle = angle +0.003 } pop() } }//Quiero que mis hojas giren en respuesta al volumen de la entrada de sonido en tiempo real del micrófono. Creo que debería usar pff pero... no funciona. Por favor ayúdame TT
A continuación se muestra un diseño con un cálculo falso que transforma la salida de FFT en una tasa de rotación. (la entrada de micrófono real no se ejecutará en fragmentos)
El punto es: (1) demostrar cómo girar el dibujo y (b) mostrar cómo desenredar las matemáticas FFT y los gráficos.
EDITAR
Probé la biblioteca de sonido p5 por primera vez. Algunas cosas a tener en cuenta: (1) no funcionará en fragmentos de desbordamiento de pila, ya que el fragmento no puede acceder al micrófono del cliente. (2) recuerde importar el complemento de sonido p5, que se muestra en el html a continuación, (3) si solo desea amplitud total, no hay necesidad de FFT, solo obtenga el nivel del micrófono del micrófono p5. (4) Creé una función que funciona bien en mi máquina local, recortando las amplitudes baja y alta (aunque 1.0 es probablemente la salida máxima por defecto).
let mic; let rotation = 0; function setup() { createCanvas(400, 400); mic = new p5.AudioIn(); mic.start(); userStartAudio(); } function rotationalRateForMicLevel(micLevel) { // in my experiment, low mic levels are ~0.01, high levels ~1.0; micLevel = Math.min(1.0, Math.max(0.5, micLevel)); return radians(15) * micLevel } function petals() { //flower leaves -> I wanna fill them with rainbow colors each in shortly push() translate(200, 200); const micLevel = mic.getLevel(); const rotationalRate = rotationalRateForMicLevel(micLevel) rotation += rotationalRate; rotate(rotation); noStroke(); const colors = ['red', 'yellow', 'blue', 'green']; for (let i = 0; i < 8; i++) { let color = colors[i % 4]; fill(color) ellipse(100, 0, 250, 60) rotate(radians(45)); } pop() } function draw() { background(220); petals(); noStroke(); //the center of flower = white circle fill(255); ellipse(200, 200, 130, 130); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.js"></script>