p5.jsキャンバス楕円を描くパス

Question

私はリアルタイムのキャンバス描画用Webappでsocket.io、node.js、p5.jsを使って作業しています。マウスをドラッグしたときに滑らかな線を作成するのに問題があります。マウスをあまりにも速くドラッグすると、各楕円の間に空きスペースの跡ができます。ここでの最終目標は、スムーズなパスを作成することです。ここで私はこれまで試してみましたものは以下のとおりです。

試み1：

noStroke(); 
fill(lineColor[0],lineColor[1],lineColor[2]); 
ellipse(mouseX, mouseY, lineThickness, lineThickness); 

試み2：ここでは

strokeWeight(lineThickness); 
line(mouseX,mouseY); 
stroke(lineColor[0],lineColor[1],lineColor[2]); 

されている問題がどのように見えるかの写真： canvas drawing incomplete path image

フィードバックは歓迎です。ありがとう！

Answer 1

カーソルの以前の位置を保持する変数pmouseXとpmouseYを使用できます。これを使って前の位置から現在の位置に線を引いて、マウスイベントの間の空白を埋める。 the referenceから

：代わりに、多くの楕円の線を描画する方が効率的になりますので、

// Move the mouse across the canvas to leave a trail 
 
function setup() { 
 
    //slow down the frameRate to make it more visible 
 
    frameRate(10); 
 
} 
 

 
function draw() { 
 
    background(244, 248, 252); 
 
    line(mouseX, mouseY, pmouseX, pmouseY); 
 
    print(pmouseX + " -> " + mouseX); 
 
}

<script src="https://github.com/processing/p5.js/releases/download/0.5.11/p5.js"></script>

Answer 2

ケビンの答えは素晴らしいです。あなたがスムーズにパスを描画助け、厚いストローク意志を設定する必要があります上記

• beginShape()/endShape（）
• bezierVertex()
• curveVertex()
• curvePoint()

：あなたはまたになっているはずですそれが多くの満たされた楕円が経路を形成するように接続されているように見える。

何らかの理由で多くの楕円を描画したい場合は、マウスが早く移動したときに位置を補間し、ギャップを埋めてギャップを埋めることができます。 詳細およびp5.jsの例については、この回答をご覧ください： Processing: Draw vector instead of pixels