p5.js音乐VIsualization

Question

我创建了一个草图，其中包含一个数组，该数组将圆圈绘制到我在代码中加载的歌曲的幅度，用于iPad。我现在正试图修改那些圆圈。改变颜色或在振幅的某些值加上笔画，如果是这样的话，但是，我不确定这些语句的确切位置。我试过的每一件事都没有影响画的视觉效果。

关键是让圆圈/视觉“画”或做一些事情，即使你的手指不在屏幕上，在最后一个你“触摸”的地方。此外，这个草图可以在mmengle.com上作为startover_music链接进行交互。

var circles = [];


function preload() {
  sound = loadSound('assets/findingnemoegg.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  amplitude = new p5.Amplitude();
  sound.play();

for (var i = 0; i < 1; i++) {  
  circles[i] = {
    display: function() {
      var level = amplitude.getLevel();
      var size = map(level, 0, 1, 10, 900);
      noStroke();
      fill(128,166,206,40);
      ellipse(touchX + level, touchY + level, size, size);

  }
    }
  }

    }

function draw() {

  fill(255,8);
  rect(0,0,windowWidth, windowHeight);



  for (var i = 0; i < circles.length; i++) {
    circles[i].display();
  }

}

Answer 1

我会假设这是你想要的：

var circles = [];
var lastTouchX;
var lastTouchY;

function preload() {
  sound = loadSound('assests/findingnemoegg.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  amplitude = new p5.Amplitude();
  sound.play();

  lastTouchX = width / 2;
  lastTouchY = height / 2;
}

function draw() {

  fill(255, 8);
  rect(0, 0, windowWidth, windowHeight);

  for (var i = 0; i < circles.length; i++) {
    circles[i].display();
  }

}

//change to touchEnded()
function mousePressed() {
  lastTouchX = mouseX;
  lastTouchY = mouseY;
  circles.push(new Circle());
}

function Circle() {
  this.x = lastTouchX;
  this.y = lastTouchY;

  this.display = function() {
    var level = amplitude.getLevel();
    var size = map(level, 0, 1, 10, 200);
    noStroke();
    //if statement to change fill
    fill(128, 166, 206, 40);
    //if statement to change fill
    ellipse(this.x, this.y, size, size);

  }
}