Lag when drawing inside a loop

Recommended Posts



As you can see from my pen above I'm playing an audio file and trying to turn the wedges pink when the dial moves over them (click the center of the circle to play/pause). 

I have 2 problems that I can't seem to work out: 

  1. Why is it so laggy? I think I'm drawing the pink too much because when I turn of the last arc drawing call it's as smooth as butter
  2. Why doesn't the first wedge get drawn pink until the needle is way past it? 

If anyone can shed some light I'd be massively appreciative! 

Share this post

Link to post
Share on other sites

You can get the first wedge to draw by moving the graphics.moveTo call so that it comes right before the graphics.arc call.

The lag I think is from drawing each pink part each frame. Here's a possible solution to avoid redrawing: for each wedge, save the last drawn arc's end value as lastDrawEnd, which is initialized to the wedge's start. Then only draw an arc for the wedge if the wedge's lastDrawEnd is less than the wedge's end. When the arc is drawn, it starts at the wedge's lastDrawEnd and goes to arcEnd. After the arc is drawn, the wedge's lastDrawEnd is set equal to arcEnd. For this approach, it would work better IMO to make each wedge an object instead of an array, e.g. with properties start, end, lastDrawEnd.

It's the drawing that's tanking the frame rate, but there's also little things you can do to make the loops faster, like (1) Move calculations that don't change so that they're outside of the loops (some can be outside of the animate function all together). (2) Keep everything in radians to rid the inner loop of conversions. (3) Cache point since it's used several times in the inner loop (4) Cache the array lengths

Share this post

Link to post
Share on other sites

Thanks @Taz, that makes a lot of sense! 

Moving on from this point, the needle in the center will be draggable and I want to remove the pink if it's moved backwards. I can't for the life of me work out the best approach - any suggestions?


Share this post

Link to post
Share on other sites

For going backwards, maybe set the color back to grey and draw from start of arc to current position (instead of from current position to end of arc). Or if you keep track of the last time value it could work like below I think.

Something like this could work as a good starting point IMO, for optimizing and for supporting backwards movement:

// initialize radiansPerSecond
var radiansPerSecond = 2 * Math.PI / audio.duration;

// initialize audio.lastTime
audio.lastTime = 0;

// before draw loop:
if (audio.currentTime > audio.lastTime) {
    // needle is moving forwards

    graphics.lineStyle(7, 0xff0066, 1);

    var start = audio.lastTime    * radiansPerSecond;
    var end   = audio.currentTime * radiansPerSecond;
else if (audio.currentTime < audio.lastTime) {
    // needle is moving backwards

    baseGraphics.lineStyle(7, 0xB3B3B3, 1);

    var start = audio.currentTime * radiansPerSecond;
    var end   = audio.lastTime    * radiansPerSecond;
else {
    // needle is not moving


audio.lastTime = audio.currentTime;

// inner draw loop
if (start > points[i][a][1] || end < points[i][a][0]) {
    // arc doesn't need to be drawn, so continue to the next arc

var arcStart = start;
if (arcStart < points[i][a][0]) {
    arcStart = points[i][a][0];

var arcEnd = end;
if (arcEnd > points[i][a][1] {
    arcEnd = points[i][a][1];

// then draw arc from arcStart to arcEnd, same as before


Share this post

Link to post
Share on other sites

Hmm, you could also try redrawing less often using setInterval. There's probably a frequency where it isn't killing the frame rate but still looks smooth enough. Likely audio.currentTime gets updated less than 60 times per second anyway, so its display is being updated more often than it changes when tied to the rendering frame rate. Between that and only redrawing the parts that have changed color, the lag can be addressed IMO.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.