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

Compare commits

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

14 Commits
0e9500196f ... 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
Adam Jeniski
323a767abc update point B position on click before freezing tracking 2026-01-02 11:53:24 -05:00
Adam Jeniski
542b72b6a8 add trackHover toggle 2026-01-02 11:53:24 -05:00
Adam Jeniski
71ec89539d add screenshot script 2026-01-02 11:53:24 -05:00
Adam Jeniski
b189202344 update screenshot 2026-01-02 11:53:24 -05:00
Adam Jeniski
7c9402143b add border radius to rects; constrain to integeral cooridnates only 2026-01-02 11:53:24 -05:00
Adam Jeniski
c9650744ed use ascii 2026-01-02 11:53:24 -05:00
Adam Jeniski
cfbfb1e9b6 add screenshot 2026-01-02 11:53:24 -05:00
Adam Jeniski
e0d88e6653 fix README rectangle descriptions and remove unused Counter component 2026-01-02 11:53:24 -05:00
8 changed files with 69 additions and 31 deletions
Expand all files Collapse all files
line-segment-intersection/CLAUDE.md
+10
View File
@@ -19,6 +19,16 @@ npm run build
npm run preview npm run preview
``` ```
## Scripts
The `script/` folder contains utility scripts for development:
- **screenshot**: Captures a screenshot of the running dev server (localhost:5173) using Chrome headless mode
- Outputs to `screenshot.png` in the project root
- Requires Chrome/Chromium to be installed
- Dev server must be running before executing
- Usage: `./script/screenshot`
## Architecture ## Architecture
### Application Structure ### Application Structure
line-segment-intersection/README.md
+5 -3
View File
@@ -2,6 +2,8 @@
An interactive geometric visualization tool that demonstrates rectangle area calculations and their relationship to a line segment. An interactive geometric visualization tool that demonstrates rectangle area calculations and their relationship to a line segment.
![Application Screenshot](screenshot.png)
## Use Case ## Use Case
This tool provides a visual and interactive way to understand how moving a point affects the areas of rectangles formed with fixed anchor points. It's useful for: This tool provides a visual and interactive way to understand how moving a point affects the areas of rectangles formed with fixed anchor points. It's useful for:
@@ -17,8 +19,8 @@ The visualization displays:
- **Point C** at (6, 7) - top-right anchor point - **Point C** at (6, 7) - top-right anchor point
- **Point B** - movable point that follows your mouse cursor - **Point B** - movable point that follows your mouse cursor
- **Line segment AC** - connecting the two fixed points - **Line segment AC** - connecting the two fixed points
- **Blue rectangle** - formed by points B and C - **Blue rectangle** - formed by point B and (cx, ay) = (6, 1)
- **Red rectangle** - formed by points B and A - **Red rectangle** - formed by point B and (ax, cy) = (1, 7)
As you move your mouse over the canvas, point B follows the cursor, and the application: As you move your mouse over the canvas, point B follows the cursor, and the application:
1. Calculates the width and height of both rectangles in real-time 1. Calculates the width and height of both rectangles in real-time
@@ -56,7 +58,7 @@ npm run preview
## Interface ## Interface
The canvas displays an 8×8 grid where each cell is 40 pixels. Move your mouse over the grid to control point B and watch the rectangle areas update in real-time below the visualization. The canvas displays an 8x8 grid where each cell is 40 pixels. Move your mouse over the grid to control point B and watch the rectangle areas update in real-time below the visualization.
The calculation cards show: The calculation cards show:
- Current position of point B - Current position of point B
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="/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" /> <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
@@ -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/screenshot.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

