https://github.com/maggieappleton/kodachrome
https://github.com/maggieappleton/kodachrome
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/maggieappleton/kodachrome
- Owner: MaggieAppleton
- Created: 2026-02-04T12:45:15.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2026-02-04T14:22:56.000Z (5 months ago)
- Last Synced: 2026-02-05T01:38:58.612Z (5 months ago)
- Language: JavaScript
- Size: 7.58 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Kodachrome
A playground for developing visual experiments. Contains isolated experiments exploring canvas gradients, grain, dithering, textures, and motion.
## Getting Started
Install dependencies:
```bash
npm install
```
Start the dev server with hot reloading:
```bash
npm run dev
```
Then open [http://localhost:5173/explorations/](http://localhost:5173/explorations/)
Changes to HTML, CSS, or JS files will reload automatically.
### Generating Thumbnails
To automatically generate thumbnails for all explorations:
```bash
npm run thumbnails
```
This script:
1. Starts a Vite dev server
2. Opens each exploration in a headless browser
3. Hides the control panel and UI elements
4. Captures a screenshot of the canvas rendering
5. Saves it as `thumb.png` in each exploration folder
6. Stops the dev server
The thumbnails are 800×600px at 2× resolution for retina displays. The script automatically finds all `exploration-*` folders and will work for new explorations you add.
## Project Structure
```
shared/
controls/ # Reusable Web Components for control panels
control-panel.js # container
slider-control.js # for numeric values
oklch-picker.js # visual color picker
index.js # Import this to register all components
explorations/
index.html # Grid of all explorations
exploration-01/ # Constellation Machine
exploration-02/ # Dithered Image
```
## Using the Control Components
In any exploration, import the shared controls:
```html
```
Then use them in your HTML:
```html
```
Listen for changes in your JS:
```js
document.addEventListener('control-change', (e) => {
const { key, value } = e.detail;
// value is a number for sliders, { l, c, h } for color pickers
});
```