Jump to content

How to smooth a line drawn using mouse events?


Recommended Posts

  • 6 months later...

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/








Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...