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

    } 
}