Traitement effectuant une méthode de tirage lentement?

Question

Je travaille sur le langage de traitement et qui ont un code comme ça:

int fatness=30; 
int step=20; 

void drawCircle() { 
fill(48, 139, 206); 
ellipse(width - fatness, height - fatness, fatness, fatness); 
} 

void increaseCircle(){ 
fatness = fatness + step; 
} 

à une autre classe que je veux appeler la méthode increaseCircle(). Cependant, je veux que ça grandisse lentement. Je veux dire que l'étape le rend 20 plus grand à mon code mais je veux le rendre plus grand c'est-à-dire à 2 secondes si possible avec une animation. Comment puis je faire ça?

EDIT: Lorsque je définis un objet de cette classe et que j'appelle la méthode increaseCircle, elle devient de plus en plus grande, n'arrête pas?

Answer 1

Il semble que vous ayez besoin de mettre à jour les valeurs en fonction du temps.

Si vous stockez l'heure de début, vous pouvez toujours vérifier le temps passé en utilisant la fonction millis(). Une fois que vous savez combien de temps s'est écoulé, vous pouvez diviser cette différence par la durée que vous souhaitez pour la mise à jour de votre variable (grosseur dans votre cas). Cela vous donnera une valeur comprise entre 0,0 et 1,0, que vous pouvez utiliser pour mettre à l'échelle/multiplier jusqu'à la valeur finale désirée pour votre variable (par exemple, la graisse va de 20 à 200).

Voici ce que je veux dire:

int startTime; 
int duration = 1000; 
float startValue = 20; 
float endValue = 200; 
float currentValue = startValue; 

void setup(){ 
    size(400,400,P2D); 
    ellipseMode(CENTER); 
    startTime = millis(); 
} 
void draw(){ 
    background(255); 
    increaseCircle(); 
    drawCircle(); 
} 
void drawCircle() { 
fill(48, 139, 206); 
ellipse(width - currentValue, height - currentValue, currentValue, currentValue); 
} 

void increaseCircle(){ 
    float progress = (float)(millis()-startTime)/duration;//millis()-startTime = difference in time from start until now 
    if(progress <= 1.0) currentValue = startValue + (endValue * progress);//the current value is the final value scaled/multiplied by the ratio between the current duration of the update and the total duration 
} 
void mousePressed(){//reset value and time 
    currentValue = startValue; 
    startTime = millis(); 
} 
void keyPressed(){//update duration 
    if(key == '-') if(duration > 0) duration -= 100; 
    if(key == '=' || key == '+') duration += 100; 
    println("duration: " + duration); 
} 

Dans cette démo simple, vous pouvez cliquer pour réinitialiser l'animation et utilisez les touches et -= pour augmenter ou diminuer la durée de l'animation.

Si vous êtes à l'aise avec l'utilisation de bibliothèques externes dans Processing, vous devriez jeter un oeil à this library.

Vous pouvez exécuter une démonstration ci-dessous:

var startTime; 
 
var duration = 1000; 
 
var startValue = 20; 
 
var endValue = 200; 
 
var currentValue = startValue; 
 

 
function setup(){ 
 
    createCanvas(400,400); 
 
    ellipseMode(CENTER); 
 
    startTime = millis(); 
 
} 
 
function draw(){ 
 
    background(255); 
 
    increaseCircle(); 
 
    drawCircle(); 
 
} 
 
function drawCircle() { 
 
fill(48, 139, 206); 
 
ellipse(width - currentValue, height - currentValue, currentValue, currentValue); 
 
} 
 

 
function increaseCircle(){ 
 
    var progress = (float)(millis()-startTime)/duration;//millis()-startTime = difference in time from start until now 
 
    if(progress <= 1.0) currentValue = startValue + (endValue * progress);//the current value is the final value scaled/multiplied by the ratio between the current duration of the update and the total duration 
 
} 
 
function mousePressed(){//reset value and time 
 
    currentValue = startValue; 
 
    startTime = millis(); 
 
} 
 
function keyPressed(){//update duration 
 
    if(key == '-') if(duration > 0) duration -= 100; 
 
    if(key == '=' || key == '+') duration += 100; 
 
    println("duration: " + duration); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>