Draw a path with variable width in iOS

Question

I am working on a writing application, My writing is working fine, but what I want to implement is variable stroke width, so that the writing is very realistic and intuitive, as done by "BAMBOO" and "PENULTIMATE" application.

Firstly I want to tell you what I have tried.

1) In iOS, their is no pressure detection, or velocity detection according to my research. For velocity detection, I have to use OPENGL.

2) Due to these limitations, I tried using the method given in this tutorial which is pretty straight forward.Here is the link http://mobile.tutsplus.com/tutorials/iphone/ios-sdk-advanced-freehand-drawing-techniques/

3) This works fine, But here what happens is that, the width increases as I move faster and decreases, as I move slower. But I want is the opposite effect, that is the width should increase as I move slower and when I move fast, the thickness should only be seen only at the edges and for the whole line.

Here are the screenshot of the BAMBOO app and my app.

1)BAMBOO app

In the above image, the line is drawn with speed and you will see that the thickness is only at edges.

2) MY APP

Here you will see that the line is thinner at edges and thick every where else.

So, here are my doubts

1) Is their any better approach to fulfil my requirement, other than what I have tried.

2) If what I have tried, is correct approach to tackle the problem, then what changes I need to make to achieve the desired effect.

Regards Ranjit

Answer 1

The answer to how to reverse the width behaviour and (and even the same question as yours) is right there in the link that you posted. All I did was to search for the word "width"

The question (my highlighting is not part of the quote):

The final version of this seems to work opposite of the first version. I would like to have the line thicker as the user moves slower and not thinner. Where do I change the code to inverse the final varying thickness to perform or like a pen? Meaning the slower the user moves the thicker or more ink the pen puts down... Thanks! Great tutorials, btw...

And the answer:

thanks for the great tutorial!

with these changes i got the opposite line width cahnge effect:

#define CAPACITY 100
#define FF 20.0
#define LOWER 0.01
#define UPPER 1.5

float frac1 = clamp(FF/len_sq(pointsBuffer[i], pointsBuffer[i+1]), LOWER, UPPER); // ................. (4)
float frac2 = clamp(FF/len_sq(pointsBuffer[i+1], pointsBuffer[i+2]), LOWER, UPPER);
float frac3 = clamp(FF/len_sq(pointsBuffer[i+2], pointsBuffer[i+3]), LOWER, UPPER);

Another search in the same link for the text "float frac1 =" shows that this change should be applied to lines 76-78 (somewhere inside touchesMoved:withEvent: in the code from the article)

Answer 2

In your touchesBegan: method, UItouch is supplied.
UITouch has below instance functions,

– locationInView:
– previousLocationInView:

And below property

@property(nonatomic, readonly) NSTimeInterval timestamp

From the above, i think you can easily calculate velocity.I didn't go through any of mentioned links.I just want to give you an idea of how to calculate velocty based on touch object.