自由に見える楕円や円を描くには？

Question

私の質問は、フリーハンドのように見える線を描画するための様々な技術を必要とする：

How do you draw like a Crayon?

具体的にスティーブHanovは、この優れたblog entryを掲載しました。

これから、私はベジェ曲線を使ってフリーハンドラインの見栄えの良いアルゴリズムを実装することができました。しかし、私はフリーハンドの楕円を実装する方法についていません。理想的には、他の楕円描画呼び出しと同様に境界線として使用するための矩形を与えたいと思います。しかし、私はそれを非常にフリーハンドに見せたい。

はこれまでのところ、最高の私はこれが出ている：

- (UIBezierPath*) freehandEllipseFromRect:(CGRect) rect { 

    // freehand ellipses need a lil more height 
    rect = CGRectMake(rect.origin.x, rect.origin.y-5, rect.size.width, rect.size.height+10); 

    UIBezierPath* path = [UIBezierPath bezierPath]; 


    CGPoint topMidPoint = CGPointMake(rect.origin.x + (rect.size.width/2), rect.origin.y); 
    CGPoint bottomMidPoint = CGPointMake(rect.origin.x + (rect.size.width/2), rect.origin.y+rect.size.height); 


    // random point along bottom quarter of height, cause makes it look better 
    CGFloat randomY = (((CGFloat) (arc4random() % RAND_MAX)/RAND_MAX)) * (rect.size.height/4); 
    CGPoint leftControlPoint = CGPointMake(rect.origin.x-(rect.size.width), rect.origin.y+(rect.size.height-randomY)); 


    // another random y; 
    randomY = (((CGFloat) (arc4random() % RAND_MAX)/RAND_MAX)) * (rect.size.height/4); 
    CGPoint rightControlPoint = CGPointMake(rect.origin.x+(rect.size.width*2), rect.origin.y+(rect.size.height-randomY)); 

    CGFloat overshootValueX = (((CGFloat) (arc4random() % RAND_MAX)/RAND_MAX)) * 4; 
    CGFloat overshootValueY = (((CGFloat) (arc4random() % RAND_MAX)/RAND_MAX)) * 6; 
    [path moveToPoint:CGPointMake(topMidPoint.x+overshootValueX, topMidPoint.y)];   
    [path addQuadCurveToPoint:bottomMidPoint controlPoint:leftControlPoint]; 

    // random value to overshoot 
    overshootValueX = (((CGFloat) (arc4random() % RAND_MAX)/RAND_MAX)) * 20; 
    overshootValueY = (((CGFloat) (arc4random() % RAND_MAX)/RAND_MAX)) * 4; 
    [path addQuadCurveToPoint:CGPointMake(topMidPoint.x-overshootValueX, topMidPoint.y-overshootValueY) controlPoint:rightControlPoint]; 
    return path; 
} 

結果は以下のようになります。それが上に指摘どのように私は好きではない

、すべての私の試みにもかかわらず、私はそれをはるかに良くすることはできません。さらに、私はカーブがあまり完璧に見えず、唯一の "フリーハンド"な部分としてオーバーハングに頼っていないのが好きです。私は2つのクワッドカーブがちょうど行く間違った方法だと思います.....

多分4弧ですか？

誰かが私のために別の解決策やサンプルコードを持っていますか？ （言語は問題ありません）

Answer 1

この質問は長い間開いていますので、私はそれを試してみましょう。 2つの部分があります。（1）パスが完璧に見えないようにする。 （2）手を引くような道を撫でる。 （1）については、物事から細分してください。それを100程度のコントロールポイントから作成し、ゆっくり変化するラッピング機能でそれらを歪めます。 （2）ゆっくりと変化する連続的な厚さと角度をパスに割り当てます。多少のノイズを加えるかもしれません。 Perlinのノイズをよく見ている人間にとって、驚くべきノイズです。また、他の人がどのようにそれを行い、Photoshopでパスを作成し、それらをストロークさせるかを見ることは常に良いアイデアです。自然に見えるようにするオプションがあります。

Answer 2

個人的に私はこのように、パラメトリックあなたの楕円を定義します

x=(width*cos(t)/2)+centerx; 
y=(height*cos(t)/2)+centery; 

が、その後小さな乱数

（パラメトリック）曲線に法線ベクトルを見つける機能を作る

を生成する関数を作ります

x=width*cos(t); 
y=height*sin(t); 
normal=UnitVector(x,y); 

あなたの楕円のすべての点に対して、その点の法線を小さい乱数でスケーリングしてオフセットします。

3次補間を使用して点を通って曲線を描きます。