Compare commits
7 Commits
master
..
0e9500196f
| Author | SHA1 | Date | |
|---|---|---|---|
| 0e9500196f | |||
| 77cb74ad10 | |||
| 4e5b4fb249 | |||
| 0753ef40d5 | |||
| 09ff88289b | |||
| 388f7633e5 | |||
| 0db7cab23b |
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="https://ajet.fyi/icon.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>line-segment-intersection</title>
|
||||
</head>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -8,6 +8,7 @@
|
||||
const HEIGHT = 320;
|
||||
|
||||
let userPoint = { x: 5, y: 2 };
|
||||
let trackHover = true;
|
||||
|
||||
// Rectangle coordinates
|
||||
const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner
|
||||
@@ -33,7 +34,7 @@
|
||||
|
||||
function redraw() {
|
||||
drawGrid();
|
||||
drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(0, 128, 255, 0.3)');
|
||||
drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(100, 108, 255, 0.3)');
|
||||
drawRectangle(userPoint.x, userPoint.y, 1, 7, 'rgba(255, 0, 0, 0.3)');
|
||||
drawLineSegment(1, 1, 6, 7, '#ff3e00');
|
||||
drawLabel('A', 1, 1);
|
||||
@@ -61,18 +62,24 @@
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function handleCanvasClick(event) {
|
||||
function handleMouseMove(event) {
|
||||
if (!trackHover) return;
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mouseX = event.clientX - rect.left;
|
||||
const mouseY = event.clientY - rect.top;
|
||||
|
||||
// Snap to closest grid intersection
|
||||
// Add half grid unit offset for snapping to closest grid intersection
|
||||
userPoint = {
|
||||
x: Math.floor((mouseX + GRID_SIZE / 2) / GRID_SIZE),
|
||||
y: Math.floor((HEIGHT - mouseY + GRID_SIZE / 2) / GRID_SIZE)
|
||||
};
|
||||
}
|
||||
|
||||
function handleCanvasClick() {
|
||||
trackHover = !trackHover;
|
||||
}
|
||||
|
||||
function toCanvasCoords(x, y) {
|
||||
return {
|
||||
x: x * GRID_SIZE,
|
||||
@@ -122,7 +129,7 @@
|
||||
const coords = toCanvasCoords(userPoint.x, userPoint.y);
|
||||
|
||||
// Draw point
|
||||
ctx.fillStyle = '#0080ff';
|
||||
ctx.fillStyle = '#646cff';
|
||||
ctx.beginPath();
|
||||
ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
@@ -203,10 +210,9 @@
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<a href="https://ajet.fyi" class="back-button">← Back</a>
|
||||
<h1>Line Segment Intersection</h1>
|
||||
<div class="canvas-container">
|
||||
<canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:click={handleCanvasClick}></canvas>
|
||||
<canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:mousemove={handleMouseMove} on:click={handleCanvasClick}></canvas>
|
||||
</div>
|
||||
|
||||
<div class="calculations">
|
||||
@@ -237,23 +243,6 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
color: #0080ff;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: rgba(0, 128, 255, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -290,7 +279,7 @@
|
||||
.point-c {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #0080ff;
|
||||
color: #646cff;
|
||||
font-family: monospace;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
@@ -306,7 +295,7 @@
|
||||
}
|
||||
|
||||
.rect-calc.blue {
|
||||
border-color: #0080ff;
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
.rect-calc.red {
|
||||
@@ -327,7 +316,7 @@
|
||||
}
|
||||
|
||||
.rect-calc.blue h3 {
|
||||
color: #0080ff;
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.rect-calc.red h3 {
|
||||
|
||||
Reference in New Issue
Block a user