Closest point of a polygon to another point

Developer
Sylvain Reucherand
Size
3,203 Kb
Views
2,024
  1. Closest point of a polygon to another point Previews
  2. Closest point of a polygon to another point HTML Codes
  3. Closest point of a polygon to another point CSS Codes
  4. Closest point of a polygon to another point JS Codes

How do I make an closest point of a polygon to another point?

Formula to calculate the coordinates of the closest point of a polygon to another point outside of that polygon. Cf. https://diego.assencio.com/?index=ec3d5dfdfc0b6a0d147a656f0af332bd. What is a closest point of a polygon to another point? How do you make a closest point of a polygon to another point? This script and codes were developed by Sylvain Reucherand on 01 February 2023, Wednesday.

Closest point of a polygon to another point Previews
IQ Test

Closest point of a polygon to another point - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Closest point of a polygon to another point</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Closest point of a polygon to another point - Script Codes CSS Codes

html,
body { background-color: beige;	background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDlweCIgaGVpZ2h0PSI0OXB4IiB2aWV3Qm94PSIwIDAgNDkgNDkiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDF7ZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS1taXRlcmxpbWl0OjEwO308L3N0eWxlPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxMC43IiB5MT0iMSIgeDI9IjEwLjciIHkyPSI0OSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIyMC43IiB5MT0iMSIgeDI9IjIwLjciIHkyPSI0OSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIzMC43IiB5MT0iMSIgeDI9IjMwLjciIHkyPSI0OSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI0MC43IiB5MT0iMSIgeDI9IjQwLjciIHkyPSI0OSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxIiB5MT0iNDAuNSIgeDI9IjQ5IiB5Mj0iNDAuNSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxIiB5MT0iMzAuNSIgeDI9IjQ5IiB5Mj0iMzAuNSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxIiB5MT0iMjAuNSIgeDI9IjQ5IiB5Mj0iMjAuNSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxIiB5MT0iMTAuNSIgeDI9IjQ5IiB5Mj0iMTAuNSIvPjxsaW5lIGNsYXNzPSJzdDEiIHgxPSIwLjUiIHkxPSIwIiB4Mj0iMC41IiB5Mj0iNDkiLz48bGluZSBjbGFzcz0ic3QxIiB4MT0iMCIgeTE9IjAuNSIgeDI9IjUwIiB5Mj0iMC41Ii8+PC9zdmc+); background-position: calc(50% - 25px) calc(50% - 25px); background-repeat: repeat; margin: 0; padding: 0;
}

Closest point of a polygon to another point - Script Codes JS Codes

const getClosestPoint = (a, b, point) => {	const s = [];	const ab = [b[0] - a[0], b[1] - a[1]];	const ap = [point[0] - a[0], point[1] - a[1]];	const ls = (ap[0] * ab[0] + ap[1] * ab[1]) / (ab[0] * ab[0] + ab[1] * ab[1]);	if (ls <= 0) {	s[0] = a[0];	s[1] = a[1];	} else if (ls >= 1) {	s[0] = b[0];	s[1] = b[1];	} else {	s[0] = a[0] + ab[0] * ls;	s[1] = a[1] + ab[1] * ls;	}	return s;
}
const getDistance = (a, b) => {	const dx = a[0] - b[0];	const dy = a[1] - b[1];	return Math.sqrt(dx * dx + dy * dy);
};
const getIntersectionToPolygon = (polygon, point) => {	let length = polygon.length - 1;	let intersection = getClosestPoint(polygon[polygon.length - 1], polygon[0], point);	while (length--) {	const _point = getClosestPoint(polygon[length], polygon[length + 1], point);	if (getDistance(_point, point) < getDistance(intersection, point)) {	intersection = _point;	}	}	return intersection;
};
const polygon = [[0, 0], [37, 70], [120, -50], [-180, 48], [-105, 82]];
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
let point = [0, 0];
const drawProjection = (p1, p2) => {	context.save();	context.beginPath(); context.moveTo(getNormalizedCoords(p1)[0], getNormalizedCoords(p1)[1]); context.lineTo(getNormalizedCoords(p2)[0], getNormalizedCoords(p2)[1]); context.setLineDash([1, 10]);	context.stroke(); context.restore();
}
const drawPoint = (point, color = 'tomato') => {	context.beginPath(); context.fillStyle = color;	context.arc(getNormalizedCoords(point)[0], getNormalizedCoords(point)[1], 5, 0, 2 * Math.PI);	context.fill();
};
const drawPolygon = (polygon) => { context.save();	context.beginPath(); context.moveTo(getNormalizedCoords(polygon[0])[0], getNormalizedCoords(polygon[0])[1]); for (let i=1; i<polygon.length; i++) { context.lineTo(getNormalizedCoords(polygon[i])[0], getNormalizedCoords(polygon[i])[1]); } context.closePath(); context.lineWidth = 1.5; context.strokeStyle = 'indigo';	context.stroke(); context.restore();
};
const draw = () => {	context.clearRect(0, 0, canvas.width, canvas.height); const intersection = getIntersectionToPolygon(polygon, point);	drawPolygon(polygon); drawProjection(point, intersection);	drawPoint(point); drawPoint(intersection, 'turquoise');	window.requestAnimationFrame(draw);
};
const getNormalizedCoords = (point) => {	return [point[0] + window.innerWidth / 2, point[1] + window.innerHeight / 2];
};
const mousemove = (event) => {	point[0] = event.pageX - window.innerWidth / 2; point[1] = event.pageY - window.innerHeight / 2;
};
const resize = () => {	canvas.height = window.innerHeight * window.devicePixelRatio;	canvas.width = window.innerWidth * window.devicePixelRatio; canvas.style.height = `${window.innerHeight}px`; canvas.style.width = `${window.innerWidth}px`;	context.scale(window.devicePixelRatio, window.devicePixelRatio);
};
resize();
draw();
document.addEventListener('mousemove', mousemove);
window.addEventListener('resize', resize);
document.body.appendChild(canvas);
Closest point of a polygon to another point - Script Codes
Closest point of a polygon to another point - Script Codes
Home Page Home
Developer Sylvain Reucherand
Username sreucherand
Uploaded February 01, 2023
Rating 3
Size 3,203 Kb
Views 2,024
Do you need developer help for Closest point of a polygon to another point?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sylvain Reucherand (sreucherand) Script Codes
Name
A Pen by Sylvain Reucherand
Spinner
UI Buttons animation
Mousewheel indicator animation
Flower expansion
Blurred text
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!