|
1 | | -# React + TypeScript + Vite |
| 1 | +# Glyph |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +Real-time ASCII art generator. Transform images and video into 9 art styles with live dithering, animated FX, and multi-layer compositing — entirely in the browser. |
4 | 4 |
|
5 | | -Currently, two official plugins are available: |
| 5 | +## Features |
6 | 6 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) |
| 7 | +- **9 Art Styles** — Classic ASCII, Braille, Halftone, Dot Cross, Line, Particles, Claude Code, Retro, Terminal |
| 8 | +- **8 Dithering Algorithms** — Floyd-Steinberg, Bayer (8x8), Atkinson, Jarvis-Judice-Ninke, Stucki, Sierra, Sierra Lite, or none |
| 9 | +- **Animated FX** — Noise (simplex), Intervals, Beam, Glitch, CRT (phosphor mask + scanlines + bloom), Matrix Rain |
| 10 | +- **8 Color Modes** — Grayscale, Full Color, Matrix, Amber, Sepia, Cool Blue, Neon, Custom hex |
| 11 | +- **Multi-Layer System** — Stack multiple layers with independent settings |
| 12 | +- **Live Camera Input** — Webcam with device switching and quality control |
| 13 | +- **Export** — PNG (1x/2x/4x), self-contained HTML, React component (.tsx), JSON preset |
| 14 | +- **Presets** — Save/load/import parameter presets, 10+ built-in templates |
| 15 | +- **Keyboard Shortcuts** — Full shortcut system (press `?` to see all) |
| 16 | +- **Undo/Redo** — 50-state history with Ctrl+Z / Ctrl+Shift+Z |
| 17 | +- **Dark/Light Theme** — Toggle with one click |
9 | 18 |
|
10 | | -## React Compiler |
| 19 | +## Tech Stack |
11 | 20 |
|
12 | | -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
| 21 | +- **Rendering** — Canvas 2D, sRGB-correct luminance (BT.709), simplex noise |
| 22 | +- **Frontend** — React 19, TypeScript, Vite 8, Tailwind CSS v4, shadcn/ui, Zustand |
| 23 | +- **Storage** — IndexedDB (gallery + presets), fully client-side |
13 | 24 |
|
14 | | -## Expanding the ESLint configuration |
| 25 | +## Quick Start |
15 | 26 |
|
16 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
| 27 | +```bash |
| 28 | +pnpm install |
| 29 | +pnpm dev |
| 30 | +``` |
17 | 31 |
|
18 | | -```js |
19 | | -export default defineConfig([ |
20 | | - globalIgnores(['dist']), |
21 | | - { |
22 | | - files: ['**/*.{ts,tsx}'], |
23 | | - extends: [ |
24 | | - // Other configs... |
| 32 | +Open `http://localhost:5173`, drop an image, and start tweaking. |
25 | 33 |
|
26 | | - // Remove tseslint.configs.recommended and replace with this |
27 | | - tseslint.configs.recommendedTypeChecked, |
28 | | - // Alternatively, use this for stricter rules |
29 | | - tseslint.configs.strictTypeChecked, |
30 | | - // Optionally, add this for stylistic rules |
31 | | - tseslint.configs.stylisticTypeChecked, |
| 34 | +## Build |
32 | 35 |
|
33 | | - // Other configs... |
34 | | - ], |
35 | | - languageOptions: { |
36 | | - parserOptions: { |
37 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
38 | | - tsconfigRootDir: import.meta.dirname, |
39 | | - }, |
40 | | - // other options... |
41 | | - }, |
42 | | - }, |
43 | | -]) |
| 36 | +```bash |
| 37 | +pnpm build |
| 38 | +pnpm preview |
44 | 39 | ``` |
45 | 40 |
|
46 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
47 | | - |
48 | | -```js |
49 | | -// eslint.config.js |
50 | | -import reactX from 'eslint-plugin-react-x' |
51 | | -import reactDom from 'eslint-plugin-react-dom' |
52 | | - |
53 | | -export default defineConfig([ |
54 | | - globalIgnores(['dist']), |
55 | | - { |
56 | | - files: ['**/*.{ts,tsx}'], |
57 | | - extends: [ |
58 | | - // Other configs... |
59 | | - // Enable lint rules for React |
60 | | - reactX.configs['recommended-typescript'], |
61 | | - // Enable lint rules for React DOM |
62 | | - reactDom.configs.recommended, |
63 | | - ], |
64 | | - languageOptions: { |
65 | | - parserOptions: { |
66 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
67 | | - tsconfigRootDir: import.meta.dirname, |
68 | | - }, |
69 | | - // other options... |
70 | | - }, |
71 | | - }, |
72 | | -]) |
| 41 | +## Keyboard Shortcuts |
| 42 | + |
| 43 | +| Shortcut | Action | |
| 44 | +|----------|--------| |
| 45 | +| `Ctrl+S` | Save PNG | |
| 46 | +| `Ctrl+E` | Export dialog | |
| 47 | +| `Ctrl+Z` | Undo | |
| 48 | +| `Ctrl+Shift+Z` | Redo | |
| 49 | +| `Ctrl+R` | Randomize | |
| 50 | +| `F` | Fullscreen | |
| 51 | +| `H` | Toggle sidebar | |
| 52 | +| `[ / ]` | Switch layers | |
| 53 | +| `1-9` | Art style | |
| 54 | +| `?` | Shortcuts help | |
| 55 | + |
| 56 | +## Architecture |
| 57 | + |
73 | 58 | ``` |
| 59 | +src/ |
| 60 | +├── engine/ # Rendering pipeline (pure Canvas 2D, no WebGL) |
| 61 | +│ ├── AsciiRenderer.ts # Main render loop, canvas management |
| 62 | +│ ├── brightness.ts # sRGB linearization + BT.709 luminance |
| 63 | +│ ├── dither.ts # 8 dithering algorithms (generic diffusion kernel) |
| 64 | +│ ├── noise.ts # 2D/3D simplex noise + fBm |
| 65 | +│ ├── fx.ts # Pre-render (noise, intervals, beam, glitch) + post-render (CRT, matrix-rain) |
| 66 | +│ ├── charsets.ts # Character mapping tables |
| 67 | +│ ├── renderUtils.ts # Colors, edge detection, vignette, mouse interaction |
| 68 | +│ └── styles/ # 9 independent art style renderers |
| 69 | +├── components/ # React UI (shadcn/ui) |
| 70 | +├── store/ # Zustand state management |
| 71 | +├── hooks/ # Keyboard shortcuts |
| 72 | +├── lib/ # Export generators, DB, templates |
| 73 | +└── types/ # TypeScript type definitions |
| 74 | +``` |
| 75 | + |
| 76 | +## License |
| 77 | + |
| 78 | +MIT |
0 commit comments