p5.js Music VIsualization

Question

J'ai créé une esquisse avec un tableau qui dessine des cercles selon l'amplitude d'une chanson que j'ai chargée dans le code, pour un iPad. J'essaye maintenant de modifier ces cercles (c.-à-d. Changer les couleurs ou ajouter des traits à certaines valeurs de l'amplitude avec les déclarations if, cependant, je ne sais pas exactement où placer ces déclarations si then. Les visuels dessinés

L'essentiel est de faire en sorte que les cercles/visuels «dessinent» ou fassent quelque chose même lorsque votre doigt ne se trouve pas à l'écran, au dernier endroit où vous avez «touché». mmengle.com comme le lien 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 va supposer que c'est ce que vous voulez.

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

    } 
}