Is there a common technique for drawing a “stretchy” line

5
votes

I'm trying to figure out how to draw an stretchy/elastic line between two points in openGL/Cocos2d on iPhone. Something like this

enter image description here

Where the "band" get's thinner as the line gets longer. iOS uses the same technique I'm aiming for in the Mail.app, pull to refresh.

First of all, is there a name for this kind of thing?

My first thought was to plot a point on the radius of the starting and ending circles based on the angle between to the two, and draw a quadratic bezier curve using the distance/2 as a control point. But I'm not a maths whizz so I'm struggling to figure out how to place the control point which will adjust the thickness of the path.

But a bigger problem is that I need to fill the shape with a colour, and that doesn't seem to be possible with OpenGL bezier curves as far as I can tell since curves don't seem to form part of a shape that can be filled.

So I looked at using a spline created using a point array, but that opens up a whole new world of mathematical pain as I'd have to figure out where all the points along the edge of the path are.

So before I go down that rabbit hole, I'm wondering wether there's something simpler that I'm overlooking, or if anyone can point me towards the most effective technique.

1
opengl-escocos2d-iphone
Just a thought: I don't think you need splines/bezier here. Look at the curvature, it looks like a small part of a very large circle, which runs through the the very top and bottom of each end point circle. So perhaps you can find a way to "stamp out" the squeezed part with circles. The more the two end points are stretched apart, the smaller the radius of the stamp circles. – LearnCocos2D
Cheers, Although looking closer at the default iOS "pull to refresh" blob thing, it's definitely not using that approach. But I'll gove your suggestion some investigation. – gargantuan
Did you find a name for this thing? – Markus Rautopuro
Nope - which I guess presents us with a golden opportunity to leave our mark on history. May I suggest - Booger™ – gargantuan

1 Answers

2
votes

I'm not sure about a "common" technique that people use, other than calculating it mathematically, but this project, SlimeyRefresh, is a good example of how to accomplish this.