Mouse precision and smooth drawing

Helllo!
In p5.js you have access to two sets of variables related to mouse position - mouseX/mouseY and pmouseX/pmouseY. I try to make an app where an user can draw some thing on the screen using mouse or drawing tablet. Due to structure of standard p5.js script i can grab mouse coordinates (current and previous) every frame (in the draw() routine) and draw, for example, a line using these coordinates. Because of the only-once-every-frame constraint, if the user is drawing something fast, lines are ugly (especially comparing to Krita or similar drawing software). Is there any way to grab intermediate mouse coordinates to make lines more smooth? How does it work in more standard drawing software, where drawing tools has, for example, subpixel precision and much finer temporal resolution?
Thank you in advance!
Bartosz

1 Like

As far as I know you won’t get more accurate than the frame-rate you set for the sketch. A better solution is to interpolate the points to get smooth lines. For this you need to capture all the points drawn by the user in a stroke.

Take a look at curvePoint()

2 Likes

I saw this some time ago. Lazy-brush. I’ve not tried to use it in P5 or implement it in P5 but it sure makes for smooth controlled drawing.

2 Likes