p5.js Music VIsualization

Question

私はコード内にロードした曲の振幅を円で描く配列を持つスケッチを作成しました。私は今、それらのサークルを修正しようとしています（つまり、色を変更するか、または振幅の特定の値でストロークを追加する場合はステートメントですが、ステートメントの場合はどこに配置するか正確にはわかりません）。描かれたビジュアル。

キーは、サークル/ビジュアルを「描画」するか、指が画面上になくても、最後にタッチした場所でも何かをすることです。 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); 

    } 
}