ajet/just-vibes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ajet:323a767abc09922240059d624b2561cc8985ae62
Branches Tags
ajet:master
..
compare: ajet:master
Branches Tags
ajet:master

6 Commits
323a767abc .. master

Author SHA1 Message Date
Adam Jeniski
5fa9948030 blue 2026-01-05 01:01:49 -05:00
Adam Jeniski
6f562d9c12 update icon location 2026-01-04 22:03:41 -05:00
Adam Jeniski
01914ba474 use root favicon 2026-01-04 18:45:08 -05:00
Adam Jeniski
f436e67368 get rid of hover 2026-01-02 14:58:14 -05:00
Adam Jeniski
a546fe38b7 snap to cursor on click 2026-01-02 14:32:09 -05:00
Adam Jeniski
ac81079c5a add logo 2026-01-02 12:05:04 -05:00
3 changed files with 27 additions and 30 deletions
Expand all files Collapse all files
line-segment-intersection/index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="https://ajet.fyi/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>line-segment-intersection</title>
</head>
line-segment-intersection/public/vite.svg
-1
View File
@@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

line-segment-intersection/src/App.svelte
+25 -27
View File
@@ -8,7 +8,6 @@
const HEIGHT = 320;
let userPoint = { x: 5, y: 2 };
let trackHover = true;
// Rectangle coordinates
const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner
@@ -34,7 +33,7 @@
function redraw() {
drawGrid();
drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(100, 108, 255, 0.3)');
drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(0, 128, 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);
@@ -62,37 +61,18 @@
ctx.stroke();
}
function handleMouseMove(event) {
if (!trackHover) return;
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
// 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(event) {
// If we're about to turn off tracking, update position one last time
if (trackHover) {
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
// Add half grid unit offset for snapping to closest grid intersection
// Snap to closest grid intersection
userPoint = {
x: Math.floor((mouseX + GRID_SIZE / 2) / GRID_SIZE),
y: Math.floor((HEIGHT - mouseY + GRID_SIZE / 2) / GRID_SIZE)
};
}
trackHover = !trackHover;
}
function toCanvasCoords(x, y) {
return {
x: x * GRID_SIZE,
@@ -142,7 +122,7 @@
const coords = toCanvasCoords(userPoint.x, userPoint.y);
// Draw point
ctx.fillStyle = '#646cff';
ctx.fillStyle = '#0080ff';
ctx.beginPath();
ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2);
ctx.fill();
@@ -223,9 +203,10 @@
</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:mousemove={handleMouseMove} on:click={handleCanvasClick}></canvas>
<canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:click={handleCanvasClick}></canvas>
</div>
<div class="calculations">
@@ -256,6 +237,23 @@
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 {
@@ -292,7 +290,7 @@
.point-c {
width: 100%;
text-align: center;
color: #646cff;
color: #0080ff;
font-family: monospace;
font-size: 1.1em;
font-weight: bold;
@@ -308,7 +306,7 @@
}
.rect-calc.blue {
border-color: #646cff;
border-color: #0080ff;
}
.rect-calc.red {
@@ -329,7 +327,7 @@
}
.rect-calc.blue h3 {
color: #646cff;
color: #0080ff;
}
.rect-calc.red h3 {