p5.js Музыка VIsualization

Question

Я создал эскиз, который имеет массив, который рисует круги по амплитуде песни, которую я загрузил в коде, для iPad. Теперь я пытаюсь изменить эти круги (т. Е. Изменить цвета или добавить штрихи при определенных значениях амплитуды с помощью if then statement, однако я не уверен, где именно разместить эти, если затем утверждения. Все, что я пробовал, не повлияло

Ключ состоит в том, чтобы круги или изображения «рисовали» или делали что-то, даже когда ваш палец не был на экране, в последнем месте, где вы «коснулись». Также этот эскиз можно взаимодействовать с помощью 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

Im будем считать, что это то, что вы хотите:.

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

    } 
}