Code of "Adaptive Continuous Hilbert Image Maker"

See the code below run on a page
Someone on a site asked if code for the "adaptive continuous Hilbert Image Maker" was FOSS.
And since I got ChatGPT to code the whole thing through vibe coding, I think it is FOSS.
Either way I am sharing it because it's was asked.
Code below:

<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Adaptive Continuous Hilbert Image Maker</title>
<style>
.hilbert-tool{
  --bg:#101217;--panel:#1a1f27;--panel2:#242b35;
  --border:#3a4351;--text:#f5f7fb;--muted:#aab3c2;--accent:#80aaff;
  min-height:100vh;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding:1px 0;
}
.hilbert-tool, .hilbert-tool *{box-sizing:border-box}

.hilbert-tool .app{width:min(1220px,calc(100% - 28px));margin:auto;padding:24px 0 40px}
.hilbert-tool h1{margin:0 0 8px;font-size:clamp(1.55rem,3vw,2.35rem)}
.hilbert-tool .intro{margin:0 0 20px;color:var(--muted);line-height:1.5}
.hilbert-tool .layout{display:grid;grid-template-columns:minmax(270px,350px) minmax(0,1fr);gap:18px;align-items:start}
.hilbert-tool .panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}
.hilbert-tool .controls{position:sticky;top:14px}
.hilbert-tool .control{margin-bottom:17px}
.hilbert-tool label{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-weight:650}
.hilbert-tool .value{color:var(--accent);font-variant-numeric:tabular-nums}
.hilbert-tool input[type=file],.hilbert-tool button{width:100%;font:inherit}
.hilbert-tool input[type=file]{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--panel2);color:var(--text)}
.hilbert-tool input[type=range]{width:100%;accent-color:var(--accent)}
.hilbert-tool .check-row{display:flex;align-items:center;gap:9px;margin-bottom:17px}
.hilbert-tool .check-row input{width:18px;height:18px;accent-color:var(--accent)}
.hilbert-tool .check-row label{display:inline;margin:0}
.hilbert-tool button{border:1px solid transparent;border-radius:11px;padding:11px 14px;background:var(--accent);color:#07101f;font-weight:750;cursor:pointer}
.hilbert-tool button.secondary{margin-top:9px;background:var(--panel2);color:var(--text);border-color:var(--border)}
.hilbert-tool button:disabled{opacity:.45;cursor:not-allowed}
.hilbert-tool .help{margin:7px 0 0;color:var(--muted);font-size:.88rem;line-height:1.42}
.hilbert-tool .preview-wrap{min-height:420px;display:grid;place-items:center;border-radius:13px;overflow:hidden;background:#20252d}
.hilbert-tool canvas{display:block;width:min(100%,800px);height:auto;background:white}
.hilbert-tool .status{min-height:1.5em;margin-top:12px;color:var(--muted);font-size:.93rem}
.hilbert-tool .status.error{color:#ff9b9b}
.hilbert-tool .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.hilbert-tool .stat{padding:10px;background:var(--panel2);border:1px solid var(--border);border-radius:10px}
.hilbert-tool .stat-name{display:block;color:var(--muted);font-size:.78rem;margin-bottom:3px}
.hilbert-tool .stat-value{font-weight:750;font-variant-numeric:tabular-nums}
@media(max-width:840px){
  .hilbert-tool .layout{grid-template-columns:1fr}
  .hilbert-tool .controls{position:static}
  .hilbert-tool .preview-wrap{min-height:280px}
}
</style>
</head>
<body>
<div class="hilbert-tool">
<div class="app">
  <h1>Adaptive Continuous Hilbert Image Maker</h1>
  <p class="intro">
    One recursive Hilbert path covers the whole square. Bright regions use large Hilbert cells,
    while dark regions recursively split into smaller Hilbert cells.
  </p>

<div class="layout">
    <aside class="panel controls">
      <div class="control">
        <label for="imageInput">Choose an image</label>
        <input accept="image/*" id="imageInput" type="file" />
        <p class="help">The source is center-cropped to a square.</p>
      </div>

<div class="control">
        <label for="lineWidth"><span>Line width</span><span class="value" id="lineWidthValue">1.4 px</span></label>
        <input id="lineWidth" max="7" min="0.3" step="0.1" type="range" value="1.4" />
      </div>

<div class="control">
        <label for="minDepth"><span>Light-area detail</span><span class="value" id="minDepthValue">4</span></label>
        <input id="minDepth" max="7" min="2" step="1" type="range" value="4" />
        <p class="help">Sets the coarsest Hilbert structure visible in bright areas.</p>
      </div>

<div class="control">
        <label for="maxDepth"><span>Dark-area detail</span><span class="value" id="maxDepthValue">9</span></label>
        <input id="maxDepth" max="11" min="5" step="1" type="range" value="9" />
        <p class="help">Higher values add much finer Hilbert turns in dark regions.</p>
      </div>

<div class="control">
        <label for="response"><span>Darkness response</span><span class="value" id="responseValue">1.15</span></label>
        <input id="response" max="3" min="0.35" step="0.05" type="range" value="1.15" />
      </div>

<div class="control">
        <label for="contrast"><span>Contrast</span><span class="value" id="contrastValue">1.00</span></label>
        <input id="contrast" max="2.5" min="0.5" step="0.05" type="range" value="1" />
      </div>

<div class="control">
        <label for="blur"><span>Smoothing</span><span class="value" id="blurValue">2 px</span></label>
        <input id="blur" max="12" min="0" step="1" type="range" value="2" />
      </div>

<div class="check-row">
        <input id="invert" type="checkbox" />
        <label for="invert">Invert light and dark</label>
      </div>

<button disabled="" id="downloadBtn" type="button">Download 4000 × 4000 PNG</button>
      <button class="secondary" disabled="" id="redrawBtn" type="button">Redraw preview</button>
    </aside>

<main class="panel">
      <div class="preview-wrap">
        <canvas height="800" id="preview" width="800"></canvas>
      </div>
      <div aria-live="polite" class="status" id="status">Choose an image to begin.</div>
      <div class="stats">
        <div class="stat"><span class="stat-name">Topology</span><span class="stat-value">Adaptive Hilbert</span></div>
        <div class="stat"><span class="stat-name">Export</span><span class="stat-value">4000 × 4000</span></div>
        <div class="stat"><span class="stat-name">Curve points</span><span class="stat-value" id="pointCount">0</span></div>
      </div>
    </main>
  </div>
</div>
</div>

const PREVIEW_SIZE=800, EXPORT_SIZE=4000, SAMPLE_SIZE=600;

const e={
  image:document.getElementById("imageInput"),
  canvas:document.getElementById("preview"),
  line:document.getElementById("lineWidth"),
  minDepth:document.getElementById("minDepth"),
  maxDepth:document.getElementById("maxDepth"),
  response:document.getElementById("response"),
  contrast:document.getElementById("contrast"),
  blur:document.getElementById("blur"),
  invert:document.getElementById("invert"),
  download:document.getElementById("downloadBtn"),
  redraw:document.getElementById("redrawBtn"),
  status:document.getElementById("status"),
  pointCount:document.getElementById("pointCount"),
  lineV:document.getElementById("lineWidthValue"),
  minV:document.getElementById("minDepthValue"),
  maxV:document.getElementById("maxDepthValue"),
  responseV:document.getElementById("responseValue"),
  contrastV:document.getElementById("contrastValue"),
  blurV:document.getElementById("blurValue")
};

const pctx=e.canvas.getContext("2d",{alpha:false});
pctx.fillStyle="#fff";pctx.fillRect(0,0,PREVIEW_SIZE,PREVIEW_SIZE);

let bitmap=null;
let lum=null;
let integral=null;
let cachedPath=null;
let cachedKey="";
let busy=false;
let timer=0;

function setStatus(t,error=false){
  e.status.textContent=t;
  e.status.classList.toggle("error",error);
}

function labels(){
  e.lineV.textContent=Number(e.line.value).toFixed(1)+" px";
  e.minV.textContent=e.minDepth.value;
  e.maxV.textContent=e.maxDepth.value;
  e.responseV.textContent=Number(e.response.value).toFixed(2);
  e.contrastV.textContent=Number(e.contrast.value).toFixed(2);
  e.blurV.textContent=e.blur.value+" px";
}

function key(){
  return [e.minDepth.value,e.maxDepth.value,e.response.value,e.contrast.value,e.blur.value,e.invert.checked].join("|");
}

function schedule(){
  labels();
  if(!bitmap||busy)return;
  clearTimeout(timer);
  timer=setTimeout(renderPreview,100);
}

[e.line,e.minDepth,e.maxDepth,e.response,e.contrast,e.blur,e.invert].forEach(x=>{
  x.addEventListener("input",schedule);
  x.addEventListener("change",schedule);
});

e.redraw.addEventListener("click",renderPreview);

e.image.addEventListener("change",async()=>{
  const file=e.image.files&&e.image.files[0];
  if(!file)return;
  try{
    setStatus("Loading image...");
    bitmap=await createImageBitmap(file);
    buildSource();
    cachedPath=null;
    e.download.disabled=false;
    e.redraw.disabled=false;
    await renderPreview();
  }catch(err){
    console.error(err);
    setStatus("Could not load that image.",true);
  }
});

function buildSource(){
  const c=document.createElement("canvas");
  c.width=SAMPLE_SIZE;c.height=SAMPLE_SIZE;
  const ctx=c.getContext("2d",{willReadFrequently:true});
  const side=Math.min(bitmap.width,bitmap.height);
  const sx=(bitmap.width-side)/2, sy=(bitmap.height-side)/2;

ctx.fillStyle="#fff";
  ctx.fillRect(0,0,SAMPLE_SIZE,SAMPLE_SIZE);
  const b=Number(e.blur.value);
  ctx.filter=b?`blur(${b}px)`:"none";
  ctx.drawImage(bitmap,sx,sy,side,side,0,0,SAMPLE_SIZE,SAMPLE_SIZE);
  ctx.filter="none";

const data=ctx.getImageData(0,0,SAMPLE_SIZE,SAMPLE_SIZE).data;
  lum=new Float32Array(SAMPLE_SIZE*SAMPLE_SIZE);

for(let i=0,p=0;i<data.length;i+=4,p++){
    const a=data[i+3]/255;
    const r=data[i]*a+255*(1-a);
    const g=data[i+1]*a+255*(1-a);
    const b2=data[i+2]*a+255*(1-a);
    lum[p]=(0.2126*r+0.7152*g+0.0722*b2)/255;
  }
  buildIntegral();
}

function avgLum(nx,ny,nw,nh){
  const s=SAMPLE_SIZE+1;
  const x0=Math.max(0,Math.min(SAMPLE_SIZE,Math.floor(nx*SAMPLE_SIZE)));
  const y0=Math.max(0,Math.min(SAMPLE_SIZE,Math.floor(ny*SAMPLE_SIZE)));
  const x1=Math.max(x0+1,Math.min(SAMPLE_SIZE,Math.ceil((nx+nw)*SAMPLE_SIZE)));
  const y1=Math.max(y0+1,Math.min(SAMPLE_SIZE,Math.ceil((ny+nh)*SAMPLE_SIZE)));
  const sum=integral[y1*s+x1]-integral[y0*s+x1]-integral[y1*s+x0]+integral[y0*s+x0];
  return sum/((x1-x0)*(y1-y0));
}

function darknessForCell(x0,y0,xi,xj,yi,yj){
  const corners=[
    [x0,y0],
    [x0+xi,y0+xj],
    [x0+yi,y0+yj],
    [x0+xi+yi,y0+xj+yj]
  ];
  const xs=corners.map(p=>p[0]);
  const ys=corners.map(p=>p[1]);
  const minX=Math.max(0,Math.min(...xs));
  const minY=Math.max(0,Math.min(...ys));
  const maxX=Math.min(1,Math.max(...xs));
  const maxY=Math.min(1,Math.max(...ys));
  let d=1-avgLum(minX,minY,Math.max(1e-6,maxX-minX),Math.max(1e-6,maxY-minY));
  if(e.invert.checked)d=1-d;
  d=(d-.5)*Number(e.contrast.value)+.5;
  d=Math.max(0,Math.min(1,d));
  return Math.pow(d,Number(e.response.value));
}

function addPoint(arr,x,y){
  const n=arr.length;
  if(n>=2){
    const px=arr[n-2],py=arr[n-1];
    if(Math.abs(px-x)<1e-10&&Math.abs(py-y)<1e-10)return;
  }
  arr.push(x,y);
}

/*
  Recursive Hilbert construction.

x0,y0 = cell origin
  xi,xj = first basis vector
  yi,yj = second basis vector

Every child inherits a proper Hilbert orientation. Refining or stopping
  therefore changes local scale without changing the global Hilbert traversal.
*/
function adaptiveHilbert(arr,x0,y0,xi,xj,yi,yj,depth){
  const minD=Number(e.minDepth.value);
  const maxD=Math.max(minD,Number(e.maxDepth.value));
  const dark=darknessForCell(x0,y0,xi,xj,yi,yj);
  const target=minD+dark*(maxD-minD);

if(depth>=maxD || depth>=target){
    addPoint(arr,x0+(xi+yi)/2,y0+(xj+yj)/2);
    return;
  }

adaptiveHilbert(arr,
    x0,y0,
    yi/2,yj/2,
    xi/2,xj/2,
    depth+1
  );

adaptiveHilbert(arr,
    x0+xi/2,y0+xj/2,
    xi/2,xj/2,
    yi/2,yj/2,
    depth+1
  );

adaptiveHilbert(arr,
    x0+xi/2+yi/2,y0+xj/2+yj/2,
    xi/2,xj/2,
    yi/2,yj/2,
    depth+1
  );

adaptiveHilbert(arr,
    x0+xi/2+yi,y0+xj/2+yj,
    -yi/2,-yj/2,
    -xi/2,-xj/2,
    depth+1
  );
}

function buildPath(){
  const arr=[];
  adaptiveHilbert(arr,0,0,1,0,0,1,0);
  return new Float32Array(arr);
}

function getPath(){
  const k=key();
  if(!cachedPath||cachedKey!==k){
    cachedPath=buildPath();
    cachedKey=k;
  }
  return cachedPath;
}

function draw(ctx,size){
  const path=getPath();
  const scale=size/PREVIEW_SIZE;
  const margin=Math.max(2,Number(e.line.value)*scale*1.5);
  const usable=size-2*margin;

ctx.fillStyle="#fff";
  ctx.fillRect(0,0,size,size);
  ctx.strokeStyle="#000";
  ctx.lineWidth=Number(e.line.value)*scale;
  ctx.lineCap="square";
  ctx.lineJoin="miter";
  ctx.beginPath();

for(let i=0;i<path.length;i+=2){
    const x=margin+path[i]*usable;
    const y=margin+path[i+1]*usable;
    if(i===0)ctx.moveTo(x,y);
    else ctx.lineTo(x,y);
  }
  ctx.stroke();
  return path.length/2;
}

async function renderPreview(){
  if(!bitmap||busy)return;
  busy=true;
  e.redraw.disabled=true;
  e.download.disabled=true;
  setStatus("Building adaptive Hilbert recursion...");
  await new Promise(r=>requestAnimationFrame(r));

try{
    buildSource();
    cachedPath=null;
    const n=draw(pctx,PREVIEW_SIZE);
    e.pointCount.textContent=Math.round(n).toLocaleString();
    setStatus("Preview ready. Dark regions recurse deeper while preserving Hilbert traversal.");
  }catch(err){
    console.error(err);
    setStatus("Could not render the curve.",true);
  }finally{
    busy=false;
    e.redraw.disabled=false;
    e.download.disabled=false;
  }
}

e.download.addEventListener("click",async()=>{
  if(!bitmap||busy)return;
  busy=true;
  e.redraw.disabled=true;
  e.download.disabled=true;
  setStatus("Rendering 4000 × 4000 PNG...");
  await new Promise(r=>requestAnimationFrame(r));

try{
    const c=document.createElement("canvas");
    c.width=EXPORT_SIZE;c.height=EXPORT_SIZE;
    const ctx=c.getContext("2d",{alpha:false});
    draw(ctx,EXPORT_SIZE);

const blob=await new Promise((resolve,reject)=>{
      c.toBlob(b=>b?resolve(b):reject(new Error("PNG creation failed")),"image/png");
    });

labels();
})();
</script>
</body>
</html>

Search This Blog

Your Quiet Friend

Code of "Adaptive Continuous Hilbert Image Maker"

Comments

Post a Comment

Popular posts from this blog

Seamless Doodle Tile Maker

Center Objects Based (COB) Morphing of two images

Honeycomb/Hexagon Triangle Doodle Tile Maker