如何控制花朵动画？

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) 记得导入 p5 声音 add-on，如下图 html 所示， (3) 如果你只想要总振幅，则不需要 FFT，只需从 p5 麦克风获取麦克风电平. (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>

如何控制花朵动画？

how to control flower animation?

javascript

animation

rotation

real-time

flower