Sphere explorer: full yantra (bhupura square and gates), with an outer toggle

sphere/index.html

@@ -55,6 +55,7 @@ input[type=range]{width:100%;accent-color:var(--down)}
       <button id="t-sphere" aria-pressed="true">sphere</button>
       <button id="t-inv" aria-pressed="true">inverse</button>
       <button id="t-plane" aria-pressed="true">flat shadow</button>
+      <button id="t-outer" aria-pressed="true">outer</button>
       <button id="t-spin" aria-pressed="true">auto-spin</button>
     </div>
   </div>
@@ -90,7 +91,11 @@ function seg(a,b,n=72){const o=[];for(let i=0;i<=n;i++){const t=i/n;o.push([a[0]
 const tris=T.map(([lx,by,ay,rx,ty])=>{const A=P(lx,by),B=P(150,ay),Cc=P(rx,by);return{up:!!ty,pts:[...seg(A,B),...seg(B,Cc).slice(1),...seg(Cc,A).slice(1)]}});
 const circ=(r,n=256)=>Array.from({length:n+1},(_,i)=>{const a=i/n*Math.PI*2;return[r*Math.cos(a),r*Math.sin(a)]});
 function petals(r0,r1,k){const o=[];for(let i=0;i<k;i++){const a0=i/k*Math.PI*2,a1=(i+1)/k*Math.PI*2,am=(a0+a1)/2;const pts=[];for(let j=0;j<=24;j++){const t=j/24;const a=a0+(am-a0)*t;const r=r0+(r1-r0)*Math.sin(t*Math.PI/2);pts.push([r*Math.cos(a),r*Math.sin(a)])}for(let j=0;j<=24;j++){const t=j/24;const a=am+(a1-am)*t;const r=r1-(r1-r0)*(1-Math.cos(t*Math.PI/2));pts.push([r*Math.cos(a),r*Math.sin(a)])}o.push(pts)}return o}
-const decor=[circ(1),circ(1.2),circ(1.42),...petals(1,1.2,8),...petals(1.2,1.42,16)];
+function bhupura(){const q=[[1.6,-1.6],[1.6,-0.6],[1.73,-0.6],[1.73,-1.2],[1.97,-1.2],[1.97,1.2],[1.73,1.2],[1.73,0.6],[1.6,0.6],[1.6,1.6]];const c=[];for(let k=0;k<4;k++){const co=Math.cos(k*Math.PI/2),si=Math.sin(k*Math.PI/2);q.forEach(([x,y])=>c.push([x*co-y*si,x*si+y*co]))}c.push(c[0]);const o=[];for(let i=0;i<c.length-1;i++)o.push(...seg(c[i],c[i+1],60).slice(i?1:0));return o}
+const decorInner=[circ(1)];
+const decorOuter=[circ(1.2),circ(1.4),circ(1.5),...petals(1,1.2,8),...petals(1.2,1.4,16),bhupura()];
+let showOuter=true;
+let decor=[...decorInner,...decorOuter];
 
 let mode='stereo',lift=1;
 function toSphere([x,y]){x*=lift;y*=lift;if(mode==='stereo'){const r2=x*x+y*y,d=r2+1;return new THREE.Vector3(2*x/d,(r2-1)/d,2*y/d)}return new THREE.Vector3(x,-1,y).normalize()}
@@ -153,6 +158,7 @@ $('m-stereo').onclick=()=>setMode('stereo');$('m-gnomo').onclick=()=>setMode('gn
 $('t-sphere').onclick=e=>{showSphere=!showSphere;e.currentTarget.setAttribute('aria-pressed',showSphere);if(!showSphere&&!showPlane){showPlane=true;$('t-plane').setAttribute('aria-pressed','true')}
   if(!showSphere){cam.position.set(0,3.6,0.0001);ctl.target.set(0,-1,0);ctl.autoRotate=false;$('t-spin').setAttribute('aria-pressed','false')}else{cam.position.set(2.6,-2.4,3.2);ctl.target.set(0,0,0)}
   ctl.update();build()};
+$('t-outer').onclick=e=>{showOuter=!showOuter;e.currentTarget.setAttribute('aria-pressed',showOuter);decor=showOuter?[...decorInner,...decorOuter]:[...decorInner];build()};
 $('t-inv').onclick=e=>{showInv=!showInv;e.currentTarget.setAttribute('aria-pressed',showInv);build()};
 $('t-plane').onclick=e=>{showPlane=!showPlane;e.currentTarget.setAttribute('aria-pressed',showPlane);build()};
 $('t-spin').onclick=e=>{ctl.autoRotate=!ctl.autoRotate;e.currentTarget.setAttribute('aria-pressed',ctl.autoRotate)};