Improving accuracy of mouseDragged() and mouseReleased() - noob question

gergelysuto

Hello, I am a beginner with p5.js and am trying to create a basic patch where I can move around a circle on the canvas by clicking on it with the mouse. Releasing the mouse should "throw" the circle in the direction of the last mouse movement. From what I can see it is not that my patch is clearly wrong, it is just not very accurate. With the mouse pressed, quicker movements make the mouse "lose" the circle. As for mouse release, it works maybe once every 10 times. Thank you for all suggestions about the code (fwiw this is something that seemed to work in its most basic form and without any issue in openFrameworks) best, gergely

var x;
var y;
var speedX=0;
var speedY=0;
var moveable= false;
var radius=30;



function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeWeight(2);
  x= width/2;
  y= height/2;
}

function draw(){
  background(127);
  x+=speedX;
  y+=speedY;

  ellipse(x,y,radius,radius);
}


function mouseDragged(){
  var d= dist(mouseX,mouseY,x,y);
  if (d<radius){
    moveable= true;
    x= mouseX;
    y= mouseY;
  }
}

function mouseReleased(){
  if (moveable= true){
    speedX=mouseX-pmouseX;
    speedY=mouseY-pmouseY;
    print(speedX);
  }
}

GoToLoop

Yikes! From C++ to JS can be performance traumatic, huh? >:)

p5.js is a re-thinking of how Processing would be shaped today where JS reigns and Java isn't that cool anymore. Unfortunately performance isn't their 1st priority. And I'd daresay not even 2nd! :-q

Back to the problem, have you considered mouseMoved()?
http://p5js.org/reference/#/p5/mouseMoved

It is similar to mouseDragged(). But only triggers when mouseIsPressed is false. *-:)

gergelysuto

Hi GoToLoop, thank you for the answer. I had to play around with all the mouse___() functions to get familiarized. (For instance it seems like mouseClicked() and mouseReleased() do the exact same thing when evaluating mouseIsPressed, output one "false" message at mouse release.) As for my code, I have eventually put it to work. It is still not always clear which function specific parts of the code should belong to...

var x;
var y;
var speedX=0;
var speedY=0;
var moveable= false;
var radius=30;

function setup(){
  createCanvas(windowWidth, windowHeight);
  strokeWeight(2);
  x= width/2;
  y= height/2;
}

function draw(){
  background(127);
  x+= speedX;
  y+= speedY;
  ellipse(x,y,radius,radius);
}

function mousePressed(){
  var d= dist(mouseX,mouseY,x,y);
  if (d<radius){
    moveable=true;
  }
  else{
    moveable=false;
  }
}

function mouseDragged(){
  if (moveable==true){
    x= mouseX;
    y= mouseY;
    speedX= mouseX-pmouseX;
    speedY= mouseY-pmouseY;
  }
}

function mouseReleased() {
  if (moveable==true){
    moveable=false;
  }
 }

GoToLoop

Nice you've got it right. As a bonus I've simplified your mouse event functions: :bz

function mousePressed() {
  moveable = dist(mouseX, mouseY, x, y) < radius;
}

function mouseDragged() {
  if (!moveable)  return;

  x = mouseX, y = mouseY;
  speedX = x - pmouseX, speedY = y - pmouseY;
}

function mouseReleased() {
  moveable = false;
}

gergelysuto

Ah, and of course the usual mistake of "=" instead of "==" in the if statement;)

gergelysuto

Quite simpler, really:) thank you!