arc to show reload time left in a shooter game

Question

quick question about a game engine I am writing in Javascript in Khan Academy: i have on arc that represents the amount of reload time left. (in processing js, drawing an arc works like this: arc(x,y,width,height,start,stop);)

I already have the value of the time left in seconds stored in a variable, so how can I accuratly have the arc wedge = time currently reloading divided by total reload time?

When the arc is a circle, reload is complete. When the arc is nothing, it just started reloading.

Also, the reload arc wedge stroke starts on the center top, and moves clockwise around the outside.

if(weapon.reloading){
    arc(300,300-player.size-player.size/2,40,40,-90,round((w.reloadCounter/w.reloadTime/100)*100)*6-95);

}

this redundant code works when fps(frames per second equals 60) i already have a variable called fps that equals frames per second, so if any help is given, use that in example.

Thanks!

Edit: would this be accurate - from what i can see from testing, it is mostly accurate:

    var time = round(w.reloadCounter/fps*10)/10;//seconds currently spent reloading(rounded to the nearest 10th)

    var t = round((w.reloadTime-time)*10)/10;//time left to finish reloading


    var timeLeftArc = map(t,0,w.reloadTime,270,-90);

    arc(300,300-player.size-player.size/2,40,40,-90,timeLeftArc);

Answer 1

We know that 360 degree make up a full circle - which equals to a fully reloaded weapon in your case. To get the proper arc for in-between values we need to figure out how many percent of the reloading phase is processed.

This can simply be done by dividing the time passed by the total time required - so just like you already did:

w.reloadCounter / w.reloadTime

This will give a float between 0 and 1. If we then multiply this number by 360 we have the in-between angles for the arc.

arc(300, 300 - player.size - player.size / 2, 40, 40, -90, w.reloadCounter / w.reloadTime * 360 - 90);

As a simple example: Say the time required is 1000ms and 500ms have elapsed:

500 / 1000 * 360 = 0.5 * 360 = 180