Lag when drawing inside a loop

[sambenson]

Example: 

 

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! 

[Taz]

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

[sambenson]

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?

 

[Taz]

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

    return;
}

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
    continue;
}

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

 

[Taz]

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.