p5.js Canvas-Zeichenpfad mit Ellipsen

Question

Ich arbeite an einer Echtzeit-Zeichensatz-Webanwendung mit socket.io, node.js und p5.js. Ich habe Probleme beim Erstellen einer weichen Linie, wenn die Maus gezogen wird. Wenn die Maus zu schnell gezogen wird, befindet sich zwischen jeder Ellipse eine Leerspur. Das Endziel ist hier, einen glatten Pfad zu erstellen. Hier sind die Dinge, die ich versucht habe bisher:

Versuch 1:

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

Versuch 2:

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

Hier ist ein Bild von dem, was das Problem wie folgt aussieht: canvas drawing incomplete path image

jede Rückmeldung ist willkommen; Vielen Dank!

Answer 1

Sie könnten die Variablen pmouseX und pmouseY verwenden, die die vorherige Position des Cursors enthalten. Verwenden Sie diese Option, um eine Linie von der vorherigen Position zur aktuellen Position zu zeichnen, um den leeren Bereich zwischen Mausereignissen auszufüllen.

Von 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

Kevins Antwort ist groß, weil es effizienter sein wird Linien statt vielen Ellipsen zu zeichnen. Sie sollten auch prüfen:

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

Die oben sollten Sie einen glatten Weg helfen zu ziehen und einen dickeren Strich Einstellung sieht aus wie viele gefüllte Ellipsen verbunden sind, die den Pfad bilden.

Wenn Sie aus irgendeinem Grund viele Ellipsen zeichnen möchten, können Sie die Position interpolieren, wenn sich die Maus schneller bewegt, und Lücken erstellen, um diese Lücken zu füllen. Für weitere Informationen und p5.js Beispiel, überprüfen Sie diese Antwort: Processing: Draw vector instead of pixels