Can you ignore mousePressed when drawing during mouseDragged?

jacorre

When dragging with the mouse/touch, I am drawing a line on the canvas. However, if I click/touch without dragging it's drawing a dot on the canvas. Is there any way to stop that dot from appearing? Please see my example on CodePen. Thank you!

jeremydouglass

@jacorre -- I think you might be dragging slightly on accident; when I click on your CodePen example no dot is drawn. Only when I drag does it draw.

If I'm wrong then perhaps this is specific to your input device, platform, or browser. I tested on a Mac desktop computer w/mouse, Chrome browser.

There is an easy way to test if I'm right -- on a mouseDragged event, print mouseX/mouseY and pmouseX pmouseY. They shouldn't be exactly the same. If you are clicking and a dot draws, but the mouse / pmouse variables are the same, something is wrong.

If they are drags but you don't want them to happen, you might want to create a kind of sensitivity measure to suppress small drags and only start drawing once the drag is at a minimum distance from the click-point -- then draw from then on.

jacorre

Thanks for your response. I guess iOS treats it differently.

I'm on Windows 7 using Chrome as well as Android using Chrome and a mouse press/touch draws a dot, though I only want drawing when dragging (mouse/touch).

jeremydouglass

Did you try the test I suggested?

on a mouseDragged event, print mouseX/mouseY and pmouseX pmouseY. They shouldn't be exactly the same.

Were the numbers the same, or different?

colouredmirrorball

Win 10, firefox, no lines appear when clicking. The lines do not appear aligned with the mouse though. Is that normal?

jeremydouglass

@colouredmirrorball -- that's unrelated -- it is just an effect of the easing variable. Change it to 0.99 for that behavior to go away.

jeremydouglass

@jacorre -- What I'm saying is, add this line as line 33:

print(x,y,px,py);

• When I click, it prints nothing (because mouseDragged wasn't called).
• When I drag, no matter how little, it always prints two different variable pairs, because I dragged a little.

So, either you are dragging a little with your input device, or you have found a bug (and mouseDragged shouldn't be called at all).

Check it out:

http://codepen.io/anon/pen/bBQOKV?editors=0011

jacorre

Sorry the delay in my response, I was very busy yesterday/today.

In the mousePressed function, if px/py = pmouseX/pmouseY, then it appears that clicking/touching doesn't create a dot. However, it continues to draw from the prior point. I want new lines each time.

That's why I have to set px/py to mouseX/mouseY. Doing that draws a new line each time. But it also creates a dot where I touch. When clicking it creates a dot on the first click but not subsequent clicks.

jeremydouglass

I'm sorry, I no longer understand your question. You originally said:

I click/touch without dragging it's drawing a dot on the canvas.

and now

It also creates a dot where I touch.

As I've tried to show, that isn't happening. The dot happens only on drag, not touch. If it is happening only on touch, it is a bug.

Did you try clicking on my codepen example? Did you get a dot? What did the Console tab readout say when you got a dot -- were x and px the same, or different?

jacorre

On your code pen example, on my android phone using Chrome, when I touch the first time without dragging it creates a dot. Subsequent touches and dragging continues adding to the same line. Will check console when on laptop since it's not showing it on my phone.

But notice you use pmouseX and pmouseY for px and py in mousePressed, where my example uses mouseX and mouseY. That's so it will draw distinct lines where you touch/drag instead of it being one continuous line.

In my example, it draws a dot each time you touch without dragging so it could be a bug as you have stated.

jeremydouglass

@jacorre -- interesting. This could be a bug, then. I'll look forward to hearing what you get back on the console.

In a separate issue: I don't believe that the using mouseX or pmouseX actually matters there -- setting it to either should have no practical impact on the sketch (it changes the initial draw segment by ~1px). When I change your codepen sketch between the two there is no visible impact. Do it either way, then focus on testing this dot issue.

jacorre

On my laptop (Windows 7, Chrome), the x and px values were the same on mouse click. On my Android phone using Chrome, it doesn't show the console so I alerted the values instead and they are the same there as well on touch.

When mousePressed assigns pmouseX and pmouseY to px and py, no dot appears when clicking. When dragging, a line is drawn as expected. However, when touching, it draws a dot the first time and then continues to draw from the prior point every touch/drag after that.

If you instead assign mouseX and mouseY to px and py, you no longer get the continuous line being drawn, but it draws a dot everywhere you touch or a line if you touchmove. When using the mouse, it works as expected, only drawing the line when dragging, no dots on click.

So do we have a bug when touch is involved?

jeremydouglass

Thanks for looking into it.

To summarize my understanding of your tests, everything is as expected for mouse, but touch results are not the same in surprising ways -- eg a drag event is drawing something on what should be a click event.

I suspect this is not a bug, but a set of browser specific events being returned on touch.

See the p5.js entries for Events > Touch:

• https://p5js.org/reference/#group-Events

e.g. touchStarted():

Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add "return false" to the end of the method.

This is getting out of my area of expertise and ability to test. I'm hoping that someone else on the forum with more p5.js experience can help if defining touch event functions doesn't resolve it for you.

jacorre

Thank you for your help!