40:I[328484,["$2","$2f","$30","$31","$32","$33","$34"],"ToolPlayer"] 44:I[27201,["$2"],"IconMark"] 41:T1c22,const SZ = 192; const SETS = { classic: ' .:-=+*#%@', blocks: ' ░▒▓█', binary: ' 01', code: ' .,;/<{[#&@' }; function drawDemo(g, kind) { g.fillStyle = '#000'; g.strokeStyle = '#000'; g.clearRect(0, 0, SZ, SZ); if (kind === 'mark') { g.beginPath(); g.arc(128, 128, 100, 0, Math.PI * 2); g.arc(128, 128, 56, 0, Math.PI * 2, true); g.fill(); g.beginPath(); g.moveTo(128, 70); g.lineTo(190, 180); g.lineTo(66, 180); g.closePath(); g.fill(); } else if (kind === 'asterisk') { g.lineWidth = 42; g.lineCap = 'round'; for (let i = 0; i < 3; i++) { const a = (i * Math.PI) / 3 + Math.PI / 6; g.beginPath(); g.moveTo(128 - Math.cos(a) * 92, 128 - Math.sin(a) * 92); g.lineTo(128 + Math.cos(a) * 92, 128 + Math.sin(a) * 92); g.stroke(); } } else { g.font = '900 150px Helvetica Neue, Arial, sans-serif'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText('Bp', 128, 138); } } function buildShape(p) { const g = kit.buffer(SZ, SZ).g; const shape = kit.buffer(SZ, SZ); if (p.source === 'image') { const im = p.image; const s = Math.min(SZ / im.width, SZ / im.height); g.drawImage(im.source, (SZ - im.width * s) / 2, (SZ - im.height * s) / 2, im.width * s, im.height * s); const d = g.getImageData(0, 0, SZ, SZ); const a = d.data; let minA = 255; for (let i = 3; i < a.length; i += 4) if (a[i] < minA) minA = a[i]; const out = shape.g.createImageData(SZ, SZ); const o = out.data; if (minA < 250) { for (let i = 0; i < SZ * SZ; i++) { let v = a[i * 4 + 3]; if (p.invert) v = 255 - v; o[i * 4 + 3] = v; } } else { const c = [0, SZ - 1, (SZ - 1) * SZ, SZ * SZ - 1].map((k) => k * 4); let br = 0, bg = 0, bb = 0; c.forEach((k) => { br += a[k] / 4; bg += a[k + 1] / 4; bb += a[k + 2] / 4; }); for (let i = 0; i < SZ * SZ; i++) { const dist = Math.hypot(a[i * 4] - br, a[i * 4 + 1] - bg, a[i * 4 + 2] - bb); let v = Math.min(255, dist * 2.2); if (p.invert) v = 255 - v; o[i * 4 + 3] = v; } } shape.g.putImageData(out, 0, 0); } else { drawDemo(shape.g, p.source); } const tint = (col) => { const b = kit.buffer(SZ, SZ); b.g.drawImage(shape.canvas, 0, 0); b.g.globalCompositeOperation = 'source-in'; b.g.fillStyle = col; b.g.fillRect(0, 0, SZ, SZ); return b.canvas; }; return { face: tint('#ffffff'), side: tint('#6e6e6e') }; } defineTool({ animated: true, render(ctx, p) { const { g, width: W, height: H, px, state } = ctx; const key = p.source + ':' + p.invert; if (state.key !== key || (p.source === 'image' && state.img !== p.image)) { state.key = key; state.img = p.image; state.shape = buildShape(p); } const fs = p.cell * px; const cw = fs * 0.6, ch = fs * 1.1; const cols = Math.max(8, Math.floor(W / cw)), rows = Math.max(8, Math.floor(H / ch)); if (!state.buf || state.buf.width !== cols || state.buf.height !== rows) state.buf = kit.buffer(cols, rows); const b = state.buf, bg = b.g; // Angles const t = ctx.time * p.speed; const autoYaw = p.motion === 'spin' ? t * 1.2 : p.motion === 'sway' ? Math.sin(t * 1.3) * 0.9 + 0.3 : 0.5; // Mouse interaction: smoothed pointer position, blended with the idle motion. const ptr = ctx.pointer || {}; const dt = state.lt === undefined ? 0 : Math.min(0.1, Math.max(0, ctx.time - state.lt)); state.lt = ctx.time; if (state.fol === undefined) { state.fol = 0; state.mx = 0; state.my = 0; state.yaw = autoYaw; state.tl = p.tilt; state.was = false; } const on = !!(p.follow && ptr.inside); if (on) { const tx = Math.max(-1, Math.min(1, (ptr.x / W - 0.5) * 2)); const ty = Math.max(-1, Math.min(1, (ptr.y / H - 0.5) * 2)); const k = 1 - Math.exp(-dt * 9); state.mx += (tx - state.mx) * k; state.my += (ty - state.my) * k; } state.fol += ((on ? 1 : 0) - state.fol) * (1 - Math.exp(-dt * 5)); const fol = state.fol; const TAU2 = Math.PI * 2; if (on && !state.was) { // Entering: wrap the angle and start the mouse smoothing from the current pose. state.yaw -= TAU2 * Math.round(state.yaw / TAU2); state.mx = Math.max(-1, Math.min(1, state.yaw / 1.3)); state.my = Math.max(-1, Math.min(1, state.tl / 45)); } state.was = on; if (on) { const k2 = 1 - Math.exp(-dt * 7); state.yaw += (state.mx * 1.3 - state.yaw) * k2; state.tl += (state.my * 45 - state.tl) * k2; } else { if (p.motion === 'spin') state.yaw += dt * p.speed * 1.2; else state.yaw += (autoYaw - state.yaw) * (1 - Math.exp(-dt * 3)); state.tl += (p.tilt - state.tl) * (1 - Math.exp(-dt * 3)); } const yaw = state.yaw; const tiltDeg = state.tl; const cs = Math.cos(yaw), sn = Math.sin(yaw); const ph = (tiltDeg * Math.PI) / 180; const cp = Math.cos(ph), sp = Math.sin(ph); // Logo size in cell-width units const logoU = Math.min(W, H) * p.size / cw; const depthU = logoU * p.depth; const N = Math.min(40, Math.ceil(depthU * 0.8) + 2); bg.setTransform(1, 0, 0, 1, 0, 0); bg.fillStyle = '#000'; bg.fillRect(0, 0, cols, rows); bg.imageSmoothingEnabled = true; const asc = cs >= 0; for (let i = 0; i < N; i++) { const k = asc ? i : N - 1 - i; const z = (k / (N - 1) - 0.5) * depthU; const isFace = i === N - 1; bg.setTransform(1, 0, 0, cw / ch, cols / 2, rows / 2); bg.transform(cs, sn * sp, 0, cp, z * sn, -z * cs * sp); bg.scale(logoU / SZ, logoU / SZ); bg.drawImage(isFace ? state.shape.face : state.shape.side, -SZ / 2, -SZ / 2); } bg.setTransform(1, 0, 0, 1, 0, 0); const data = bg.getImageData(0, 0, cols, rows).data; g.fillStyle = p.bg; g.fillRect(0, 0, W, H); g.font = fs + 'px ui-monospace, Menlo, Consolas, monospace'; g.textAlign = 'center'; g.textBaseline = 'middle'; const chars = Array.from(SETS[p.charset]); const ox = (W - cols * cw) / 2 + cw / 2, oy = (H - rows * ch) / 2 + ch / 2; const c1 = kit.color.parse(p.ink2), c2 = kit.color.parse(p.ink); // Group by character to limit style changes: bucket by (char, shade) const shades = 6; const buckets = new Map(); for (let j = 0; j < rows; j++) { for (let i = 0; i < cols; i++) { const v = data[(j * cols + i) * 4] / 255; if (v < 0.04) continue; const l = Math.pow(v, p.gamma); const ci = Math.min(chars.length - 1, Math.floor(l * chars.length)); if (ci === 0) continue; const sh = Math.min(shades - 1, Math.floor(v * shades)); const kk = sh * 100 + ci; let arr = buckets.get(kk); if (!arr) { arr = []; buckets.set(kk, arr); } arr.push(ox + i * cw, oy + j * ch); } } buckets.forEach((arr, kk) => { const sh = Math.floor(kk / 100), ci = kk % 100; g.fillStyle = kit.color.css(kit.color.mix(c1, c2, sh / (shades - 1))); const chr = chars[ci]; for (let n = 0; n < arr.length; n += 2) g.fillText(chr, arr[n], arr[n + 1]); }); }, });37:["$","$L40",null,{"spec":{"code":"$41","name":"ASCII Logo Extrude","presets":[{"name":"Terminal","values":{"bg":"#06120a","ink":"#7dffa0","cell":10,"ink2":"#1a7a3a","charset":"binary"}},{"name":"Paper print","values":{"bg":"#efe9dc","ink":"#15171c","ink2":"#d8402a","gamma":1.3,"source":"asterisk","charset":"classic"}},{"name":"Blocks","values":{"bg":"#10092b","ink":"#ffd9a0","cell":14,"ink2":"#6c4bff","motion":"sway","charset":"blocks"}},{"name":"Deep extrude","values":{"cell":8,"tilt":35,"depth":1,"source":"type","charset":"code"}}],"animated":true,"renderer":"canvas2d","sections":[{"label":"Logo","controls":[{"key":"source","type":"select","label":"Logo","default":"mark","options":[{"label":"Demo: Mark","value":"mark"},{"label":"Demo: Asterisk","value":"asterisk"},{"label":"Demo: Type","value":"type"},{"label":"Imported SVG / image","value":"image"}]},{"key":"image","type":"image","label":"Import SVG"},{"key":"invert","type":"toggle","label":"Invert shape (imports without transparency)","default":false}]},{"label":"3D","controls":[{"key":"follow","type":"toggle","label":"Follow mouse on hover","default":true},{"key":"depth","max":1.2,"min":0.05,"step":0.01,"type":"slider","label":"Extrusion depth","default":0.4},{"key":"size","max":1,"min":0.3,"step":0.01,"type":"slider","label":"Logo size","default":0.62},{"key":"tilt","max":60,"min":-60,"step":1,"type":"slider","label":"Tilt","default":22},{"key":"motion","type":"select","label":"Idle motion","default":"spin","options":[{"label":"Full spin","value":"spin"},{"label":"Sway","value":"sway"},{"label":"Still","value":"still"}]},{"key":"speed","max":3,"min":0.1,"step":0.01,"type":"slider","label":"Speed","default":0.8}]},{"label":"ASCII","controls":[{"key":"charset","type":"select","label":"Characters","default":"classic","options":[{"label":"Classic","value":"classic"},{"label":"Blocks","value":"blocks"},{"label":"Binary","value":"binary"},{"label":"Code","value":"code"}]},{"key":"cell","max":28,"min":6,"step":0.5,"type":"slider","label":"Character size","default":11},{"key":"gamma","max":2,"min":0.4,"step":0.01,"type":"slider","label":"Density","default":0.9}]},{"label":"Colors","controls":[{"key":"bg","type":"color","label":"Background","default":"#0d0f14"},{"key":"ink","type":"color","label":"Light ink","default":"#f4f1e6"},{"key":"ink2","type":"color","label":"Shadow ink","default":"#ff5a36"}]}],"description":"Imports a logo (SVG/PNG), extrudes it in 3D, spins it or lets it follow the mouse, and renders it as ASCII characters."},"versionId":"69b389e4-4224-454e-a806-79edca1168aa","toolId":"ae999448-5b7f-4640-a477-c0d8feb1c1ef","carry":{"bg":"#1a35e8","ink":"#f4f1e6","cell":13,"ink2":"#ffffff","size":0.55,"tilt":-47,"depth":0.59,"gamma":0.9,"image":"r2:e51c39f2-21ca-4572-abad-b92fea290b3a/tool-image/8686de12-72af-4e60-9f98-27ad44ed7269.png","speed":0.57,"follow":true,"invert":false,"motion":"spin","source":"image","charset":"binary"},"reportErrors":true,"footer":"$L42","headExtra":"$L43"}] 39:null 3f:[["$","title","0",{"children":"ASCII Logo Extrude · Blueprint"}],["$","meta","1",{"name":"description","content":"Imports a logo (SVG/PNG), extrudes it in 3D, spins it or lets it follow the mouse, and renders it as ASCII characters."}],["$","link","2",{"rel":"canonical","href":"https://blueprint.page/p/ascii-logo-extrude"}],["$","meta","3",{"property":"og:title","content":"ASCII Logo Extrude"}],["$","meta","4",{"property":"og:description","content":"Imports a logo (SVG/PNG), extrudes it in 3D, spins it or lets it follow the mouse, and renders it as ASCII characters."}],["$","meta","5",{"property":"og:url","content":"https://blueprint.page/p/ascii-logo-extrude"}],["$","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":"ASCII Logo Extrude"}],["$","meta","11",{"name":"twitter:description","content":"Imports a logo (SVG/PNG), extrudes it in 3D, spins it or lets it follow the mouse, and renders it as ASCII characters."}],["$","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",{}]]