Sync: Create sune 'Meddler'

meddler.sune

@@ -0,0 +1 @@
+[{"id":"99k0yae","name":"Meddler","pinned":false,"avatar":"","url":"gh://multipleof4/.sune/meddler.sune","updatedAt":1757186339253,"settings":{"model":"openai/gpt-5-chat","temperature":"","top_p":"","top_k":"","frequency_penalty":"","presence_penalty":"","repetition_penalty":"","min_p":"","top_a":"","max_tokens":"","verbosity":"","reasoning_effort":"default","system_prompt":"","html":"<div class=\"relative max-w-2xl mx-auto my-4 overflow-hidden text-white bg-slate-900/70 backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl font-sans\">\n  <div class=\"absolute top-1/2 left-1/2 w-[500px] h-[500px] bg-gradient-to-tr from-purple-600 to-sky-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-25 blur-3xl animate-pulse\"></div>\n  <div class=\"relative z-10 flex flex-col gap-4 p-4 sm:p-6\">\n    <div class=\"flex justify-between items-baseline\">\n      <h2 class=\"text-xl font-bold tracking-tight text-white\">Pixel Meddler</h2>\n      <span class=\"text-xs font-mono text-white/40\">v1.0.0</span>\n    </div>\n    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n      <canvas id=\"c1\" width=\"480\" height=\"360\" class=\"w-full h-auto bg-slate-800 rounded-lg shadow-md aspect-[4/3]\"></canvas>\n      <canvas id=\"c2\" width=\"480\" height=\"360\" class=\"w-full h-auto bg-slate-800 rounded-lg shadow-md aspect-[4/3]\"></canvas>\n    </div>\n    <p class=\"text-sm text-center text-white/70\">This demo uses a fast pseudo-random number generator to swap pixels between the two images. Each pixel is swapped exactly once per cycle.</p>\n  </div>\n</div>\n<script>\n(()=>{\n  const S_ID=window.SUNE.id;\n  const W=480,H=360;\n  function bitmeddler(max,seed){if(max<2||max>2147483647)throw\"max must be between 2-2147483647\";this.maximum=max;this.start=(seed||1)%max;this.cur=this.start;this.MASK=[3,6,9,29,54,105,166,380,813,1266,3380,4937,9010,26265,53909,76083,182590,365274,743546,1045909,1226300,3039854,5468886,15510030,19637837,57462151,78667635,248460149,441364466,698115563,1985710819,3032230748][this._msb(this.maximum)-2];this.next=this._next}\n  bitmeddler.prototype={_next:function(){do{this.cur=this.cur&1?(this.cur>>1)^this.MASK:this.cur>>=1}while(this.cur>this.maximum);if(this.cur===this.start)this.next=this._done;return this.cur},_done:function(){return null},reset:function(){this.next=this._next;this.cur=this.start},_msb:function(v){let r=0;while(v){v>>=1;r++}return r}};\n\n  const c1El=document.getElementById('c1'), c2El=document.getElementById('c2');\n  if(!c1El || !c2El){console.error('Sune canvases not found');return}\n  c1El.id=`c1_${S_ID}`;c2El.id=`c2_${S_ID}`;\n  const ctx1=c1El.getContext('2d',{willReadFrequently:true}),ctx2=c2El.getContext('2d',{willReadFrequently:true});\n  \n  const bm=new bitmeddler(W*H);\n  let loaded=0,timer=null;\n\n  const loadImg=(ctx,url)=>{const img=new Image;img.crossOrigin=\"anonymous\";img.onload=()=>{ctx.drawImage(img,0,0,W,H);if(++loaded===2)timer=setInterval(fizzle,50)};img.src=url};\n  const fizzle=()=>{\n    const d1=ctx1.getImageData(0,0,W,H),d2=ctx2.getImageData(0,0,W,H);\n    const L=d1.data,R=d2.data;\n    let o;\n    for(let i=0;i<2000;i++){\n      o=bm.next();\n      if(o==null)break;\n      o*=4;\n      [L[o],R[o]]=[R[o],L[o]];\n      [L[o+1],R[o+1]]=[R[o+1],L[o+1]];\n      [L[o+2],R[o+2]]=[R[o+2],L[o+2]];\n      [L[o+3],R[o+3]]=[R[o+3],L[o+3]];\n    }\n    ctx1.putImageData(d1,0,0);\n    ctx2.putImageData(d2,0,0);\n    if(o==null){clearInterval(timer);setTimeout(()=>{bm.reset();timer=setInterval(fizzle,50)},2000)}\n  };\n  \n  loadImg(ctx1,`https://picsum.photos/${W}/${H}?random=a${S_ID}`);\n  loadImg(ctx2,`https://picsum.photos/${W}/${H}?random=b${S_ID}`);\n})();\n</script>\n","extension_html":"<sune src='https://raw.githubusercontent.com/sune-org/store/refs/heads/main/sync.sune' private />"},"storage":{}}]