Ideas to create elastic line animation - [SOLVED]

I have drawn a horizontal line using points. I want to split the points in half so the line separate. Then the centre point rises vertically straight up the y-axis and the last point stays on the horizontal axis of x. However the animation is to look elastic and not a straight line as it moves up. I have attached an image to explain the animation.


1 Like

I have the issue solved as it is impossible to form the curve using only points. You have to draw more points or lines between each point as the movement “expands”

This gave some really great effects using smoothing and P2D and also antialiascode. Here is a shot of four possible screen renders. There are tons more though.


I’m not sure II completely understand your described solution, but the visual output looks interesting.

I could imagine that there is also a way to use curve() to create a delayed/straightening bendy segment by updating the anchor points dynamically – for example, having them chase a target using PVector.lerp(). When the anchors are the same as the endpoints then the curve segment becomes straight again.

That’s a good point jeremydouglass.
However what I was trying to achieve was a straight line separating in two and then the one end rising vertically. The the start points stays on the xaxis and never moves but the points in the centre are moved as if they are elastic. However its impossible to create without either adding more dots to the line or drawing lines from each dot to the other. The only way to do get it done is to add more dots and then with adding more dots … they have to be added at specific x y locations to give the elastic feel instead it would be just a straight line rising until it became vertical.