Animation - Multiple frames displayed simultaneously

General JUCE discussion
1

Hi, I’m running into issues when trying to render a rather simple animation. It seems like multiple frames are being displayed simultaneously when only one instance should be seen. Please see this video for demonstration.

The paint loop is drawing a simple bezier path with three filled circles. Here is the paint method:

void Curve::Vertical::paint(Graphics& g)
{
    g.setColour(Colours::white);

    fillCircle(g, points.a, radius);
    fillCircle(g, points.b, radius);
    fillCircle(g, points.c, radius);

    path = Path();
    path.startNewSubPath(denormalize(points.a));
    path.quadraticTo(denormalize(points.b), denormalize(points.c));

    g.strokePath(path, PathStrokeType(1));
}

In this example repaint is called periodically at 5Hz. I’ve tried the AnimatedAppComponent with no luck. Is there anything I should be doing differently to get this animation rendered smoothly?

1 Like
2

I think this is probably an optical illusion caused by persistence of vision. If I play your video at a reduced speed, the effect is reduced, and every time I pause the example video, I see only a single line.

I think to make this look more ‘natural’ you’d need to add some kind of motion-blur effect which would divide each frame into multiple sub-frames, and then combine all the resulting images. That is, if the mouse moved 50px in a single frame, you’d draw the resulting curve several times, as if the mouse had moved [5px, 10px, 15px, …, 45px, 50px] and then blend/average all these images. I haven’t used this approach myself in JUCE, but I’ve used it in other environments such as Processing and Cinder.