40:I[328484,["$2","$2f","$30","$31","$32","$33","$34"],"ToolPlayer"] 44:I[27201,["$2"],"IconMark"] 41:T1318,defineTool({ animated: true, render(ctx, p) { const { g, width: W, height: H, px, state } = ctx; const { clamp } = kit.math; const c = Math.max(4, p.cellSize * px); const cols = Math.ceil(W / c), rows = Math.ceil(H / c); const nw = cols + 1, nh = rows + 1; // Static source sampled on the grid (cached). let base = null; if (p.source !== 'live') { const src = p.source === 'image' ? p.image : kit.noiseImage(p.source, p.seed); if (state.src !== src || state.nw !== nw || state.nh !== nh) { state.src = src; state.nw = nw; state.nh = nh; const d = src.fit(nw, nh).pixels(); state.base = new Float32Array(nw * nh); for (let i = 0; i < nw * nh; i++) state.base[i] = (0.2126 * d[i * 4] + 0.7152 * d[i * 4 + 1] + 0.0722 * d[i * 4 + 2]) / 255; } base = state.base; } if (!state.F || state.F.length !== nw * nh) state.F = new Float32Array(nw * nh); const F = state.F; const n = kit.noise(p.seed); const t = ctx.time * p.speed * 0.3; const sc = p.scale / Math.max(nw, nh) * (nw > nh ? 1 : 1) * 1.0; for (let j = 0; j < nh; j++) for (let i = 0; i < nw; i++) { const k = j * nw + i; if (!base) F[k] = n.fbm3(i * sc, j * sc, t, 2) * 0.7 + 0.5; else F[k] = base[k] + p.wobble * n.simplex3(i * sc * 1.5, j * sc * 1.5, t); } g.fillStyle = p.bg; g.fillRect(0, 0, W, H); const L = p.levels; const th = []; for (let k = 0; k < L; k++) th.push((k + 1) / (L + 1) + p.threshold); const lvl = (v) => { let s = 0; for (let k = 0; k < L; k++) if (v > th[k]) s++; return s; }; // Band fill (low-res buffer scaled up, pixel-crisp). if (p.fill > 0) { const buf = kit.buffer(cols, rows); const img = buf.g.createImageData(cols, rows); const d32 = new Uint32Array(img.data.buffer); const bgc = kit.color.parse(p.bg); const pal = []; for (let k = 0; k <= L; k++) { const m = kit.color.mix(bgc, p.accent, (k / L) * p.fill); pal.push((255 << 24) | (m[2] << 16) | (m[1] << 8) | m[0]); } for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) d32[j * cols + i] = pal[lvl(F[j * nw + i])]; buf.g.putImageData(img, 0, 0); g.imageSmoothingEnabled = p.style === 'smooth'; if (p.style === 'smooth') g.drawImage(buf.canvas, c / 2, c / 2, cols * c - c, rows * c - c, 0, 0, W, H); else g.drawImage(buf.canvas, 0, 0, cols * c, rows * c); } // Contour lines. g.strokeStyle = p.ink; g.lineWidth = p.lineWidth * px; g.lineJoin = 'round'; g.lineCap = 'round'; g.beginPath(); if (p.style === 'stepped') { for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) { const a = lvl(F[j * nw + i]); if (i < cols - 1 && a !== lvl(F[j * nw + i + 1])) { g.moveTo((i + 1) * c, j * c); g.lineTo((i + 1) * c, (j + 1) * c); } if (j < rows - 1 && a !== lvl(F[(j + 1) * nw + i])) { g.moveTo(i * c, (j + 1) * c); g.lineTo((i + 1) * c, (j + 1) * c); } } } else { const T = [[], [3, 2], [2, 1], [3, 1], [0, 1], [0, 3, 2, 1], [0, 2], [0, 3], [0, 3], [0, 2], [0, 1, 3, 2], [0, 1], [3, 1], [2, 1], [3, 2], []]; // edges: 0 top, 1 right, 2 bottom, 3 left for (let k = 0; k < L; k++) { const tt = th[k]; for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) { const a = F[j * nw + i], b = F[j * nw + i + 1], cc = F[(j + 1) * nw + i + 1], d = F[(j + 1) * nw + i]; const idx = (a > tt ? 8 : 0) | (b > tt ? 4 : 0) | (cc > tt ? 2 : 0) | (d > tt ? 1 : 0); const seg = T[idx]; for (let s = 0; s < seg.length; s += 2) { for (let e = 0; e < 2; e++) { const ed = seg[s + e]; let x, y; if (ed === 0) { x = i + (tt - a) / (b - a); y = j; } else if (ed === 1) { x = i + 1; y = j + (tt - b) / (cc - b); } else if (ed === 2) { x = i + (tt - d) / (cc - d); y = j + 1; } else { x = i; y = j + (tt - a) / (d - a); } if (e === 0) g.moveTo(x * c, y * c); else g.lineTo(x * c, y * c); } } } } } g.stroke(); // Dots inside the outlined regions. if (p.dots > 0) { const r = kit.rand(p.seed + 101); const count = Math.round(p.dots * (W * H) / (1e6 * px * px)); g.strokeStyle = p.ink; g.fillStyle = p.accent; g.lineWidth = Math.max(1, px * 0.9); g.beginPath(); for (let k = 0; k < count; k++) { const x = r() * W, y = r() * H; const v = F[clamp(Math.round(y / c), 0, rows) * nw + clamp(Math.round(x / c), 0, cols)]; if (lvl(v) >= 1) { g.moveTo(x + p.dotSize * px, y); g.arc(x, y, p.dotSize * px, 0, kit.math.TAU); } } g.stroke(); } }, });37:["$","$L40",null,{"spec":{"code":"$41","name":"Contour Field","presets":[{"name":"Blueprint night","values":{"bg":"#101012","ink":"#e4e4e2","fill":0,"style":"stepped","levels":3,"source":"live"}},{"name":"Topographic","values":{"bg":"#efe8d8","ink":"#3a2e22","dots":0,"fill":0.25,"style":"smooth","accent":"#c4572b","levels":8,"cellSize":8,"lineWidth":1}},{"name":"Pixel ocean","values":{"bg":"#08233b","ink":"#8fe3ff","dots":120,"fill":0.7,"style":"stepped","accent":"#1b7fb8","levels":5,"source":"blobs","cellSize":16,"lineWidth":2}},{"name":"Acid veins","values":{"bg":"#1a0b2e","ink":"#d7ff3f","dots":400,"fill":0.15,"speed":0.7,"style":"smooth","accent":"#ff4fa3","levels":4,"source":"ridged","cellSize":7}}],"animated":true,"renderer":"canvas2d","sections":[{"label":"Source","controls":[{"key":"source","type":"select","label":"Outlined field","default":"live","options":[{"label":"Live noise","value":"live"},{"label":"Warped shapes","value":"warp"},{"label":"Ridges","value":"ridged"},{"label":"Cells","value":"cells"},{"label":"Blobs","value":"blobs"},{"label":"Flow bands","value":"flow"},{"label":"Image","value":"image"}]},{"key":"image","type":"image","label":"Image"},{"key":"scale","max":8,"min":0.5,"step":0.05,"type":"slider","label":"Noise scale","default":3.2},{"key":"seed","type":"seed","label":"Seed","default":5},{"key":"gen","type":"button","label":"Generate","action":"reseed"}]},{"label":"Contours","controls":[{"key":"style","type":"select","label":"Style","default":"stepped","options":[{"label":"Stepped pixels","value":"stepped"},{"label":"Smooth","value":"smooth"}]},{"key":"cellSize","max":30,"min":6,"step":1,"type":"slider","label":"Resolution","default":7},{"key":"levels","max":8,"min":1,"step":1,"type":"slider","label":"Levels","default":2},{"key":"threshold","max":0.3,"min":-0.3,"step":0.01,"type":"slider","label":"Threshold","default":0},{"key":"lineWidth","max":5,"min":0.5,"step":0.1,"type":"slider","label":"Line weight","default":1.5}]},{"label":"Dots & Fill","controls":[{"key":"dots","max":800,"min":0,"step":10,"type":"slider","label":"Dots","default":420},{"key":"dotSize","max":8,"min":1,"step":0.1,"type":"slider","label":"Dot size","default":2},{"key":"fill","max":1,"min":0,"step":0.01,"type":"slider","label":"Band fill","default":0}]},{"label":"Motion & Colors","controls":[{"key":"speed","max":2,"min":0,"step":0.01,"type":"slider","label":"Speed","default":0.35},{"key":"wobble","max":0.6,"min":0,"step":0.01,"type":"slider","label":"Image wobble","default":0.2},{"key":"bg","type":"color","label":"Background","default":"#101012"},{"key":"ink","type":"color","label":"Lines","default":"#e4e4e2"},{"key":"accent","type":"color","label":"Fill / dots","default":"#5b6cff"}]}],"description":"Animated contour lines from a noise field or an image, with stepped or smooth outlines, tinted bands and scattered dots."},"versionId":"32c00ca0-f62a-4ae1-ad6b-701fbbc83d5e","toolId":"89139475-6199-4fac-b349-e8c44d6be36f","carry":{},"reportErrors":true,"footer":"$L42","headExtra":"$L43"}] 39:null 3f:[["$","title","0",{"children":"Contour Field · Blueprint"}],["$","meta","1",{"name":"description","content":"Animated contour lines from a noise field or an image, with stepped or smooth outlines, tinted bands and scattered dots."}],["$","link","2",{"rel":"canonical","href":"https://blueprint.page/p/contour-field"}],["$","meta","3",{"property":"og:title","content":"Contour Field"}],["$","meta","4",{"property":"og:description","content":"Animated contour lines from a noise field or an image, with stepped or smooth outlines, tinted bands and scattered dots."}],["$","meta","5",{"property":"og:url","content":"https://blueprint.page/p/contour-field"}],["$","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":"Contour Field"}],["$","meta","11",{"name":"twitter:description","content":"Animated contour lines from a noise field or an image, with stepped or smooth outlines, tinted bands and scattered dots."}],["$","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",{}]]