如何控制花动画？

Question

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()

  }
}

//我希望我的叶子能够响应麦克风实时声音输入的响应。我认为我应该使用PFF，但是...它不起作用。请帮助我TT

Answer 1

以下是一种设计，其伪造的计算将FFT输出转换为旋转速率。 （实际麦克风输入不会在片段中运行）

重点是：（1）演示如何旋转图形，（b）显示如何解开FFT数学和图形。

编辑

我第一次尝试了P5声音库。有些事情要注意：（1）由于摘要无法访问客户端麦克风，因此它在堆栈溢出片段中无法使用。 （2）请记住，在下面的HTML中导入P5声音附加组件，（3）如果您只想总幅度，则不需要FFT，只需从P5 MIC获得MIC级别即可。 （4）我构成了一个在本地机器上运行正常的功能，剪裁低幅度和高振幅（尽管1.0可能是最大输出的最大输出）。

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>