timing animations within draw()?

Programming Questions

deepc28

timing animations within draw()?

in Programming Questions • 1 year ago

Hi,

Im having difficulty creating a loading bar. Before we start this is for a uni assignment so i dont think i can paste my code on here. Basically we have to get a random number between 2000 and 8000. This represents how long the loading bar will take to reach 100%.

So far i have managed to do the following;

I have the endingTime calculated which is the randomly generated when the program begins.

I have a function set up which returns the percentage completed based on millis and endingTime.

The bar length is fixed at 120 pixels.

i am using a line of 1 pixel width. Therefore 120 lines would fill the bar.

So logic would dictate that we should draw 1 line every endingTime / 120 milliseconds or every 100/120 percent right? Is that right? If so could someone show me how i could accomplish this inside draw()? Since draw() is a loop, therefore using for / while inside just displays the whole loop once it reaches the end of draw.

How do i go about timing the bar so that is matches the percentage completed?

I have read over delay and frameRate but have been told using millis() is more precise.

Even if your not willing to show code could you please explain in detail what i should be trying to do since ive spent close to 30 hours trying to figure this out....

ive attempted to draw a line every endingTime/120 . But it would mean that a line would need to be drawn when less that 100ms. In console when i output millis(), it starts at around 500. Can someone explain to me why millis() does not start at 0. Is it because the console doesnt refresh that often?

Replies(7)

PhiLho

Re: timing animations within draw()?

1 year ago

" i dont think i can paste my code on here"
Why not? As long as you do most of the work yourself, most teachers don't frown upon asking for help here.

I suggest to read the Technical FAQ articles, as they aim to answer most of your questions (particularly with regard to delay() and millis() use). If not, tell me so I can improve them.

tfguy44

Re: timing animations within draw()?

1 year ago

SPOILER AHEAD. DO NOT READ.

int totalTime;
PFont myFont = createFont( "Ariel", 12 );
void setup() {
size(258,200);
fill(0);
totalTime = int(random(2000,8000));
textFont( myFont );
}
void draw() {
background(255);
text( str(totalTime/1000.0) + " seconds", 8, 20 );
stroke(0);
noFill();
rect(6,26,242,24);
for( int i=0;i<int(map(constrain(millis(),0,totalTime), 0, totalTime, 0, 120));i++){
stroke(255,0,0);
line(8+2*i,28,8+2*i,48);
}
}

deepc28

Re: timing animations within draw()?

1 year ago

wow thanks a lot im mainly interested in an explanation about this section of code please.

for( int i=0;i<int(map(constrain(millis(),0,totalTime), 0, totalTime, 0, 120));i++){
stroke(255,0,0);
line(8+2*i,28,8+2*i,48)

Can someone please explain to me what this is doing and how it is able to draw each line at a time. Also i have to make a few tweaks to this, since there are a number of cosmetic requirements for the bar, one of which is for it to be a solid bar. I thank you so much for this, ill look up the reference sections for the functions used in the mean time.

Jonny Stu..

Re: timing animations within draw()?

1 year ago

It's a mistake to think of it as drawing a line at a time. draw() isn't a loop in the same sense as a for loop.

The code segment you posted is starting from zero each time and a drawing an increasing number of lines at increasing x positions until it reaches the point that it's been told to stop at. It draws a bit further each time because the value of millis(), which is the time since the sketch started, is increasing. The map and constrain stuff is just to stop it from drawing off further than totalTime and to put the graph in the right place.

deepc28

Re: timing animations within draw()?

1 year ago

oh i see. I think i understand. Also i had to make some alterations to the code, one of which was to remove the spacing between each line. I did this by replacing 2*i in line() with 1*i and doubling 120 to 240.

Why did i have to double 120 to 240 to make the bar reach the end when replacing the above in line()?

Also ive set up a function (calcBarGradient()) to change the colour of the stroke. What it does is reduce 255 based on the percentage of time complete. So the bar goes from white to black for left to right. The problem i am having is that in the loop if i place stroke(calcBarGradient()) before line() the entire bar is changing from white to black instead of each stroke line. Do i need to use nested loops to get this to happen or an if statement + new variables?

Thanks a lot.

deepc28

Re: timing animations within draw()?

1 year ago

i managed to figure out how to get the stroke to change each loop but its not 100% correct since stroke isnt 0 when the loop is finished. i just went stroke(255-i) and since it loops 240 times its close to 0. what would be the best way for me to get it precise? should i calculated it seperately using the ratio of time elapsed to endingtime?

Chrisir

Re: timing animations within draw()?

1 year ago

start with 240

or use map()

Top Reply