# Mouse precision and smooth drawing

**URL:** <https://discourse.processing.org/t/mouse-precision-and-smooth-drawing/9444>\
**Category:** Coding Questions\
**Created:** [March 19, 2019, 3:41pm UTC](https://discourse.processing.org/t/mouse-precision-and-smooth-drawing/9444 "2019-03-19T15:41:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![slowking](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@slowking](https://discourse.processing.org/u/slowking)\
**Post date:** [March 19, 2019, 3:41pm UTC](https://discourse.processing.org/t/mouse-precision-and-smooth-drawing/9444/1 "2019-03-19T15:41:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [March 19, 2019, 4:05pm UTC](https://discourse.processing.org/t/mouse-precision-and-smooth-drawing/9444/2 "2019-03-19T16:05:38Z")

</div>

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()](https://processing.org/reference/curvePoint_.html)

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [March 21, 2019, 10:10pm UTC](https://discourse.processing.org/t/mouse-precision-and-smooth-drawing/9444/3 "2019-03-21T22:10:27Z")

</div>

I [saw this](https://www.reddit.com/r/javascript/comments/9paoyp/lazybrush_smooth_canvas_drawing_with_a_mouse_or/) some time ago. [Lazy-brush](https://github.com/dulnan/lazy-brush). I’ve not tried to use it in P5 or implement it in P5 but it sure makes for smooth controlled drawing.

> **[lazy-brush - smooth drawing with mouse](https://lazybrush.dulnan.net/)**
>
> Draw smooth curves and straight lines with your mouse, finger or any pointing device.