Joining animated shapes together

I'll try to explain this as best I can.

 

I've created a looping animation of dots that move across the screen from right to left, following a motion path. They repeat every 5 seconds and there are 5 dots spaced 1 second apart so the chain of dots moving seamlessly loops.

Depending on the number of a variable the dots are in 1 of 4 possible states, each state moves them up the screen so as the variable changes the dots can move up or down the screen but always in a constant loop from right to left.

This is working quite well as a replication for a dynamic chart. What I want to do is have the dots joined together by a line so that as they move across the screen the line appears flat but as they change states vertically the line moves to join them up, creating peaks and troughs like a typical line graph.

I've looked into adding glow or blur effects to the dots to simulate this or simply adding lots more dots until they join up. These are quite resource intensive solutions and slow the whole thing down too much. I suspect there isn't an answer to this one but I'm open to suggestions!

Attached a screenshot. Blue dots currently animate and loop perfectly. I need something to simulate the red line I have drawn on here...

Be the first to reply