CODEWITHSUNDEEP
processingdrawgeometry
kamaci
kamaci

Reputation: 75127

Processing making a draw method slowly?

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?

Upvotes: 0

Views: 2538

Answers (1)

George Profenza
George Profenza

Reputation: 51837

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>

Upvotes: 3

Related Questions