添加与麦克风输入的交互性

Question

I want to add interactivity to the soundwaves visual so that when it interacts with the microphone, it moves with the amplitude...

Here is a link to the sketch:

https://www.openprocessing.org/sketch/950912

Code here:

int ranges = 100;

void setup() {
  fullScreen();
  background(0);
}

void draw() {
  background(0);
  noFill();
  strokeWeight(1);

  for (int i = 1; i < ranges; i++) {
    float paint = map(i, 0, ranges, 1, 125);
    stroke(paint);
    
    beginShape();
    for (int x = -100; x < width + 11; x += 20) {
      float n = noise(x * 0.001, i * 0.01, frameCount * 0.01);
      float y = map(n, 0.1, 1, 10, height);
      vertex(x, y);
    }
    endShape();
  }
}

Answer 1

The code you have is for Processing and you have to convert it for p5.

 var sketch = function (p) { with(p) { var ranges = 100; p.setup = function() { //fullScreen(); background(0); }; p.draw = function() { background(0); noFill(); strokeWeight(1); for (var i = 1; i < ranges; i++) { var paint = map(i, 0, ranges, 1, 125); stroke(paint); beginShape(); for (var x = -100; x < width + 11; x += 20) { var n = noise(x * 0.001, i * 0.01, frameCount * 0.01); var y = map(n, 0.1, 1, 10, height); vertex(x, y); } endShape(); } }; } }; let node = document.createElement('div'); window.document.getElementById('p5-container').appendChild(node); new p5(sketch, node);

 body { background-color:#efefef; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script> <div id="p5-container"></div>