処理：楕円形のマウスが重なりなく続きます

Question

私はProcessingの完全な初心者です。マウスの軌跡に沿って、重なり合わない辺に触れながら楕円形の行を取得しようとしています。

私の最初の運動はラインを使用して、配列内のマウスの履歴を追跡することでした、コメントアウト行も同様に各インデックスに楕円を追加します。

ArrayList <PVector> history; 
float preX; 
float preY; 

void setup() { 
    size(1024, 1024); 
    history = new ArrayList <PVector>(); 
} 

void draw() { 
    background(255); 

    for(int i=1; i<history.size(); i++){ 
    //ellipse(history.get(i).x, history.get(i).y, 50,50); 

     PVector pointA = history.get(i-1); 
     PVector pointB = history.get(i); 
     line(pointA.x, pointA.y, pointB.x, pointB.y); 
    } 
} 

void mouseDragged() { 
    preX= mouseX; 
    preY= mouseY; 
    history.add(new PVector(mouseX,mouseY)); 
} 

私は半径変数を定義すべきだと思います現在のマウス位置とマウス履歴に沿って描かれた最後の楕円の間の距離を計算するためにdist（）を使用し、ifステートメントを使用してその距離==半径* 2の場合にのみ楕円を描画します。それを処理コードに変換しようとします。誰かが私を始めるのを助けることができる？私は他の場所でヒントを見つけるのに苦労している - 正しい方向へのプッシュだけでも大いに感謝されるだろう！

Answer 1

半径変数を定義し、現在のマウス位置とマウスの履歴に沿って描かれた最後の楕円との距離を計算するためにdist（）を使用し、if文を使用して楕円その距離==半径* 2

これは非常に良い計画のようです。私があなたに与えることができる最高のアドバイスはbreak your problem down into smaller piecesであり、一度に1つずつ取り上げます。

たとえば、ハードコードされた円をどこかに示している基本的なスケッチから始めて、マウスとの間の距離をプリントアウトできますか？その上に構築します。円は通常赤ですが、マウスが一定の距離にあるときは緑に変わりますか？今度はそれを作って緑色に変わると新しいサークルを描くことができますか？

ヒント：距離が半径と正確に等しいかどうかをチェックすると、非常に小さな位置のセットしかチェックされていないため、マウスはおそらく正確ではありません。代わりに、おそらく距離が半径の外にあるかどうかをチェックしたいと思うでしょう。 this collision detection tutorialが役に立ちます。

Answer 2

void mouseDragged() { 
    if(dist(preX,preY,mouseX,mouseY)>=50){ 
    float angle=atan2(mouseX-preX,mouseY-preY); 
    preX+=sin(angle)*50; 
    preY+=cos(angle)*50; 
    history.add(new PVector(preX,preY)); 
    } 
}