​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL); // 全屏尺寸

  angleMode(DEGREES);

​

  // 初始化麦克风和FFT

  mic = new p5.AudioIn();

  mic.start();

  fft = new p5.FFT();

  fft.setInput(mic);

}

​

function draw() {

  background(10, 15, 30); // 深色背景

  noFill();

​

  // 获取频率数据和音量数据

  let spectrum = fft.analyze();

  let lowEnergy = fft.getEnergy("bass"); // 低频

  let midEnergy = fft.getEnergy("mid"); // 中频

  let highEnergy = fft.getEnergy("treble"); // 高频

  let vol = mic.getLevel(); // 音量

​

  let maxRadius = min(windowWidth, windowHeight) / 2; // 动态调整最大半径

​

  // 绘制波纹效果

  push();

  rotateX(frameCount * 0.1); // 动态旋转波纹

  strokeWeight(1);

  for (let i = 0; i < 10; i++) {

    let waveRadius = maxRadius * (1 - i / 10) + sin(frameCount * 0.05 + i) * 20;

    let r = map(lowEnergy, 0, 255, 100, 255);

    let g = map(midEnergy, 0, 255, 50, 200);

    let b = map(highEnergy, 0, 255, 150, 255);

​

    stroke(r, g, b, 150 - i * 15); // 透明度渐变

    beginShape();

    for (let angle = 0; angle < 360; angle += 10) {

      let x = waveRadius * cos(angle);

      let y = waveRadius * sin(angle);

      let z = sin(frameCount * 2 + i * 10) * 10; // Z轴波动

      vertex(x, y, z);

    }

    endShape(CLOSE);

  }

  pop();

​

  // 绘制中心动态形状

  push();

  rotateX(60);

  for (let i = 0; i < 50; i++) {

    let freqIndex = floor(map(i, 0, 50, 0, spectrum.length));

    let amp = spectrum[freqIndex];

    let r = map(lowEnergy, 0, 255, 150, 255);

    let g = map(midEnergy, 0, 255, 100, 255);

    let b = map(highEnergy, 0, 255, 150, 255);

​

    stroke(r, g, b, 200);

    strokeWeight(map(amp, 0, 255, 1, 3));

    rotate(frameCount / 100);

​

    beginShape();

    for (let j = 0; j < 360; j += 45) {

      let pitchFactor = map(highEnergy, 0, 255, 1, 5);

      let rad = maxRadius / 2 + i * 6 + map(amp, 0, 255, -50, 50) * pitchFactor;

      let x = rad * cos(j);

      let y = rad * sin(j);

      let z = cos(frameCount * 2 + i * 5) * map(amp, 0, 255, 20, 150) * pitchFactor;

      vertex(x, y, z);

    }

    endShape(CLOSE);

  }

  pop();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight); // 动态调整画布尺寸

}

​

function touchStarted() {

  getAudioContext().resume(); // 确保在某些浏览器上麦克风能正常工作

}

​