Javascript p5.js音乐可视化

我已经为iPad创建了一个草图，它有一个数组，可以根据我在代码中加载的歌曲的振幅绘制圆圈。我现在正在尝试修改这些圆（即，使用if-then语句更改颜色或在振幅的特定值处添加笔划），但是，我不确定这些if-then语句的确切位置。我所尝试的一切都没有影响绘制的视觉效果

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

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

}

var循环=[]；
函数预加载（）{
sound=loadSound（'assets/findingnemoegg.mp3'）；
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
振幅=新的p5.振幅（）；
声音。播放（）；
对于（var i=0；i<1；i++）{
圆圈[i]={
显示：函数（）{
var level=振幅。getLevel（）；
变量大小=映射（级别0,1,10900）；
仰泳（）；
填充（128166206,40）；
椭圆（触摸X+水平、触摸Y+水平、大小、大小）；
}
}
}
}
函数绘图（）{
填充（255,8）；
rect（0,0，窗宽，窗高）；
对于（变量i=0；i

我假设这就是你想要的：

var循环=[]；
var lastTouchX；
触诊；
函数预加载（）{
sound=loadSound（'Assets/findingnemoegg.mp3'）；
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
振幅=新的p5.振幅（）；
声音。播放（）；
lastTouchX=宽度/2；
lastTouchY=高度/2；
}
函数绘图（）{
填充（255,8）；
rect（0，0，窗口宽度，窗口高度）；
对于（变量i=0；i

我假设这就是你想要的：

var循环=[]；
var lastTouchX；
触诊；
函数预加载（）{
sound=loadSound（'Assets/findingnemoegg.mp3'）；
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
振幅=新的p5.振幅（）；
声音。播放（）；
lastTouchX=宽度/2；
lastTouchY=高度/2；
}
函数绘图（）{
填充（255,8）；
rect（0，0，窗口宽度，窗口高度）；
对于（变量i=0；i

那么你想在用户最后一次触摸的地方画一个带有特定颜色的圆圈？那么你想在用户最后一次触摸的地方画一个带有特定颜色的圆圈？我收到的唯一错误是没有定义宽度和高度！否则它看起来应该可以工作。是的，对不起

var lastTouchX；var lastTouchY；

在设置中，

lastTouchX=width/2；lastTouchY=height/2；

圆圈似乎只停留在中心！并且不会基于鼠标或触摸交互移动。嗯……好的，让我看看，我马上更新我的答案。您可能还必须将

鼠标按下（）

更改为

touchEnded（）

或

touchStarted()

在iPadt上运行我收到的唯一错误是没有定义宽度和高度！否则它看起来应该可以工作。是的，很抱歉

var lastTouchX；var lastTouchY；

在设置中

lastTouchX=width/2；lastTouchY=height/2；

圆圈似乎只停留在中心！并且不会基于鼠标或触摸移动互动嗯……好的，让我看看，我马上更新我的答案。你可能还需要将

mousePressed（）

更改为

touchEnded（）

或

touchStarted（）

才能在ipad上运行