[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96038":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":26,"discoverSource":27},96038,"kool-brushez","blakeshao\u002Fkool-brushez","blakeshao","cool p5js brushes","",null,"JavaScript",150,18,1,2,0,11,41.94,false,"main",true,[],"2026-09-20 04:01:32","# kool-brushez\n\nA small p5.js drawing app with six expressive brushes and one shared canvas.\nSwitch brushes without reloading or losing your drawing. Each brush keeps its\nown JavaScript, settings, preview and registry entry.\n\nThe interface is a flat white grid. Each brush has its own cell in the left\ncolumn, the canvas fills the entire middle section, and the selected brush's\ncontrols live in the right column. Blue (`#4C74EE`) borders and buttons define\nthe left side; green (`#00b807`) borders, text and buttons define the right.\nSquare controls and joined corner buttons define the grid. Brush cells have a fixed height, with blank\ncells filling the space below. Every preview stays at full opacity and a fixed\nsize. A 1.5px border marks hover or keyboard focus; the selected cell uses 2px.\nStroke previews are rendered at 4× resolution. The empty canvas has no text.\n\n## Run\n\nRequires Node.js 20.19+ or 22.12+.\n\n```sh\nnpm install\nnpm run dev\n```\n\nOpen the local URL printed by Vite. `npm run build` creates a static site in\n`dist\u002F`; `npm run preview` serves that production build locally. p5.js is\ninstalled locally, so the drawing engine doesn't depend on a CDN. The interface\nuses locally bundled DM Sans (variable weight) and plain CSS, with\nuppercase titles in regular weight and sideways vertical panel labels.\nBrush annotations use the same font; Japanese characters and\nother unsupported glyphs use system fallbacks. See the [font notice](assets\u002Ffonts\u002Fdm-sans\u002FNOTICE.md)\nfor attribution and the SIL Open Font License.\n\n## Brushes\n\n| Brush                                    | What it draws                                                         |\n| ---------------------------------------- | --------------------------------------------------------------------- |\n| [Score](brushes\u002Fscore\u002FREADME.md)         | Flowing staff ribbons and animated graphic-score marks in five colors |\n| [Schematic](brushes\u002Fschematic\u002FREADME.md) | Wet-ink patch diagrams, CAD details and tiny numeric annotations      |\n| [Balloon](brushes\u002Fballoon\u002FREADME.md)     | A hidden patchwork of airbrushed shapes, revealed along each stroke   |\n| [Subway](brushes\u002Fsubway\u002FREADME.md)       | Animated branching subway lines, station names and transit symbols |\n| [Crowd](brushes\u002Fcrowd\u002FREADME.md)         | Royal-blue people tracing out from their feet, then swaying and breathing independently |\n| [Gunpla](brushes\u002Fgunpla\u002FREADME.md)       | Grow a connected model-kit sprue one numbered component at a time |\n\nClick a sample stroke in the left column to switch brushes. Drag the sliders\nin the right column to change size and density. Score starts at 0.75× glob size\nand has a separate **Staff size** slider for line spacing and thickness (default 1×);\nSchematic starts at 0.4×, Balloon at 0.5×, Subway at 1× with four parallel routes,\nCrowd at 1× with royal-blue outlines, mixed poses and occasional scene objects,\nand Gunpla at 1× with white plastic sprues and a complete mix of components. Arrow keys make small\nadjustments. Colors and other brush-specific options appear below the sliders.\nThe **Brush options** toggle stays on the far-right edge. Its arrow points right\nto collapse the panel and left to expand it; **H** also toggles the panel and\n**Escape** collapses it. A matching **Brushes** toggle sits on the far-left\nedge and collapses the brush column the same way, with **L** as its shortcut.\nOn small screens both open as drawers — brushes from the left, controls from\nthe right; tapping the canvas outside dismisses them without drawing, as does\n**Escape**, and choosing a brush closes them. Desktop\ncollapse preferences survive switching between screen sizes. Brush settings survive switching. **Auto-fill** lets the\ncurrent brush draw for you; **New variation** keeps your artwork and starts a\nnew staff spacing, drafting grid, balloon pattern, subway service bundle, crowd grouping or sprue layout.\n\nJoined square buttons occupy the canvas corners: brush and eraser at top left;\nundo, redo, clear and PNG export at top right; aspect ratio at bottom left; and help\nat bottom right. Clear is undoable.\n\nThe canvas automatically fits the middle section, with the entire paper visible.\nThe bottom-left aspect selector offers **Fit** (match the section), **1:1**,\n**4:3**, **3:4**, **16:9** and **9:16**. Fixed ratios stay centered within the\navailable space. The paper uses a 1200-unit long edge, with rendering density matched to the\nscreen and fitted size (up to 3×). For example, 16:9 exports at 1200 × 675 on a\nstandard display and 2400 × 1350 on a typical Retina display. There are no zoom controls or canvas scrolling.\n\nChanging the ratio or resizing the window fits existing artwork uniformly\ninside the new paper, without cropping or stretching. The original pixels are\nretained between resizes until another edit is committed. Brush settings and\nundo\u002Fredo survive; each brush refreshes its temporary layers for the new size.\nMouse, pen and touch input use the same interface. The shared eraser removes\nmarks made by any brush, including earlier brushes.\n\nUndo and redo retain up to 16 editing steps, including strokes, auto-fill and\nclear. PNG export finishes pending animations and saves the full-resolution\npaper without the UI or cursor as `Untitled study.png`.\nDrawings live in the current tab's memory: export before closing or reloading.\n\n### Shortcuts\n\n| Key                                     | Action                                         |\n| --------------------------------------- | ---------------------------------------------- |\n| `B` \u002F `E`                               | Brush \u002F toggle eraser                          |\n| `⌘` or `Ctrl` + `Z`                     | Undo                                           |\n| `⌘` or `Ctrl` + `Shift Z` (or `Ctrl Y`) | Redo                                           |\n| `[` \u002F `]`                               | Decrease \u002F increase brush size                 |\n| `-` \u002F `+`                               | Decrease \u002F increase density, where supported   |\n| `1`–`5` \u002F `0`                           | Color or style \u002F mixed palette or random style |\n| `Space`                                 | Auto-fill                                      |\n| `R`                                     | New variation, keeping existing marks          |\n| `G` \u002F `M`                               | Score staff lines \u002F Schematic mirroring        |\n| `C`                                     | Clear canvas (undoable)                        |\n| `S` or `⌘` \u002F `Ctrl S`                   | Export PNG                                     |\n| `L` \u002F `H`                               | Toggle brushes \u002F brush options                 |\n| `?`                                     | Show shortcuts                                 |\n\nShortcuts leave text fields, selectors and the help dialog alone. Space on a\nfocused button keeps the button's normal keyboard behavior.\n\n### Direct links\n\n`?brush=score`, `?brush=schematic`, `?brush=balloon`, `?brush=subway`,\n`?brush=crowd`, and `?brush=gunpla` select a brush on load.\nAdd `&auto` for an automatically painted page. Existing presets still work:\n`&style=patch|cad|mixed` and `&mirror` for Schematic, or\n`&color=red|blue|green|yellow|pink` for Balloon. Subway supports\n`&color=blue|red|yellow|orange|green|purple`, `&routes=1|2|3|4`, `&labels=false`, and\n`&divergence=0` to `2` for parallel lines through tangled, branching networks.\n`&details=0` to `2` controls Subway's transit symbols and connection notes.\nCrowd supports `&color=red|graphite|blue|green`,\n`&pose=mixed|standing|walking|seated`, `&size=0.4` to `3`,\n`&density=0.35` to `2.5`, `&spread=0` to `2`, and `&details=0` to `2`\nfor the frequency of animals and table scenes.\nGunpla supports `&parts=mixed|armor|mechanical|weapons`,\n`&color=white|graphite|blue|red|olive`, `&labels=false`,\n`&size=0.4` to `2.5`, `&density=0.4` to `1.8`, `&variation=0` to `2`,\n`&texture=0` to `2`, and `&details=0` to `2`. Its 37 molds retain their native\nsize differences, with molded white plastic shading, subtle surface grain and\nJapanese material annotations. Fourteen molds are traced from the reference scan.\n\n## Layout\n\n```text\nindex.html                  shared drawing UI\nshared\u002F\n  loader.js                 brush picker, settings, shortcuts and viewport\n  studio.js                 one p5 instance; canvas, input, history and export\n  hud.js                    controls generated from brush registrations\n  registry.js               collection of independent brush registrations\n  history.js                bounded undo\u002Fredo snapshots\n  styles.css                flat white grid and responsive layout\nbrushes\u002F\u003Cname>\u002F\n  registry.js               name, controls, preview and lazy module loader\n  sketch.js                 isolated drawing algorithms and lifecycle\n  preview.png               a single stroke rendered by the brush\n  README.md                 brush-specific notes\n```\n\nThe original brush geometry and animation remain in each `sketch.js`. They now\nrun in p5 instance mode, with no shared sketch globals, DOM controls or canvas\nownership. Vite supplies development serving and production bundling; the app\nuses plain JavaScript and CSS.\n\nSee [the brush interface](brushes\u002FREADME.md) to add a brush or split one into\nadditional JavaScript files.\n\n## Check\n\n```sh\nnpm test\nnpm run build\nnpx playwright install chromium\nnpm run test:browser\n```\n\nIf Google Chrome is already installed, `BROWSER_CHANNEL=chrome npm run\ntest:browser` uses it instead. Browser tests start their own server on port\n4178 and cover compositing across brushes, undo\u002Fredo, erasing, resize, PNG\nexport, touch, control persistence, keyboard isolation, auto-fill, rapid\nswitching, slider dragging\u002Fkeyboard adjustment, aspect ratios, Retina compositing and export dimensions. Unit tests cover registration, factory isolation and history limits.\n\n## License\n\nMIT. See [LICENSE](LICENSE). The bundled DM Sans font is covered separately by the SIL Open Font License noted above.\n","kool-brushez 是一个基于 p5.js 的轻量级交互式绘图应用，提供六种风格化画笔（如乐谱、电路图、气喷、地铁线路、人群、模型套件），支持实时切换画笔而不丢失画布内容。每支画笔拥有独立的 JavaScript 逻辑、参数控制面板、高分辨率预览及状态管理；界面采用响应式网格布局，使用本地托管的 DM Sans 字体与纯 CSS 实现，p5.js 引擎不依赖 CDN。适用于数字艺术创作、视觉笔记、教育演示及创意编程教学等需要多模态笔触表达的场景。","2026-09-09 02:30:03","CREATED_QUERY"]