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

问题描述

我想在声波视觉中增加交互性，以便当它与麦克风交互时，它会随振幅移动...

这是草图的链接：

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

代码在这里：

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,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,10,height);
      vertex(x,y);
    }
    endShape();
  }
}

解决方法

您拥有的代码用于处理，您必须将其转换为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,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,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>