How to smooth a line drawn using mouse events?

[mcfarljw]

I'm messing around with doing some event based mouse drawing, but when I try use the the graphics quadraticCurveTo things start going a bit haywire. I've attached a screenshot and jsbin with a working example. How can I get it to properly smooth the line using a curve?

 

Example: https://jsbin.com/sibufequlo/edit?js,output

[xerver]

Looks like it only happens when the mouse moves quickly. The fix is probably to smooth out your points. If you have 2 points that are far away from eachother you need to create a couple interpolation points to smooth the line.

[spacezed]

Hi, thanks for share your code, i have solved with this change.

Comment this line:

#marker.quadraticCurveTo(.....

and write it:

marker.drawCircle(midPoint.x, midPoint.y, size);

 

https://jsbin.com/pakaxumofu/edit?html,css,js,output

[Kalith]

Well I've been experimenting with drawing a bit for my own project, might as well share. I took Ivan's advice and didn't use Pixi.Graphic for the actual drawing but a new canvas overlayed over the Pixi rendering window. When you release the mouse, it take the texture from that canvas, construct a sprite and add that to pixi. result looks something like this: http://wottactic.tk/demo3.html.

Essentially works, but with a few changes you can do a lot better:

http://wottactic.tk/demo6.html: First I only record a move every 10ms at the most, you don't notice that really. It decreases the load. Less points is less data to send over the network if your application requires that. Instead of drawing a direct line between my last position and new position I draw a line from my last position to about 1/3 the distance to the new position. This smooths it out and feels A lot more natural. Note the 1/3 is something you can play with and is also sort of tied with frequency at which you update, which is the main reason I wanted to fix it at about 10ms for every system.

http://wottactic.tk/demo5.html: this one is sort of a failed experiment, so feel free to ignore. The idea is that instead of drawing a straight line through all the points, I draw a cubic spline, idea from here https://www.particleincell.com/2012/bezier-splines/, see the example near the button first. Don't get me wrong it works, but it adds a lot of complication and I can't really tell the difference:

http://wottactic.tk/demo7.html: This one is a sort of artsy variation. The slower you go the thinner the line, the faster you go, the thicker, it creates a little bit of an inky effect.

Feel free to use an idea's or code here for your own projects.

Also if you're trying something similar, this is interesting read. It goes into some of the different techniques you could use: http://perfectionkills.com/exploring-canvas-drawing-techniques/