Claude Sonnet 5.5
v0.9.0: texture (30 presets), aura glow and particles, range sliders, lint, CSS import
39309b1 Download scripts/texture-gallery.mjs from EHS-Studio/dssl: direct link, hf CLI and curl.
- Browser
- Download file 2.23 kB
-
https://huggingface.co/EHS-Studio/dssl/resolve/main/scripts/texture-gallery.mjs
- Command line
-
hf download hf://EHS-Studio/dssl/scripts/texture-gallery.mjs
-
curl -L -o texture-gallery.mjs https://huggingface.co/EHS-Studio/dssl/resolve/main/scripts/texture-gallery.mjs
2.23 kB
| /* texture-gallery.mjs: render every texture preset on a swatch and save a PNG. | |
| * node scripts/texture-gallery.mjs out.png [--base "#b8a58a"] [--cols 6] | |
| * Useful for eyeballing a new preset, and the tests use the same page to check | |
| * that each one actually paints something. */ | |
| import { withBrowser } from './lib/browser-harness.mjs'; | |
| const args = process.argv.slice(2); | |
| const out = args.find((a) => a.endsWith('.png')) || 'texture-gallery.png'; | |
| const flag = (name, d) => { const i = args.indexOf(name); return i === -1 ? d : args[i + 1]; }; | |
| const base = flag('--base', '#b8a58a'); | |
| const cols = Number(flag('--cols', 6)); | |
| export const galleryPage = (base, cols) => `<!doctype html><meta charset=utf-8><body style="margin:0;background:#f4f2f7;font:12px system-ui"> | |
| <div id=g style="display:grid;grid-template-columns:repeat(${cols},1fr);gap:10px;padding:10px"></div> | |
| <script type=module> | |
| import { PRESET_NAMES, parseTexture, buildTexture } from '/dssl/texture.js'; | |
| import { parseColor } from '/dssl/color.js'; | |
| const hooks = { error: (m) => console.error(m), color: (w) => w, suggest: () => null }; | |
| const g = document.getElementById('g'); | |
| window.report = {}; | |
| for (const name of PRESET_NAMES) { | |
| const tex = buildTexture(parseTexture(name, hooks), parseColor); | |
| const cell = document.createElement('div'); | |
| cell.innerHTML = '<div class=sw style="height:96px;border-radius:6px;background-color:${base}"></div><div style="padding:3px 2px">' + name + '</div>'; | |
| const sw = cell.firstChild; | |
| sw.style.backgroundImage = tex.image; sw.style.backgroundSize = tex.size; sw.style.backgroundRepeat = tex.repeat; | |
| sw.style.backgroundPosition = tex.position; sw.style.backgroundBlendMode = tex.blend; | |
| g.appendChild(cell); | |
| window.report[name] = tex.count; | |
| } | |
| window.ready = true; | |
| </script>`; | |
| if (import.meta.url === `file://${process.argv[1]}`) { | |
| await withBrowser(async ({ open }) => { | |
| const page = await open('/gallery'); | |
| await page.waitForFunction('window.ready === true'); | |
| await page.waitForTimeout(400); | |
| await page.screenshot({ path: out, fullPage: true }); | |
| console.log('wrote', out); | |
| }, { pages: { '/gallery': galleryPage(base, cols) }, viewport: { width: 1100, height: 700 } }); | |
| } | |