I have canvas drawing tab and want lineWidth to be based on distance between two last mousemove coordinate updates. I will make translation of distance to width myself, I just need to know how to get distance between those points (I already have coordinates of those pointes).
You can do it with pythagoras theorem
If you have two points (x1, y1) and (x2, y2) then you can calculate the difference in x and difference in y, lets call them a and b.
https://i.stack.imgur.com/Vrq80.png
var a = x1 - x2;
var b = y1 - y2;
var c = Math.sqrt( a*a + b*b );
// c is the distance
Note that Math.hypot
is part of the ES2015 standard. There's also a good polyfill on the MDN doc for this feature.
So getting the distance becomes as easy as Math.hypot(x2-x1, y2-y1)
.
Math.hypot()
to calculate the distance when performances matters. It is about 100 times slower.
http://en.wikipedia.org/wiki/Euclidean_distance
If you have the coordinates, use the formula to calculate the distance:
var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );
If your platform supports the **
operator, you can instead use that:
const dist = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
To find the distance between 2 points, you need to find the length of the hypotenuse in a right angle triangle with a width and height equal to the vertical and horizontal distance:
Math.hypot(endX - startX, endY - startY)
i tend to use this calculation a lot in things i make, so i like to add it to the Math object:
Math.dist=function(x1,y1,x2,y2){
if(!x2) x2=0;
if(!y2) y2=0;
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}
Math.dist(0,0, 3,4); //the output will be 5
Math.dist(1,1, 4,5); //the output will be 5
Math.dist(3,4); //the output will be 5
Update:
this approach is especially happy making when you end up in situations something akin to this (i often do):
varName.dist=Math.sqrt( ( (varName.paramX-varX)/2-cx )*( (varName.paramX-varX)/2-cx ) + ( (varName.paramY-varY)/2-cy )*( (varName.paramY-varY)/2-cy ) );
that horrid thing becomes the much more manageable:
varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);
The distance between two coordinates x and y! x1 and y1 is the first point/position, x2 and y2 is the second point/position!
function diff (num1, num2) { if (num1 > num2) { return (num1 - num2); } else { return (num2 - num1); } }; function dist (x1, y1, x2, y2) { var deltaX = diff(x1, x2); var deltaY = diff(y1, y2); var dist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)); return (dist); };
Math.abs
instead of diff
.
diff
as squaring a number will always result in a positive number. If x1 - y1
is negative, (x1 - y1) ^ 2
is positive still.
Here's a quick one-liner to find the distance between (x1, y1)
and (x2, y2)
const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);
Here is a short runnable demo:
const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1); var x1 = 1 var y1 = 5 var x2 = 4 var y2 = 5 var d = distance(x1, y1, x2, y2) console.log(`The distance between (${x1}, ${y1}) and (${x2}, ${y2}) is ${d}`)
Success story sharing
x1 - x2, y1 - y2
orx2 - x1, y2 - y1
?7 - 5 = 2
or5 - 7 = -2
won't matter.-2 * -2 = 4
2 * 2 = 4