Compare commits
14 Commits
0e9500196f
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5fa9948030 | |||
| 6f562d9c12 | |||
| 01914ba474 | |||
| f436e67368 | |||
| a546fe38b7 | |||
| ac81079c5a | |||
| 323a767abc | |||
| 542b72b6a8 | |||
| 71ec89539d | |||
| b189202344 | |||
| 7c9402143b | |||
| c9650744ed | |||
| cfbfb1e9b6 | |||
| e0d88e6653 |
@@ -19,6 +19,16 @@ npm run build
|
||||
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
|
||||
|
||||
### Application Structure
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
An interactive geometric visualization tool that demonstrates rectangle area calculations and their relationship to a line segment.
|
||||
|
||||
|
||||
|
||||
## 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:
|
||||
@@ -17,8 +19,8 @@ The visualization displays:
|
||||
- **Point C** at (6, 7) - top-right anchor point
|
||||
- **Point B** - movable point that follows your mouse cursor
|
||||
- **Line segment AC** - connecting the two fixed points
|
||||
- **Blue rectangle** - formed by points B and C
|
||||
- **Red rectangle** - formed by points B and A
|
||||
- **Blue rectangle** - formed by point B and (cx, ay) = (6, 1)
|
||||
- **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:
|
||||
1. Calculates the width and height of both rectangles in real-time
|
||||
@@ -56,7 +58,7 @@ npm run preview
|
||||
|
||||
## 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:
|
||||
- Current position of point B
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Executable
+7
@@ -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
|
||||
@@ -33,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);
|
||||
@@ -50,16 +50,27 @@
|
||||
const width = Math.abs(corner2.x - corner1.x);
|
||||
const height = Math.abs(corner2.y - corner1.y);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, width, height, 1);
|
||||
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 mouseX = event.clientX - rect.left;
|
||||
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) {
|
||||
@@ -111,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();
|
||||
@@ -192,29 +203,30 @@
|
||||
</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}></canvas>
|
||||
<canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:click={handleCanvasClick}></canvas>
|
||||
</div>
|
||||
|
||||
<div class="calculations">
|
||||
<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}>
|
||||
<h3>Blue Rectangle</h3>
|
||||
<p>Corner: ({blueRect.x1}, {blueRect.y1})</p>
|
||||
<p>Width = |{blueRect.x1} - {userPoint.x.toFixed(2)}| = {blueWidth.toFixed(2)}</p>
|
||||
<p>Height = |{blueRect.y1} - {userPoint.y.toFixed(2)}| = {blueHeight.toFixed(2)}</p>
|
||||
<p class="area">Area = {blueWidth.toFixed(2)} × {blueHeight.toFixed(2)} = <strong>{blueArea.toFixed(2)}</strong></p>
|
||||
<p>Width = |{blueRect.x1} - {userPoint.x}| = {blueWidth}</p>
|
||||
<p>Height = |{blueRect.y1} - {userPoint.y}| = {blueHeight}</p>
|
||||
<p class="area">Area = {blueWidth} x {blueHeight} = <strong>{blueArea}</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="rect-calc red" class:largest={redArea > blueArea}>
|
||||
<h3>Red Rectangle</h3>
|
||||
<p>Corner: ({redRect.x1}, {redRect.y1})</p>
|
||||
<p>Width = |{redRect.x1} - {userPoint.x.toFixed(2)}| = {redWidth.toFixed(2)}</p>
|
||||
<p>Height = |{redRect.y1} - {userPoint.y.toFixed(2)}| = {redHeight.toFixed(2)}</p>
|
||||
<p class="area">Area = {redWidth.toFixed(2)} × {redHeight.toFixed(2)} = <strong>{redArea.toFixed(2)}</strong></p>
|
||||
<p>Width = |{redRect.x1} - {userPoint.x}| = {redWidth}</p>
|
||||
<p>Height = |{redRect.y1} - {userPoint.y}| = {redHeight}</p>
|
||||
<p class="area">Area = {redWidth} x {redHeight} = <strong>{redArea}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -225,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 {
|
||||
@@ -240,6 +269,7 @@
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calculations {
|
||||
@@ -260,7 +290,7 @@
|
||||
.point-c {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #646cff;
|
||||
color: #0080ff;
|
||||
font-family: monospace;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
@@ -276,7 +306,7 @@
|
||||
}
|
||||
|
||||
.rect-calc.blue {
|
||||
border-color: #646cff;
|
||||
border-color: #0080ff;
|
||||
}
|
||||
|
||||
.rect-calc.red {
|
||||
@@ -297,7 +327,7 @@
|
||||
}
|
||||
|
||||
.rect-calc.blue h3 {
|
||||
color: #646cff;
|
||||
color: #0080ff;
|
||||
}
|
||||
|
||||
.rect-calc.red h3 {
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<script>
|
||||
let count = $state(0)
|
||||
const increment = () => {
|
||||
count += 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={increment}>
|
||||
count is {count}
|
||||
</button>
|
||||
Reference in New Issue
Block a user