Processing 3.0でイージングマウスを使用した描画

Question

私は円のような線の助けを借りて滑らかな描画ツールを作成しようとしています。this。 私は基本を終わらせましたが、私のコードにはいくつかの問題があります。それだけでスムーズに描画するための弾性摩擦を与えるよう

Spring2D s1; 

float gravity = 0; 
float mass = 4.0; 

void setup() { 
    frameRate(60); 
    size(640, 360); 
    fill(255, 126); 
    // Inputs: x, y, mass, gravity 
    s1 = new Spring2D(0.0, width/2, mass, gravity); 
    } 

void draw() { 
    s1.display(mouseX, mouseY); 
    s1.update(mouseX, mouseY); 
    } 

class Spring2D { 
    float vx, vy; // The x- and y-axis velocities 
    float x, y; // The x- and y-coordinates 
    float gravity; 
    float mass; 
    float radius = 10; 
    float stiffness = 0.7; 
    float damping = 0.5; 

    Spring2D(float xpos, float ypos, float m, float g) { 
    x = xpos; 
    y = ypos; 
    mass = m; 
    gravity = g; 
    } 

    void update(float targetX, float targetY) { 
    float forceX = (targetX - x) * stiffness; 
    float ax = forceX/mass; 
    vx = damping * (vx + ax); 
    x += vx; 
    float forceY = (targetY - y) * stiffness; 
    forceY += gravity; 
    float ay = forceY/mass; 
    vy = damping * (vy + ay); 
    y += vy; 
    } 

    void display(float nx, float ny) { 
    if (mousePressed == true) { 

    background(0); 

    stroke(40, 255, 150); 
    line(x, y, nx, ny); 


    noStroke(); 
    fill(255, 130, 40); 
    ellipse(x, y, 5, 5); 

    } else { 
    background(0); 
    } 
    } 
} 

は、私がガイドとして緑色の文字列（行）を使用します。

は、ここで私が働いているスケッチのコードです。キャンバスをクリックすると表示され、マウスが放されると消えます。マウスの座標ではなく、オレンジ色の点に描画（x、y、nx、ny）をしたい。 （この場合、球ではなく、示唆されたような連続した線で）。

バックグラウンドを特定の色（ここでは0;黒）に設定しないと、ガイド文字列（緑色の線とオレンジ色の点）がキャンバス上に描画されるという問題があります。しかし、私はヘルパーとしてガイドとしてだけそれらを使用したい。だから、文字列線を描かずにオレンジ色の点に沿って線を描くにはどうすればよいですか？

Answer 1

フレームレートが非常に高い場合でも、マウスは実際に画面上のすべてのピクセルを通過するわけではありません。マウスの移動速度に応じて、一度に複数のピクセルずつ移動します。したがって、フレーム間で、マウスは、その2つの位置の間のすべての位置を移動することなく、ある位置から別の位置に移動することができます。

これを回避するには、現在の位置に楕円を描くのではなく、前の位置から現在の位置に線を引くことができます。

Spring2Dクラスでは、より前のの位置を記録しておく必要があります。あなたのupdate()関数内でこれらの変数を更新する必要があり

float previousX; 
float previousY; 

：あなたはちょうど2つの変数を使用することができます。

previousX = x; 
previousY = y; 

次に、あなたのdisplay()機能では、あなたは現在のポイントに前のポイントから線を描画するために、これらの変数を使用する必要があります。

strokeWeight(radius*2); 
line(previousX, previousY, x, y); 

これは、あなたが見ているポイント間のスペースを防ぐことができます。

あなたが他の質問がある場合は、自分の投稿で別の質問として投稿してください。特定のコード行についての特定の質問に、またはできるだけ少ない行まで問題を絞り込んでください。一般的な「どうやってこれをやるの？」という質問には答えにくいです。スタックオーバーフローは、より具体的に設計されています。「Xを試しましたが、Yは期待されましたが、代わりにZを取得しました」という質問があります。より具体的にしようとすると、より良い運（そしてより速い応答時間）が得られます。幸い、これは面白いプロジェクトのようです。