line-segment-intersection/script/screenshot
Executable
+7
View File
@@ -0,0 +1,7 @@
#!/bin/bash
set -e
google-chrome --headless --disable-gpu \
--screenshot=$(pwd)/screenshot.png --window-size=1280,900 \
http://localhost:5173 2>/dev/null
line-segment-intersection/src/App.svelte
+46 -16
View File
@@ -33,7 +33,7 @@
function redraw() { function redraw() {
drawGrid(); 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)'); 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);
@@ -50,16 +50,27 @@
const width = Math.abs(corner2.x - corner1.x); const width = Math.abs(corner2.x - corner1.x);
const height = Math.abs(corner2.y - corner1.y); const height = Math.abs(corner2.y - corner1.y);
ctx.beginPath();
ctx.roundRect(x, y, width, height, 1);
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.fillRect(x, y, width, height); ctx.fill();
// Add border
ctx.strokeStyle = color.replace('0.3', '0.8'); // Make border more opaque
ctx.lineWidth = 2;
ctx.stroke();
} }
function handleMouseMove(event) { function handleCanvasClick(event) {
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;
userPoint = toCartesianCoords(mouseX, mouseY); // 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)
};
} }
function toCanvasCoords(x, y) { function toCanvasCoords(x, y) {
@@ -111,7 +122,7 @@
const coords = toCanvasCoords(userPoint.x, userPoint.y); const coords = toCanvasCoords(userPoint.x, userPoint.y);
// Draw point // Draw point
ctx.fillStyle = '#646cff'; ctx.fillStyle = '#0080ff';
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();
@@ -192,29 +203,30 @@
</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:mousemove={handleMouseMove}></canvas> <canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:click={handleCanvasClick}></canvas>
</div> </div>
<div class="calculations"> <div class="calculations">
<h2>Rectangle Areas</h2> <h2>Rectangle Areas</h2>
<p class="point-c">Point B: ({userPoint.x.toFixed(2)}, {userPoint.y.toFixed(2)})</p> <p class="point-c">Point B: ({userPoint.x}, {userPoint.y})</p>
<div class="rect-calc blue" class:largest={blueArea > redArea}> <div class="rect-calc blue" class:largest={blueArea > redArea}>
<h3>Blue Rectangle</h3> <h3>Blue Rectangle</h3>
<p>Corner: ({blueRect.x1}, {blueRect.y1})</p> <p>Corner: ({blueRect.x1}, {blueRect.y1})</p>
<p>Width = |{blueRect.x1} - {userPoint.x.toFixed(2)}| = {blueWidth.toFixed(2)}</p> <p>Width = |{blueRect.x1} - {userPoint.x}| = {blueWidth}</p>
<p>Height = |{blueRect.y1} - {userPoint.y.toFixed(2)}| = {blueHeight.toFixed(2)}</p> <p>Height = |{blueRect.y1} - {userPoint.y}| = {blueHeight}</p>
<p class="area">Area = {blueWidth.toFixed(2)} × {blueHeight.toFixed(2)} = <strong>{blueArea.toFixed(2)}</strong></p> <p class="area">Area = {blueWidth} x {blueHeight} = <strong>{blueArea}</strong></p>
</div> </div>
<div class="rect-calc red" class:largest={redArea > blueArea}> <div class="rect-calc red" class:largest={redArea > blueArea}>
<h3>Red Rectangle</h3> <h3>Red Rectangle</h3>
<p>Corner: ({redRect.x1}, {redRect.y1})</p> <p>Corner: ({redRect.x1}, {redRect.y1})</p>
<p>Width = |{redRect.x1} - {userPoint.x.toFixed(2)}| = {redWidth.toFixed(2)}</p> <p>Width = |{redRect.x1} - {userPoint.x}| = {redWidth}</p>
<p>Height = |{redRect.y1} - {userPoint.y.toFixed(2)}| = {redHeight.toFixed(2)}</p> <p>Height = |{redRect.y1} - {userPoint.y}| = {redHeight}</p>
<p class="area">Area = {redWidth.toFixed(2)} × {redHeight.toFixed(2)} = <strong>{redArea.toFixed(2)}</strong></p> <p class="area">Area = {redWidth} x {redHeight} = <strong>{redArea}</strong></p>
</div> </div>
</div> </div>
</main> </main>
@@ -225,6 +237,23 @@
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 {
@@ -240,6 +269,7 @@
canvas { canvas {
display: block; display: block;
cursor: pointer;
} }
.calculations { .calculations {
@@ -260,7 +290,7 @@
.point-c { .point-c {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #646cff; color: #0080ff;
font-family: monospace; font-family: monospace;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
@@ -276,7 +306,7 @@
} }
.rect-calc.blue { .rect-calc.blue {
border-color: #646cff; border-color: #0080ff;
} }
.rect-calc.red { .rect-calc.red {
@@ -297,7 +327,7 @@
} }
.rect-calc.blue h3 { .rect-calc.blue h3 {
color: #646cff; color: #0080ff;
} }
.rect-calc.red h3 { .rect-calc.red h3 {
line-segment-intersection/src/lib/Counter.svelte
-10
View File
@@ -1,10 +0,0 @@
<script>
let count = $state(0)
const increment = () => {
count += 1
}
</script>
<button onclick={increment}>
count is {count}
</button>