Processing making a draw method slowly? - processing

Question

I am working on Processing language and have a code like that:
int fatness=30;
int step=20;
void drawCircle() {
fill(48, 139, 206);
ellipse(width - fatness, height - fatness, fatness, fatness);
}
void increaseCircle(){
fatness = fatness + step;
}
at another class I want to call the increaseCircle() method. However I want it getting bigger slowly. I mean step makes it 20 more bigger at my code but I want it make bigger i.e. at 2 seconds if possible with an animation. How can I do that?
EDIT: When I define an object from that class and call increaseCircle method it gets bigger and bigger, doesn't stop?

Answer 1

Sounds like you need to update the values based on time.
If you store the start time, you can always check how much time passed using the millis() function.
Once you know how much time passed, you can divide that difference to the duration you want for updating your variable(fatness in you case).
This will give you value between 0.0 and 1.0, which you can use to scale/multiply to the final desired value for your variable (e.g. fatness goes from 20 to 200).
Here's what I mean:
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);
}
In this simple demo you can click to reset the animation and use the - and = keys to increase or decrease the animation duration.
If you're comfortable with using external libraries in Processing, you should have a look at this library.
You can run a demo bellow:
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>