Jump to content

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! 

Link to comment
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

Link to comment
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


Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...