p5.j​​s Music 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);

  }
}