Maybe one bug in the p5

p5.js Beginners
1

the code as following

let x = 50;
let y = 50;
let diameter = 100;
let bgColor = 200;

function setup() {
  createCanvas(400, 400);
  background(bgColor);
  noStroke();
}

function touchMoved() {
  print(x-diameter/2, x+diameter/2, y-diameter/2, y+diameter/2);
  if ((x-diameter/2 < mouseX < x+diameter/2) && (y-diameter/2 < mouseY < y+diameter/2)) {
    // clear();
    background(bgColor);
    fill("red");
    ellipse(x, y, diameter);
    x = mouseX;
    y = mouseY;
    // return false;
  }
  print(mouseX, mouseY);
}

I want to move the ellipse only if when the mouse is in its area, but the result is unexpected, whereever my mouse is, the ellipse will be moved. So what’s wrong with my code of any bug?

2

Unfortunately you can’t chain like that :frowning: it makes sense for people, but computers need different notation:

x-diameter/2 < mouseX && mouseX < x+diameter/2

Or

abs(x - mouseX) < diameter/2
1 Like
3

@turtle, you will need to make sure you are using the Euclidean (Pythagorean) distance formula correctly. Alternatively, you could consider using the p5.js dist() function.

See:

4

Thanks for your reply to a newbie :grinning:

1 Like
5

Thanks so much, and I learn a lot.

1 Like
6

CrHallberg.com/CollisionDetection/Website/point-circle.html

1 Like
7

You are welcome. If you use your own custom formula for determining whether or not the mouse coordinates are inside the ellipse, such as a condition that relies upon the && operator, please remember to check the result carefully. In that case, doing something like this might help as a test:

circle_in_square

Make sure that dragging inside the red circle moves the shapes, but that dragging inside the blue area does not. The correct interdependent relationship between the x and y coordinates is important.

If you post your next revision of the code, we will be happy to check it.

8

Thanks for your further reply, and maybe this url http://crhallberg.com/CollisionDetection/Website/point-circle.html which recommended by warm-hearted @GoToLoop is about what you said, and yes I have noticed that my current code is not perfect. In fact, I am go to create one sketch board for my students who are with autism, cerebral palsy, Down syndrome and other disorders. I want to make a perfect one for them, but I am a newbie in programming with a little knowledge about Python and Javascript, so maybe a lot of question will come soon to you guys, thanks very very much :smiley:!
I will put my complete project on the forum as soon as it is finished :hugs:.

2 Likes
9

Yes, indeed, it is about that topic, which is appropriate for this task. :smile:

EDIT (April 16, 2021) …

Oh, since the subject of chaining came up here, you might be interested in knowing that Python would interpret this as chaining while JavaScript would not:

x-diameter/2 < mouseX < x+diameter/2
1 Like