Mouse position freezes for the beginning of a touch input

p5.js Coding Questions
1

greetings foundation,
I’ve been working on an online drawing project with p5js and have had some trouble with touch. I noticed that when drawing a line with touchscreen it takes about a centimeter of movement from the initial touch point before changes in position start to be registered. That is, I have to move the cursor a short distance from where I first tapped before mouseX and mouseY start updating which is inconvenient for drawing smaller details.

I can replicate the issue with the chunk of code below, however, I recognize this issue might be specific to my machine and browser (surface pro 7 and chrome)

let md = false;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (md) {
    line(mouseX,mouseY,pmouseX, pmouseY)
  }
}

function mousePressed() {
  md = true;
}

function mouseReleased() {
  md = false;
}

Websites like whiteboardfox.com don’t seem to have this issue and are able to track the position of my cursor seamlessly from contact. I was wondering if there was any way to fix this in p5, but it’s likely that it’s something deeper.
Thankyou for any help!

1 Like
2

Hi @s31,

Tip: instead of using a variable md that you set to true when the mouse is pressed, you can directly use the mouseIsPressed boolean variable:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    line(mouseX, mouseY, pmouseX, pmouseY)
  }
}

I can’t replicate your issue because I don’t have a similar device, but you might want to investigate with touch related functions in p5 like touchMoved()

1 Like
3

Hi @s31,

would you please try with below example what happens …
This draws a line from start to end, resp. current and a path following the mouse while pressed/dragged … the starting and ending points of both should match.

Cheers
— mnse

let mstart;
let mcurrent;

let painter = [];

function setup() {
  createCanvas(400, 400);
}

function mousePressed() {
  mstart   = {x:mouseX,y:mouseY};
  mcurrent = {x:mouseX,y:mouseY};
  painter  = [{x:mouseX,y:mouseY}]
}

function mouseDragged() {
  mcurrent = {x:mouseX,y:mouseY};
  painter.push({x:mouseX,y:mouseY});
  
}

function mouseReleased() {
  mcurrent = {x:mouseX,y:mouseY};
}

function draw() {
  background(255);
  stroke("red");         
  if (mstart)
    line(mstart.x, mstart.y, mcurrent.x, mcurrent.y);  
  
  stroke("blue");         
  let prev; painter.forEach(function(p) { if (prev) { line(prev.x,prev.y,p.x, p.y) } prev=p; });
}
1 Like
4

Hi again, thank you both for your replies.

@josephh thanks for the tip, it’s saved a fair amount of redundant code already. Unfortunately touchMoved() seems to have the same issue as all other mouse functions for me.

@mnse thanks for this more thorough demo. When I first touch it creates a dot on the screen at the position, but still only connects to the cursor once I’ve moved it that short distance from the initial touch point. Both the red and black lines stay still until this, if my explanation isn’t making sense I could send a recording of it.

It seems that mouseX and mouseY aren’t being updated in p5js until the distance is reached, which points to it being a problem with something other than p5. I’ve been able to use touch without this issue on other websites so it might be some js thing i have to do.

Thanks again for your help so far.

1 Like
5

Hi @s31,

can’t reproduce. On my side it works well…

try here (mouse or touch)

Should look like here …
dummy

Cheers
— mnse

1 Like