UIBezierPath lineWidth based on UIPanGestureRecognizer's velocity - ios

Question

I'm trying to figure out how to construct a limited range of floating point values based on a UIPanGestureRecognizer's velocity. I have a minimum, or starting value of 1.0, and a maximum of 3.0 to provide a limited range for the UIBezierPath's lineWidth property.
I'm trying to figure out how to build an exponential range from 1.0 to 3.0 based accordingly on the UIPanGestureRecognizer's velocity, but am having a difficult time where I should start for mapping the values. The faster the combined x and y velocity, the smaller (down to 1.0) the lineWidth should be, and respectively the opposite up to 3.0 if the combined velocity is slower. I'm also trying to taper/smooth the line width in progress by storing a lastWidth property so the transitions aren't noticeable between subpaths.
I'd appreciate any help offered.
Working and final Code based on answer:
#property (nonatomic, assign) CGFloat lastWidth;
if (recognizer.state == UIGestureRecognizerStateChanged)
{
CGPoint velocity = [recognizer velocityInView:self.view];
CGFloat absoluteVelocity = 1000.0 / sqrtf(pow(velocity.x, 2) + pow(velocity.y, 2));
CGFloat clampedVel = MAX(MIN(absoluteVelocity, 3.0), 1.0);
if (clampedVel > self.lastWidth)
{
clampedVel = self.lastWidth + 0.15;
}
else if (clampedVel < self.lastWidth)
{
clampedVel = self.lastWidth - 0.15;
}
self.lastWidth = clampedVel;
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineCapStyle = kCGLineCapRound;
path.lineWidth = self.lastWidth;
}

Answer 1

So I'd use an inverted exponential function.
Start with your velocity, V(x,y). Your absolute velocity is obviously:
sqrt(pow(x, 2) + pow(y, 2));
We'll call this value "v."
Next, we want a value that is between 1 and 3 where 1 is the width where "v" is very high and 3 is the width where "v" is very low.
We can calculate that using the following exponential function:
- (CGFloat)getExponentialWidthForVeloctity(CGFloat)v {
if (v <= 1 / 3.0)
return 3;
CGFloat inverse = 1 / v;
return 1 + inverse;
}
Or this function that smooths it out a little bit
- (CGFloat)getExponentialRootWidthForVeloctity(CGFloat)v {
//play with this value to get the feel right
//The higher it is, the faster you'll have to go to get a thinner line
CGFloat rootConstantYouCanAdjust = 2;
if (pow(v, rootConstantYouCanAdjust) <= 1 / 3.0)
return 3;
CGFloat inverse = 1 / pow(v, rootConstantYouCanAdjust);
return 1 + inverse;
}
If that doesn't feel right, try a linear solution:
- (CGFloat)getLinearWidthForVelocity(CGFloat)v {
//Find this value by swiping your finger really quickly and seeing what the fastest velocity you can get is
CGFloat myExpectedMaximumVelocity = 1000;
if (v > myExpectedMaximumVelocity)
v = myExpectedMaximumVelocity;
return 3 - 2 * (v / myExpectedMaximumVelocity);
}
And finally, as a bonus, try this sqrt based function that you might find works nicely:
- (CGFloat)getSqrtWidthForVelocity(CGFloat)v {
//find the same way as above
CGFloat myExpectedMaximumVelocity = 1000;
if (v > myExpectedMaximumVelocity)
return 1;
return 3 - 2 * sqrt(v) / sqrt(myExpectedMaximumVelocity);
}
I'd be curious to know which works best! Let me know. I have a lot more functions up my sleeve, these are just some really simple ones that should get you started.