Skip to content

Commit 507bf51

Browse files
hugoassisjhugoassisj
committed
feat: Enhance line intersection visualization with improved UI, accessibility features, and detailed README. Updated index.html for better structure and added metadata. Refactored main.js for clarity and maintainability, including enhanced calculation methods and UI interactions.
1 parent f3ca5ae commit 507bf51

File tree

5 files changed

+977
-163
lines changed

5 files changed

+977
-163
lines changed

‎README.md‎

Lines changed: 74 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,79 @@
1+
# Line Intersection
12

2-
[![HitCount](http://hits.dwyl.com/hugoassisj/intersects.svg)](http://hits.dwyl.com/hugoassisj/intersects)
3+
[![Hits](https://hitcount.dev/p/hugoassisj/intersects.svg)](https://hitcount.dev/p/hugoassisj/intersects)
4+
[![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla-yellow?logo=javascript)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
5+
[![P5.js](https://img.shields.io/badge/P5.js-1.7-ED225D?logo=p5.js)](https://p5js.org/)
36

4-
# Intersects
7+
Interactive visualization: find where a line through two points meets a chosen **x**-coordinate, with movable **y**-constraints.
58

6-
### Environment
7-
* A 2D Space
8-
* 2 movable points, p1 and p2
9-
* A movable X line (where the line from p1 to p2 shall intersect)
10-
* Movable Y constraints on that X line
9+
![Demo](/Tool.gif)
1110

12-
### Question
13-
What is the point defined by the intersection between a line from points p1 and p2 and a desired X?
14-
![image](https://user-images.githubusercontent.com/45035051/98532512-919b2200-2260-11eb-82d9-d953600f4c86.png)
11+
## What it does
1512

13+
- **2D space**: Two draggable points (P1, P2) define the line.
14+
- **Target X**: A vertical line you move with a slider; the intersection is where the line meets this x.
15+
- **Y constraints**: Y min / Y max limit where the intersection point is drawn; the yellow point is clamped to this band. When clamped, the dashed path is shown in a different color.
16+
- **Export & share**: Download the diagram as PNG; the URL updates so you can share or bookmark a configuration.
17+
18+
## How to use
19+
20+
1. **Drag** either endpoint (P1 or P2) to change the line.
21+
2. Use **Constraints** to set the y-range (band) for the intersection.
22+
3. Use **Target X** to move the vertical line and see the intersection move.
23+
4. Use **Export as PNG** to download the current diagram.
24+
5. Copy the URL to share or bookmark a configuration.
25+
26+
## Math
27+
28+
The line through two points $(x_1, y_1)$ and $(x_2, y_2)$ has slope and intercept:
29+
30+
$$
31+
m = \frac{y_1 - y_2}{x_1 - x_2}, \qquad b = y_2 - m\,x_2.
32+
$$
33+
34+
So the line is $y = mx + b$. At a given **x**, the intersection **y** is:
35+
36+
$$
37+
y = m \cdot x + b.
38+
$$
39+
40+
| Case | Behaviour |
41+
|------|-----------|
42+
| **Vertical line** ($x_1 = x_2$) | No single **y** at that **x**; no intersection point is drawn. |
43+
| **Outside band** | **y** is clamped to the constraint band; dashed path is shown in a different color. |
44+
45+
## Development
46+
47+
### Run locally
48+
49+
**Option A: Direct:** Open `index.html` in a browser (some features may be limited with `file://`).
50+
51+
**Option B: Local server:**
52+
53+
```bash
54+
npx serve .
55+
```
56+
57+
Then open the URL shown (e.g. `http://localhost:3000`).
58+
59+
### Project structure
60+
61+
| File | Purpose |
62+
|--------------|--------|
63+
| `index.html` | Entry point: layout, controls, P5 script. |
64+
| `main.js` | Diagram logic: config, state, intersection math, drawing, UI sync, export, URL state. |
65+
| `styles.css` | Design tokens, layout, control cards, responsive and reduced-motion rules. |
66+
67+
### Tech stack
68+
69+
- **P5.js** (CDN): Canvas and interaction.
70+
- **Vanilla JS**: Single IIFE, one global (`IntersectsApp`) for the P5 lifecycle.
71+
- **No build step**: JSDoc for types and documentation.
72+
73+
### URL state
74+
75+
State is encoded in the query string so configurations can be shared or bookmarked:
76+
77+
```
78+
?x=300&c=2&p1=500,400&p2=200,300
79+
```

‎Tool.gif‎

1.46 MB
Loading

‎index.html‎

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,69 @@
11
<!DOCTYPE html>
2-
<html lang="">
2+
<html lang="en">
33

44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Where do they intersect?</title>
8-
<style>
9-
body {
10-
padding: 0;
11-
margin: 0;
12-
}
13-
</style>
14-
<script src="../p5.js"></script>
15-
<script src="main.js"></script>
7+
<meta name="description"
8+
content="Interactive line intersection visualization: find where a line through two points meets a desired x-coordinate, with movable constraints.">
9+
<meta property="og:title" content="Line Intersection — Where do they intersect?">
10+
<meta property="og:description"
11+
content="Interactive line intersection visualization: find where a line through two points meets a desired x-coordinate, with movable constraints.">
12+
<meta property="og:type" content="website">
13+
<meta name="twitter:card" content="summary">
14+
<meta name="twitter:title" content="Line Intersection — Where do they intersect?">
15+
<meta name="twitter:description"
16+
content="Interactive line intersection visualization: find where a line through two points meets a desired x-coordinate, with movable constraints.">
17+
<title>Line Intersection: Where do they intersect?</title>
18+
<link rel="stylesheet" href="styles.css">
19+
<link rel="preconnect" href="https://fonts.googleapis.com">
20+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21+
<link
22+
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap"
23+
rel="stylesheet">
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
1625
</head>
1726

1827
<body>
28+
<main class="app" role="main">
29+
<div class="top-bar">
30+
<header class="app-header">
31+
<h1 class="app-title">Line Intersection</h1>
32+
<p class="app-tagline">Where does the line meet a given x?</p>
33+
</header>
34+
<div class="instructions-bar" role="doc" aria-label="How to use">
35+
<span class="instructions-text">Drag <strong>P1</strong> or <strong>P2</strong> to move the line; sliders set
36+
target x and Y range.</span>
37+
<button type="button" id="export-png-btn" class="btn btn-export">Export PNG</button>
38+
</div>
39+
</div>
40+
41+
<div id="sketch-container" class="sketch-container"
42+
aria-label="Interactive diagram: line intersection with constraints. Drag the two endpoints or use the sliders to change the target x and constraints.">
43+
</div>
44+
45+
<aside class="controls-panel" aria-label="Controls">
46+
<section class="control-card" aria-labelledby="constraints-heading">
47+
<div class="control-header">
48+
<h2 id="constraints-heading" class="control-heading">Constraints</h2>
49+
<output id="constraints-value" class="control-value" for="constraints-slider" aria-live="polite"></output>
50+
</div>
51+
<label for="constraints-slider" class="control-label">Y range (allowed band height)</label>
52+
<input type="range" id="constraints-slider" class="control-slider" min="1" max="4" step="0.1" value="3"
53+
aria-valuetext="Constraints">
54+
</section>
55+
<section class="control-card" aria-labelledby="desired-x-heading">
56+
<div class="control-header">
57+
<h2 id="desired-x-heading" class="control-heading">Target X</h2>
58+
<output id="desired-x-value" class="control-value" for="desired-x-slider" aria-live="polite"></output>
59+
</div>
60+
<label for="desired-x-slider" class="control-label">Vertical line position (within canvas margin)</label>
61+
<input type="range" id="desired-x-slider" class="control-slider" min="0" max="1000" step="1" value="125"
62+
aria-valuetext="Desired X">
63+
</section>
64+
</aside>
65+
</main>
66+
<script src="main.js"></script>
1967
</body>
2068

21-
</html>
69+
</html>

0 commit comments

Comments
 (0)