CCF Set with Null Cone — Light-Matter and Light-Space
Simulator
id
2604275414333
safecreative_url
https://www.safecreative.org/work/2604275414333-ccf-set-with-null-cone-light-matter-and-light-space-recurrences
title
CCF Set with Null Cone — Light-Matter and Light-Space
date
04/27/2026
text
Show source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>CCF Set ↔ CCF Null Cone Set</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;font-family:'Courier New',monospace;overflow:hidden;touch-action:none}
canvas{display:block;width:100vw;height:100vh;cursor:crosshair;image-rendering:pixelated}
#toggle{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:20;display:flex;border:1px solid #444;border-radius:3px;overflow:hidden}
#toggle button{background:#111;color:#777;border:none;font-family:inherit;font-size:10px;padding:6px 12px;cursor:pointer}
#toggle button.on{background:#333;font-weight:bold}
#toggle .ccf.on{color:#c8b875}
#toggle .mx.on{color:#88aaff}
#hud{position:fixed;top:0;left:0;right:0;padding:6px 10px;background:linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0));z-index:10;pointer-events:none;display:flex;justify-content:space-between}
.title{font-size:12px;font-weight:bold;letter-spacing:1px}
.title.ccf{color:#c8b875}
.title.mx{color:#88aaff}
.eq{font-size:9px;color:#666}
.st{font-size:8px;color:#555;text-align:right}
.st b{color:#999}
#log{position:fixed;bottom:6px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none;font-size:8px;color:#333}
</style>
</head>
<body>
<canvas id="cv"></canvas>
<div id="toggle">
<button class="ccf on" id="b0" onclick="go(0)">CCF Set</button>
<button class="mx" id="b1" onclick="go(1)">CCF Null Cone Set</button>
</div>
<div id="hud">
<div>
<div class="title ccf" id="mt">CCF Set</div>
<div class="eq" id="mf">Eₙ₊₁ = Eₙ² + Eₙ₋₁</div>
<div class="eq" id="mp">The Light-Matter Recurrence</div>
</div>
<div>
<div class="st">zoom <b id="zv">×1</b></div>
<div class="st">iter <b id="iv">80</b></div>
</div>
</div>
<div id="log">scroll · pinch · drag</div>
<script>
var cv=document.getElementById('cv'),cx=cv.getContext('2d',{alpha:false});
var W,H,img,mode=0,sX,sY,zm,it;
var P=new Uint8Array(768);
for(var i=0;i<255;i++){var r,g,b;
if(i<32){r=i*8;g=i*8;b=127-i*4}
else if(i<128){r=255;g=255-(i-32)*2.67|0;b=(i-32)*1.33|0}
else if(i<192){r=255-(i-128)*4;g=(i-128)*3;b=127-(i-128)}
else{r=0;g=192-(i-192)*3;b=64+(i-192)}
P[i*3]=r<0?0:r>255?255:r;P[i*3+1]=g<0?0:g>255?255:g;P[i*3+2]=b<0?0:b>255?255:b}
function sz(){W=cv.width=window.innerWidth;H=cv.height=window.innerHeight;img=cx.createImageData(W,H)}
function iv(){
if(mode===0){
sX=W/2|0;sY=H/2|0;zm=Math.min(W,H)*0.6|0
}else{
sX=W/2|0;sY=H/2|0;zm=Math.min(W,H)/3.5|0
}
it=80}
function go(m){mode=m;
document.getElementById('b0').className=m?'ccf':'ccf on';
document.getElementById('b1').className=m?'mx on':'mx';
var mt=document.getElementById('mt');
mt.textContent=m?'CCF Null Cone Set':'CCF Set';
mt.className=m?'title mx':'title ccf';
document.getElementById('mf').textContent=m?'Eₙ₊₁ = Eₙ² − Eₙ₋₁':'Eₙ₊₁ = Eₙ² + Eₙ₋₁';
document.getElementById('mp').textContent=m?'The Light-Space Recurrence':'The Light-Matter Recurrence';
iv();draw()}
function draw(){
var t0=performance.now();
var d=img.data;
var beta=mode===0?1:-1;
for(var py=0;py<H;py++){
var yn=(py-sY)/zm;
for(var px=0;px<W;px++){
var xn=(px-sX)/zm;
var n=0;
var pr=0,pi=0,zr=xn,zi=yn,nr,ni;
while(n<it){if(zr*zr+zi*zi>=10000)break;
nr=zr*zr-zi*zi+beta*pr;ni=2*zr*zi+beta*pi;
pr=zr;pi=zi;zr=nr;zi=ni;n++}
var o=(py*W+px)*4;
if(n>=it){d[o]=0;d[o+1]=0;d[o+2]=0}
else{var c=n%255;d[o]=P[c*3];d[o+1]=P[c*3+1];d[o+2]=P[c*3+2]}
d[o+3]=255}}
cx.putImageData(img,0,0);
var dt=performance.now()-t0|0;
document.getElementById('log').textContent=dt+'ms · scroll/pinch zoom · drag pan';
hud()}
function hud(){
var bz=mode===0?Math.min(W,H)*0.6:Math.min(W,H)/3.5;
var z=zm/bz;
var zs;
if(z>=1e6)zs='×'+(z/1e6).toFixed(1)+'M';
else if(z>=1e3)zs='×'+(z/1e3).toFixed(1)+'K';
else zs='×'+z.toFixed(1);
document.getElementById('zv').textContent=zs;
document.getElementById('iv').textContent=it}
var drag=0,dx,dy,pinch=0,pd0,zm0,rto=null;
function sched(){if(rto)clearTimeout(rto);rto=setTimeout(draw,30);hud()}
cv.addEventListener('wheel',function(e){e.preventDefault();
var mx=e.clientX,my=e.clientY;
var xn=(mx-sX)/zm,yn=(my-sY)/zm;
zm=Math.max(10,zm*(e.deltaY<0?1.3:0.77)|0);
sX=mx-xn*zm+0.5|0;sY=my-yn*zm+0.5|0;
var bz=mode===0?Math.min(W,H)*0.6:Math.min(W,H)/3.5;
it=Math.max(50,Math.min(1500,50+Math.log(zm/bz+1)*80|0));
sched()},{passive:false});
cv.addEventListener('mousedown',function(e){drag=1;dx=e.clientX;dy=e.clientY});
cv.addEventListener('mousemove',function(e){if(!drag)return;sX+=e.clientX-dx;sY+=e.clientY-dy;dx=e.clientX;dy=e.clientY;sched()});
cv.addEventListener('mouseup',function(){drag=0});
cv.addEventListener('touchstart',function(e){e.preventDefault();
if(e.touches.length===2){pinch=1;var a=e.touches[0],b=e.touches[1];pd0=Math.hypot(a.clientX-b.clientX,a.clientY-b.clientY);zm0=zm}
else{drag=1;dx=e.touches[0].clientX;dy=e.touches[0].clientY}},{passive:false});
cv.addEventListener('touchmove',function(e){e.preventDefault();
if(e.touches.length===2&&pinch){var a=e.touches[0],b=e.touches[1];
var dist=Math.hypot(a.clientX-b.clientX,a.clientY-b.clientY);
var cx2=(a.clientX+b.clientX)/2,cy2=(a.clientY+b.clientY)/2;
var xn=(cx2-sX)/zm,yn=(cy2-sY)/zm;
zm=Math.max(10,zm0*dist/pd0|0);
sX=cx2-xn*zm+0.5|0;sY=cy2-yn*zm+0.5|0;
var bz=mode===0?Math.min(W,H)*0.6:Math.min(W,H)/3.5;
it=Math.max(50,Math.min(1500,50+Math.log(zm/bz+1)*80|0));
sched()}
else if(drag&&e.touches.length===1){sX+=e.touches[0].clientX-dx;sY+=e.touches[0].clientY-dy;dx=e.touches[0].clientX;dy=e.touches[0].clientY;sched()}},{passive:false});
cv.addEventListener('touchend',function(e){if(e.touches.length<2)pinch=0;if(e.touches.length<1)drag=0});
sz();iv();draw();
window.addEventListener('resize',function(){sz();iv();draw()});
</script>
</body>
</html>tweet_url
SHA-256