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
uj5u.com熱心網友回復：
下面是一個使用虛假計算將 FFT 輸出轉換為旋轉速率的設計。（真正的麥克風輸入不會在片段中運行）
重點是：(1) 演示如何旋轉圖形，(b) 演示如何解開 FFT 數學和圖形。
編輯
我第一次嘗試了 p5 聲音庫。需要注意的一些事情：（1）它在堆疊溢位片段中不起作用，因為片段無法訪問客戶端麥克風。(2) 記得匯入p5 sound add-on，如下面的html， (3) 如果你只想要總振幅，不需要FFT，直接從p5 mic 中獲取mic level。(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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488240.html
標籤：javascript 动画 回转 即时的 花
上一篇：CSS/JS中的影片