@brandonlukas/luminar 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -0
- package/dist/assets/{index-CCp_I16V.css → index-BHq4NTuF.css} +1 -1
- package/dist/assets/{index-BTqubGOw.js → index-Dn5q-yAE.js} +7 -7
- package/dist/index.html +2 -2
- package/dist/vector-field.json +3692 -3380
- package/package.json +2 -2
- package/public/vector-field.json +3692 -3380
- package/src/main.ts +207 -0
- package/src/style.css +55 -0
package/README.md
CHANGED
|
@@ -12,6 +12,29 @@ npx @brandonlukas/luminar path/to/field.csv
|
|
|
12
12
|
|
|
13
13
|
Optional flags: `--port 5173`, `--host 0.0.0.0`, `--preview` (uses production build)
|
|
14
14
|
|
|
15
|
+
### CSV format
|
|
16
|
+
|
|
17
|
+
Your CSV should have four columns: x position, y position, x velocity, y velocity. Headers are optional and will be auto-detected.
|
|
18
|
+
|
|
19
|
+
**Example with header:**
|
|
20
|
+
```csv
|
|
21
|
+
x,y,dx,dy
|
|
22
|
+
0.0,0.0,1.2,0.5
|
|
23
|
+
0.5,0.0,1.1,0.6
|
|
24
|
+
1.0,0.0,0.9,0.7
|
|
25
|
+
0.0,0.5,1.3,0.4
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**Example without header:**
|
|
29
|
+
```csv
|
|
30
|
+
0.0,0.0,1.2,0.5
|
|
31
|
+
0.5,0.0,1.1,0.6
|
|
32
|
+
1.0,0.0,0.9,0.7
|
|
33
|
+
0.0,0.5,1.3,0.4
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Whitespace-separated values are also supported.
|
|
37
|
+
|
|
15
38
|
### Local development
|
|
16
39
|
|
|
17
40
|
```sh
|
|
@@ -39,6 +62,23 @@ npm run build
|
|
|
39
62
|
- Unreal Bloom and additive blending preserve the luminous, hazy aesthetic.
|
|
40
63
|
- On-canvas controls (top-right) adjust size, bloom strength, and bloom radius in real time.
|
|
41
64
|
|
|
65
|
+
## Export as GIF or video
|
|
66
|
+
The built-in recording controls let you capture your visualization:
|
|
67
|
+
1. Click **Show advanced** in the controls panel
|
|
68
|
+
2. Scroll to the **Export (WebM)** section
|
|
69
|
+
3. Select resolution (current window, 1080p, 1440p, or 4K)
|
|
70
|
+
4. Select duration (3–15 seconds)
|
|
71
|
+
5. Click **▶ Start recording**
|
|
72
|
+
6. Recording happens in real-time at 60fps
|
|
73
|
+
7. Download starts automatically when complete
|
|
74
|
+
|
|
75
|
+
**Notes:**
|
|
76
|
+
- Exports as WebM video (VP9 codec, high quality)
|
|
77
|
+
- Higher resolutions use higher bitrates (up to 25 Mbps for 4K)
|
|
78
|
+
- Convert to GIF or MP4 with ffmpeg: `ffmpeg -i luminar.webm output.gif`
|
|
79
|
+
- Recording captures exactly what you see, so adjust controls before starting
|
|
80
|
+
- Works in modern browsers with MediaRecorder API support (Chrome, Firefox, Edge)
|
|
81
|
+
|
|
42
82
|
## Tweaks to try
|
|
43
83
|
- Increase `PARTICLE_COUNT` or `FLOW_SCALE` in [src/main.ts](src/main.ts#L20-L24) for denser motion.
|
|
44
84
|
- Adjust `WORLD_EXTENT` and `JITTER` to change containment and randomness.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap";:root{color:#e8f0ff;background-color:#02040a;font-family:Space Grotesk,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 20%,#508cff1f,#0000 35%),radial-gradient(circle at 80% 10%,#b464ff1f,#0000 30%),radial-gradient(circle at 50% 80%,#3cc8b424,#0000 32%),#02040a;min-height:100vh;margin:0;overflow:hidden}#app{position:fixed;inset:0;overflow:hidden}canvas{filter:saturate(1.05);width:100%;height:100%;display:block}.hud{color:#dfe8ff;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;mix-blend-mode:screen;text-shadow:0 0 12px #6eaaff4d;position:absolute;top:18px;left:18px}.hud .title{font-size:16px;font-weight:600}.hud .subtitle{opacity:.7;letter-spacing:.04em;margin-top:4px;font-size:12px;font-weight:400}.hud .status{opacity:.8;letter-spacing:.03em;color:#9fb7ff;margin-top:6px;font-size:11px;font-weight:400}.controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#dfe8ff;pointer-events:auto;background:#060a16b3;border:1px solid #78b4ff40;border-radius:12px;width:240px;padding:14px 14px 10px;position:absolute;top:18px;right:18px;box-shadow:0 12px 30px #00000059,0 0 24px #64a0ff1f}.controls__title{text-transform:uppercase;letter-spacing:.1em;color:#9fb7ff;margin-bottom:10px;font-size:12px}.controls__row{color:#e8f0ff;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;display:grid}.controls__row input[type=range]{accent-color:#7cc4ff;width:100%}.controls__value{font-variant-numeric:tabular-nums;color:#9fb7ff;text-align:right;min-width:44px}.controls__button{color:#dfe8ff;letter-spacing:.04em;cursor:pointer;background:linear-gradient(120deg,#78b4ff29,#5078c81a);border:1px solid #78b4ff59;border-radius:10px;width:100%;margin-top:6px;padding:8px 10px;font-size:12px;transition:border-color .12s,transform .12s,box-shadow .2s}.controls__button:hover{border-color:#8cc8ffb3;box-shadow:0 0 18px #78b4ff40}.controls__button:active{transform:translateY(1px)}
|
|
1
|
+
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap";:root{color:#e8f0ff;background-color:#02040a;font-family:Space Grotesk,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 20%,#508cff1f,#0000 35%),radial-gradient(circle at 80% 10%,#b464ff1f,#0000 30%),radial-gradient(circle at 50% 80%,#3cc8b424,#0000 32%),#02040a;min-height:100vh;margin:0;overflow:hidden}#app{position:fixed;inset:0;overflow:hidden}canvas{filter:saturate(1.05);width:100%;height:100%;display:block}.hud{color:#dfe8ff;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;mix-blend-mode:screen;text-shadow:0 0 12px #6eaaff4d;position:absolute;top:18px;left:18px}.hud .title{font-size:16px;font-weight:600}.hud .subtitle{opacity:.7;letter-spacing:.04em;margin-top:4px;font-size:12px;font-weight:400}.hud .status{opacity:.8;letter-spacing:.03em;color:#9fb7ff;margin-top:6px;font-size:11px;font-weight:400}.controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#dfe8ff;pointer-events:auto;background:#060a16b3;border:1px solid #78b4ff40;border-radius:12px;width:240px;padding:14px 14px 10px;position:absolute;top:18px;right:18px;box-shadow:0 12px 30px #00000059,0 0 24px #64a0ff1f}.controls__title{text-transform:uppercase;letter-spacing:.1em;color:#9fb7ff;margin-bottom:10px;font-size:12px}.controls__row{color:#e8f0ff;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;display:grid}.controls__row input[type=range]{accent-color:#7cc4ff;width:100%}.controls__value{font-variant-numeric:tabular-nums;color:#9fb7ff;text-align:right;min-width:44px}.controls__button{color:#dfe8ff;letter-spacing:.04em;cursor:pointer;background:linear-gradient(120deg,#78b4ff29,#5078c81a);border:1px solid #78b4ff59;border-radius:10px;width:100%;margin-top:6px;padding:8px 10px;font-size:12px;transition:border-color .12s,transform .12s,box-shadow .2s}.controls__button:hover{border-color:#8cc8ffb3;box-shadow:0 0 18px #78b4ff40}.controls__button:active{transform:translateY(1px)}.controls__button--record{background:linear-gradient(120deg,#ff507838,#c8507824);border-color:#ff789666}.controls__button--record:hover{border-color:#ff8caacc;box-shadow:0 0 18px #ff78964d}.controls__section{border-top:1px solid #78b4ff26;margin-top:12px;padding-top:12px}.controls__subtitle{text-transform:uppercase;letter-spacing:.1em;color:#9fb7ff;opacity:.85;margin-bottom:8px;font-size:11px}.controls__status{color:#b3d4ff;text-align:center;background:#64b4ff1a;border:1px solid #78b4ff33;border-radius:6px;margin-top:8px;padding:6px 8px;font-size:11px}.controls__select{color:#dfe8ff;cursor:pointer;background:#141e3280;border:1px solid #78b4ff40;border-radius:6px;width:100%;padding:4px 6px;font-size:11px}.controls__select:hover{border-color:#8cc8ff80}.controls__advanced{margin-top:8px}
|