Problems with dist function in p5js - p5.js

Question

I'm currently trying to make a basic platformer game, I'm trying to use a dist function to detect if the player is touching the ground or not. I need to just detect the Y coors of the ground and player. Any suggestions?
let x2,y2;
let x,y;
function setup() {
createCanvas(400, 400);
x=200;
y=200;
x2=200;
y2=200;
}
function draw() {
background(220);
ellipse(x,y,20,20)
rect(x2-300,y2+150,500,200);
if(dist(x,x2,y2,y)==140){
y=y+0;
}else{
y=y+5;
}
if(keyIsPressed&&keyCode === LEFT_ARROW){
x=x-2;
}
if(keyIsPressed&&keyCode === RIGHT_ARROW){
x=x+2;
}
}

Answer 1

You can use a more permissive threshold condition like a range instead of the distance being exactly 140 (e.g. >= 140).
Here's a version of your code with this minor tweak added:
let x2, y2;
let x, y;
function setup() {
createCanvas(400, 400);
x = 200;
y = 200;
x2 = 200;
y2 = 200;
}
function draw() {
background(220);
ellipse(x, y, 20, 20);
rect(x2 - 300, y2 + 150, 500, 200);
if (dist(x, x2, y2, y) >= 140) {
y = y + 0;
} else {
y = y + 5;
}
if (keyIsPressed && keyCode === LEFT_ARROW) {
x = x - 2;
}
if (keyIsPressed && keyCode === RIGHT_ARROW) {
x = x + 2;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
I do have a few more suggestions:
for an initial game prototype this ok, but for a more complex game using dist() (which uses sqrt()) behind the scenes could get computationally expensive. Since you only need to compare y coordinates you could implement this difference directly (if(y - y2 >= 140)).
additionally y = y + 0 doesn't add anything useful, but it does
read and write the y variable which again, takes a bit of time.
This won't impact performance that much and you should always
optimise at the end if you need to and not sacrifice code
readability, however less code means less to read and maintain in the
future. The more complex the programs you write will get the more
time you'll spend reading (and understanding) code rather than
writing it.
on above note I recommend also formatting code (in the
p5.js web editor Edit > Tidy Code does this for you, otherwise
there could be a similar option in your current code editor).
be kind to your future self and add code comments to explain what/why/how you did things. It will help a lot (imagine having to revisit your code after a few weeks/months and not remembering why you wrote things in a certain way).
Here's a modified version of your code with a few of the suggestions above:
let x2, y2;
let x, y;
function setup() {
createCanvas(400, 400);
x = 200;
y = 200;
x2 = 200;
y2 = 200;
}
function draw() {
background(220);
ellipse(x, y, 20, 20);
rect(x2 - 300, y2 + 150, 500, 200);
if(y - y2 < 140) {
y = y + 5;
}
if (keyIsPressed && keyCode === LEFT_ARROW) {
x = x - 2;
}
if (keyIsPressed && keyCode === RIGHT_ARROW) {
x = x + 2;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
Have fun learning !