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

Compare commits

base: ajet:master
Branches Tags
ajet:master
..
compare: ajet:0e9500196f0de61fca1a0e91c47f439e9209ce56
Branches Tags
ajet:master

7 Commits
master .. 0e9500196f

Author SHA1 Message Date
Adam Jeniski
0e9500196f add trackHover toggle 2026-01-02 00:28:20 -05:00
Adam Jeniski
77cb74ad10 add screenshot script 2026-01-02 00:10:38 -05:00
Adam Jeniski
4e5b4fb249 update screenshot 2026-01-02 00:07:58 -05:00
Adam Jeniski
0753ef40d5 add border radius to rects; constrain to integeral cooridnates only 2026-01-01 23:58:22 -05:00
Adam Jeniski
09ff88289b use ascii 2026-01-01 23:45:41 -05:00
Adam Jeniski
388f7633e5 add screenshot 2026-01-01 23:40:27 -05:00
Adam Jeniski
0db7cab23b fix README rectangle descriptions and remove unused Counter component 
- Corrected rectangle corner coordinates to accurately show (cx, ay) and (ax, cy)
- Removed unused Counter.svelte component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-01-01 23:24:39 -05:00
3 changed files with 17 additions and 27 deletions
Expand all files Collapse all files
line-segment-intersection/index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>line-segment-intersection</title> <title>line-segment-intersection</title>
</head> </head>
line-segment-intersection/public/vite.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

line-segment-intersection/src/App.svelte
+15 -26
View File
@@ -8,6 +8,7 @@
const HEIGHT = 320; const HEIGHT = 320;
let userPoint = { x: 5, y: 2 }; let userPoint = { x: 5, y: 2 };
let trackHover = true;
// Rectangle coordinates // Rectangle coordinates
const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner
@@ -33,7 +34,7 @@
function redraw() { function redraw() {
drawGrid(); 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)'); drawRectangle(userPoint.x, userPoint.y, 1, 7, 'rgba(255, 0, 0, 0.3)');
drawLineSegment(1, 1, 6, 7, '#ff3e00'); drawLineSegment(1, 1, 6, 7, '#ff3e00');
drawLabel('A', 1, 1); drawLabel('A', 1, 1);
@@ -61,18 +62,24 @@
ctx.stroke(); ctx.stroke();
} }
function handleCanvasClick(event) { function handleMouseMove(event) {
if (!trackHover) return;
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left; const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top; const mouseY = event.clientY - rect.top;
// Snap to closest grid intersection // Add half grid unit offset for snapping to closest grid intersection
userPoint = { userPoint = {
x: Math.floor((mouseX + GRID_SIZE / 2) / GRID_SIZE), x: Math.floor((mouseX + GRID_SIZE / 2) / GRID_SIZE),
y: Math.floor((HEIGHT - mouseY + GRID_SIZE / 2) / GRID_SIZE) y: Math.floor((HEIGHT - mouseY + GRID_SIZE / 2) / GRID_SIZE)
}; };
} }
function handleCanvasClick() {
trackHover = !trackHover;
}
function toCanvasCoords(x, y) { function toCanvasCoords(x, y) {
return { return {
x: x * GRID_SIZE, x: x * GRID_SIZE,
@@ -122,7 +129,7 @@
const coords = toCanvasCoords(userPoint.x, userPoint.y); const coords = toCanvasCoords(userPoint.x, userPoint.y);
// Draw point // Draw point
ctx.fillStyle = '#0080ff'; ctx.fillStyle = '#646cff';
ctx.beginPath(); ctx.beginPath();
ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2); ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2);
ctx.fill(); ctx.fill();
@@ -203,10 +210,9 @@
</script> </script>
<main> <main>
<a href="https://ajet.fyi" class="back-button">← Back</a>
<h1>Line Segment Intersection</h1> <h1>Line Segment Intersection</h1>
<div class="canvas-container"> <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>
<div class="calculations"> <div class="calculations">
@@ -237,23 +243,6 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2rem; 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 { h1 {
@@ -290,7 +279,7 @@
.point-c { .point-c {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #0080ff; color: #646cff;
font-family: monospace; font-family: monospace;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
@@ -306,7 +295,7 @@
} }
.rect-calc.blue { .rect-calc.blue {
border-color: #0080ff; border-color: #646cff;
} }
.rect-calc.red { .rect-calc.red {
@@ -327,7 +316,7 @@
} }
.rect-calc.blue h3 { .rect-calc.blue h3 {
color: #0080ff; color: #646cff;
} }
.rect-calc.red h3 { .rect-calc.red h3 {