40:I[328484,["$2","$2f","$30","$31","$32","$33","$34"],"ToolPlayer"] 44:I[27201,["$2"],"IconMark"] 41:T1713,// code const BAY = kit.dither.bayer(8); function hash(x, y, s) { let h = (x * 374761393 + y * 668265263 + s * 2147483647) | 0; h = Math.imul(h ^ (h >>> 13), 1274126177); return ((h ^ (h >>> 16)) >>> 0) / 4294967296; } defineTool({ actions: { clearZones(ctx) { ctx.state.zones = []; ctx.state.down = false; }, undoZone(ctx) { const z = ctx.state.zones || []; if (!z.length) return; const id = z[z.length - 1].stroke; while (z.length && z[z.length - 1].stroke === id) z.pop(); }, }, render(ctx, p) { const { g, width: W, height: H, px } = ctx; const size = Math.max(2, Math.round(p.pixelSize * px)); const w = Math.ceil(W / size), h = Math.ceil(H / size); const C = (hex) => kit.color.parse(hex); const dark = C(p.dark), pink = C(p.pink), green = C(p.green), mint = C(p.mint), light = C(p.light); const plum = kit.color.mix(dark, pink, 0.3); const pairs = [[pink, green], [dark, light], [mint, green], [pink, dark], [green, dark], [pink, light], [mint, pink]]; const r = kit.rand(p.seed); const shapes = []; for (let i = 0; i < p.shapes; i++) { const big = i < 4; const ru = (big ? r.range(0.35, 0.8) : r.range(0.1, 0.45)) * p.scale; const rv = (big ? r.range(0.12, 0.3) : r.range(0.05, 0.25)) * p.scale; const pr = pairs[r.int(0, pairs.length - 1)]; shapes.push({ cu: r.range(0, 0.9), cv: r.range(0, 0.95), ru, rv, type: r.int(0, 2), pat: r.int(0, 4), a: r.chance(0.5) ? pr[0] : pr[1], b: r.chance(0.5) ? pr[1] : pr[0], k: r.int(3, 9), id: i, }); if (shapes[i].a === shapes[i].b) shapes[i].b = dark; } // ---- Zone brushes: paint extra zones with the pointer (kept in ctx.state) ---- const st = ctx.state, P = ctx.pointer; if (!st.zones) { st.zones = []; st.count = 0; st.stroke = 0; } if (p.brush !== 'off' && P && P.down && P.inside) { let bu = (P.x - W / 2) / (W / 2), bv = (P.y - H / 2) / (H / 2); if (p.mirror !== 'none') bu = Math.abs(bu); if (p.mirror === 'both') bv = Math.abs(bv); const start = !st.down; if (start) st.stroke++; const step = p.brushSize * (W / 2) * (p.brush === 'scatter' ? 0.9 : 0.7); const far = start || Math.hypot(P.x - st.lx, P.y - st.ly) > step; if (far && (p.brush !== 'stamp' || start)) { st.lx = P.x; st.ly = P.y; const n = p.brush === 'scatter' ? 3 : 1; for (let k = 0; k < n; k++) { const rr = kit.rand(p.seed * 7919 + (st.count++) * 131); const sc = p.brush === 'scatter' ? rr.range(0.3, 0.7) : 1; const ru = p.brushSize * sc; const ox = p.brush === 'scatter' ? rr.range(-1, 1) * p.brushSize * 1.2 : 0; const oy = p.brush === 'scatter' ? rr.range(-1, 1) * p.brushSize * 1.2 * (W / H) : 0; const sr = kit.rand(p.seed * 104729 + st.stroke * 977); const pr = p.brushInk === 'auto' ? pairs[sr.int(0, pairs.length - 1)] : pairs[+p.brushInk]; const cut = p.brush === 'cut'; let a = sr.chance(0.5) ? pr[0] : pr[1], b = a === pr[0] ? pr[1] : pr[0]; if (cut) { a = plum; b = plum; } const pats = { mixed: sr.int(0, 4), gradient: 0, dither: 1, rings: 2, checker: 3, noise: 4 }; st.zones.push({ cu: bu + ox, cv: bv + oy, ru, rv: ru * (w / h), type: p.brushShape === 'mixed' ? sr.int(0, 2) : +p.brushShape, pat: cut ? 5 : pats[p.brushPattern], a, b, k: sr.int(3, 9), id: 1000 + st.stroke, stroke: st.stroke, }); } if (st.zones.length > 160) st.zones.splice(0, st.zones.length - 160); } st.down = true; } else st.down = false; const all = shapes.concat(st.zones); const buf = kit.buffer(w, h); const img = buf.g.createImageData(w, h); const d32 = new Uint32Array(img.data.buffer); const pack = (c) => (255 << 24) | (Math.round(c[2]) << 16) | (Math.round(c[1]) << 8) | Math.round(c[0]); const nb = p.bands; for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { let ax = x + 0.5 - w / 2, ay = y + 0.5 - h / 2; if (p.mirror !== 'none') ax = Math.abs(ax); if (p.mirror === 'both') ay = Math.abs(ay); const u = ax / (w / 2), v = ay / (h / 2); const ix = Math.floor(ax), iy = Math.floor(ay); let col = null; for (let s = all.length - 1; s >= 0; s--) { const S = all[s]; const dx = (u - S.cu) / S.ru, dy = (v - S.cv) / S.rv; let d; if (S.type === 0) d = Math.hypot(dx, dy); else if (S.type === 1) d = Math.max(Math.abs(dx), Math.abs(dy)); else d = (Math.abs(dx) + Math.abs(dy)) * 0.8; if (d >= 1) continue; const th = BAY[(y & 7) * 8 + (x & 7)]; switch (S.pat) { case 0: col = kit.color.mix(S.a, S.b, Math.floor((1 - d) * nb) / nb); break; case 1: col = (1 - d) * 1.1 > th ? S.a : S.b; break; case 2: { const t = d * S.k; const f = t - Math.floor(t); col = ((Math.floor(t) & 1) ? f : 1 - f) > th ? S.a : S.b; break; } case 3: col = (((ix + iy) >> 1) + Math.floor(S.k)) & 1 ? S.a : S.b; break; case 5: col = S.a; break; default: col = hash(ix, iy, S.id + p.seed) < 0.5 ? S.a : S.b; } break; } if (!col) { const d = Math.hypot(u, v) / 1.35; const t = Math.floor(Math.min(1, d) * nb) / nb; col = kit.color.mix(plum, dark, Math.min(1, (1 - p.vignette) * 0 + t * p.vignette + (1 - p.vignette) * 0.2 * 0)); if (p.vignette < 0.01) col = plum; } d32[y * w + x] = pack(col); } } buf.g.putImageData(img, 0, 0); g.imageSmoothingEnabled = false; g.fillStyle = p.dark; g.fillRect(0, 0, W, H); g.drawImage(buf.canvas, 0, 0, w * size, h * size); }, });37:["$","$L40",null,{"spec":{"code":"$41","name":"Mirror Pixel Totem","presets":[{"name":"Acid garden","values":{"seed":8}},{"name":"Gameboy relic","values":{"dark":"#0f380f","mint":"#9bbc0f","pink":"#306230","seed":21,"green":"#8bac0f","light":"#e4f0b0","pixelSize":10}},{"name":"Sunset temple","values":{"dark":"#1a0b2e","mint":"#fb8500","pink":"#ff4d6d","seed":5,"green":"#ffb703","light":"#fff1d6","shapes":22}},{"name":"Fine grid","values":{"dark":"#0b1d3a","mint":"#3a6ff0","pink":"#5bc0ff","seed":33,"green":"#ff7ad9","light":"#f4f7ff","shapes":28,"pixelSize":6}}],"animated":false,"renderer":"canvas2d","sections":[{"label":"Composition","controls":[{"key":"seed","type":"seed","label":"Seed","default":8},{"key":"pixelSize","max":40,"min":4,"step":1,"type":"slider","label":"Pixel size","default":14},{"key":"shapes","max":40,"min":0,"step":1,"type":"slider","label":"Zones","default":16},{"key":"scale","max":1.6,"min":0.4,"step":0.01,"type":"slider","label":"Zone size","default":1},{"key":"mirror","type":"select","label":"Symmetry","default":"both","options":[{"label":"Four-way","value":"both"},{"label":"Left / right","value":"x"},{"label":"None","value":"none"}]}]},{"label":"Zone brush","controls":[{"key":"brush","type":"select","label":"Brush","default":"off","options":[{"label":"Off","value":"off"},{"label":"Stamp","value":"stamp"},{"label":"Trail","value":"trail"},{"label":"Scatter","value":"scatter"},{"label":"Cut (erase zones)","value":"cut"}]},{"key":"brushSize","max":0.4,"min":0.03,"step":0.01,"type":"slider","label":"Brush size","default":0.14},{"key":"brushShape","type":"select","label":"Brush shape","default":"mixed","options":[{"label":"Random per stroke","value":"mixed"},{"label":"Ellipse","value":"0"},{"label":"Rectangle","value":"1"},{"label":"Diamond","value":"2"}]},{"key":"brushPattern","type":"select","label":"Brush fill","default":"mixed","options":[{"label":"Random per stroke","value":"mixed"},{"label":"Gradient bands","value":"gradient"},{"label":"Dither","value":"dither"},{"label":"Rings","value":"rings"},{"label":"Checker","value":"checker"},{"label":"Noise","value":"noise"}]},{"key":"brushInk","type":"select","label":"Brush colors","default":"auto","options":[{"label":"Random per stroke","value":"auto"},{"label":"Pink / green","value":"0"},{"label":"Dark / light","value":"1"},{"label":"Mint / green","value":"2"},{"label":"Pink / dark","value":"3"}]},{"key":"undoZone","type":"button","label":"Undo last stroke","action":"code"},{"key":"clearZones","type":"button","label":"Clear painted zones","action":"code"}]},{"label":"Texture","controls":[{"key":"bands","max":10,"min":2,"step":1,"type":"slider","label":"Gradient bands","default":5},{"key":"vignette","max":1,"min":0,"step":0.01,"type":"slider","label":"Vignette","default":0.8}]},{"label":"Colors","controls":[{"key":"dark","type":"color","label":"Dark","default":"#220c24"},{"key":"pink","type":"color","label":"Pink","default":"#ff5fc0"},{"key":"green","type":"color","label":"Green","default":"#4dff8a"},{"key":"mint","type":"color","label":"Mint","default":"#00d9a6"},{"key":"light","type":"color","label":"Light","default":"#fbeff5"}]}],"description":"Four-way symmetric pixel art of dither, chevron, ring and banded zones, with brushes to paint extra zones by hand."},"versionId":"a591597a-1127-40dc-9b80-e15ff26d318f","toolId":"c72479e4-4871-4cb8-ab41-13501d997aed","carry":{},"reportErrors":true,"footer":"$L42","headExtra":"$L43"}] 39:null 3f:[["$","title","0",{"children":"Mirror Pixel Totem · Blueprint"}],["$","meta","1",{"name":"description","content":"Four-way symmetric pixel art of dither, chevron, ring and banded zones, with brushes to paint extra zones by hand."}],["$","link","2",{"rel":"canonical","href":"https://blueprint.page/p/mirror-pixel-totem-eval-styles"}],["$","meta","3",{"property":"og:title","content":"Mirror Pixel Totem"}],["$","meta","4",{"property":"og:description","content":"Four-way symmetric pixel art of dither, chevron, ring and banded zones, with brushes to paint extra zones by hand."}],["$","meta","5",{"property":"og:url","content":"https://blueprint.page/p/mirror-pixel-totem-eval-styles"}],["$","meta","6",{"property":"og:site_name","content":"Blueprint"}],["$","meta","7",{"property":"og:image","content":"https://blueprint.page/welcome/opengraph-image.jpg"}],["$","meta","8",{"property":"og:type","content":"website"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Mirror Pixel Totem"}],["$","meta","11",{"name":"twitter:description","content":"Four-way symmetric pixel art of dither, chevron, ring and banded zones, with brushes to paint extra zones by hand."}],["$","meta","12",{"name":"twitter:image","content":"https://blueprint.page/welcome/opengraph-image.jpg"}],["$","link","13",{"rel":"icon","href":"/favicon.ico?v=2026-10-28","sizes":"any","type":"image/x-icon"}],["$","link","14",{"rel":"icon","href":"/icon.png?v=2026-10-28","sizes":"192x192","type":"image/png"}],["$","link","15",{"rel":"apple-touch-icon","href":"/apple-touch-icon.png?v=2026-10-28","sizes":"180x180","type":"image/png"}],["$","$L44","16",{}]]