Comment changer le rayon de l'ellipse dessinée dans p5.js?

Question

J'ai appris comment utiliser la bibliothèque p5.js et je me suis coincé en faisant un simple croquis. Le but du code est d'avoir un curseur qui modifie le rayon de l'ellipse dessinée. Le curseur fonctionne lorsque vous augmentez la valeur, mais en la diminuant, la plus grande ellipse dessinée couvre les plus petites. Cela a du sens, car une ellipse est constamment dessinée. Mais y a-t-il un moyen d'avoir juste 1 ellipse et de changer son rayon avec le curseur?

Voici le code horrible que j'ai réussi à mettre en place qui fonctionne. JS:

var spr; 
var slider; 
function setup() { 
    createCanvas(500,500); 
    background(51); 
    spr = new Sphere(); 
    slider = createSlider(0, width, 1); 
    slider.position(6, 6); 
    slider.style('width','500px'); 
} 

function draw() { 
    var val = slider.value(); 
    spr.show(val); 
} 

function Sphere() { 
    this.x = width/2; 
    this.y = height/2; 

    this.show = function(val){ 
    noStroke(); 
    fill(100,0,250); 
    ellipse(this.x, this.y, val, val); 
    } 
} 

Here is a picture of how it looks like in the browser.

Avant de demander, je cherché une réponse mais n'a pas pu en trouver un. C'est probablement très simple et j'ai raté quelque chose de très important.

Answer 1

Vous n'effacez jamais les anciens cadres, donc tout ce que vous dessinez reste à l'écran. C'est pourquoi votre plus grand dessin couvre toujours vos plus petits dessins.

Pour effacer les anciens écrans, ajoutez simplement un appel à la fonction background() en tant que première ligne de la fonction draw(). Les informations peuvent être trouvées dans the reference.