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

【问题标题】：Add interactivity with microphone input添加与麦克风输入的交互性
【发布时间】：2020-08-27 14:46:11
【问题描述】：

我想为声波视觉添加交互性，这样当它与麦克风交互时，它会随着振幅移动......

这里是草图的链接：

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, 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();
  }
}

【问题讨论】：

这不是代码链接。另外，你能展示一下你到目前为止做了什么吗？
对不起。见上文

标签： javascript p5.js interactive

【解决方案1】：

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

【讨论】：