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

    } 
}