@srsdesigndev/pi-loader 1.0.0

package/README.md

@@ -0,0 +1,107 @@
+ex# π Loader
+
+A pi-driven generative art loader. No randomness library. No predefined colors. No loops. Just pure math.
+
+Every bar height, every background color, and every opacity is determined by the next unused digit of π — computed live, used once, discarded forever.
+
+---
+
+## How It Works
+
+Pi is infinite and non-repeating. This project uses that property as an infinite source of deterministic "randomness."
+
+- **10 digits** → mapped to bar heights and opacities
+- **6 digits** → combined into a hex color code for the background
+- Digits 0, 1, 2 → low opacity bars (quiet)
+- Digits 3–9 → full opacity bars (loud)
+- Bar color flips black or white based on background luminance — always readable
+- Every digit is used once and thrown away — never repeated, never stored
+
+The algorithm used is the **Rabinowitz-Wagon spigot algorithm**, implemented in JavaScript using `BigInt` for arbitrary precision. It yields one digit of π at a time, forever.
+
+---
+
+## Demo
+
+Just open `pi-loader-color.html` in any modern browser. No dependencies. No build step. No install.
+
+```bash
+open pi-loader-color.html
+```
+
+---
+
+## Files
+
+```
+pi-loader-color.html   # Full standalone demo — bars + color bg
+pi-loader.html         # Minimal version — bars only, dark bg
+```
+
+---
+
+## The Algorithm
+
+```js
+function* piSpigot() {
+  let q = 1n, r = 0n, t = 1n, k = 1n, n = 3n, l = 3n;
+  while (true) {
+    if (4n * q + r - t < n * t) {
+      yield Number(n);
+      const nr = 10n * (r - n * t);
+      n = 10n * (3n * q + r) / t - 10n * n;
+      q *= 10n;
+      r = nr;
+    } else {
+      const nr = (2n * q + r) * l;
+      const nn = (q * (7n * k) + 2n + r * l) / (t * l);
+      q *= k;
+      t *= l;
+      l += 2n;
+      k += 1n;
+      n = nn;
+      r = nr;
+    }
+  }
+}
+```
+
+Reference: Rabinowitz, S. & Wagon, S. (1995). *A spigot algorithm for the digits of π.*
+
+---
+
+## Digit → Visual Mapping
+
+| Digits consumed | Used for |
+|---|---|
+| 10 | Bar heights (`digit × 5.4 + 6` px) |
+| 6 | Background hex color (`#d3a9f1` etc.) |
+| **16 total** | Per frame |
+
+---
+
+## Why Pi?
+
+Because it's free, infinite, and needs no seed. Most generative art uses `Math.random()` — which is pseudorandom, stateful, and resets. Pi never resets. Pi never repeats. Pi is already there, waiting.
+
+---
+
+## Ideas / Roadmap
+
+- [ ] Map digits to musical notes — a pi-driven melody
+- [ ] Export frames as a GIF
+- [ ] Web component `<pi-loader>`
+- [ ] Configurable bar count, speed, color palette
+- [ ] Visualize digit distribution over time
+
+---
+
+## License
+
+MIT — do whatever you want with it.
+
+---
+
+## Author
+
+Built with curiosity and π.

package/dist/pi-loader.min.js

@@ -0,0 +1 @@
+!function(){"use strict";const t=function*(){let t=1n,e=0n,n=1n,s=1n,i=3n,r=3n;for(;;)if(4n*t+e-n<i*n){yield Number(i);const s=10n*(e-i*n);i=10n*(3n*t+e)/n-10n*i,t*=10n,e=s}else{const a=(2n*t+e)*r,o=(t*(7n*s)+2n+e*r)/(n*r);t*=s,n*=r,r+=2n,s+=1n,i=o,e=a}}();function e(e){const n=[];for(let s=0;s<e;s++)n.push(t.next().value);return n}const n=new Set;let s=null;function i(t){n.forEach(e=>{e._visible&&t-e._lastFrame>=e._interval&&(e._frame(),e._lastFrame=t)}),s=requestAnimationFrame(i)}function r(t,e,n,s,i){const r=t.getAttribute(e);if(null===r)return n;const a=parseFloat(r);return isNaN(a)?n:void 0!==s?function(t,e,n){return Math.min(Math.max(t,e),n)}(a,s,i):a}class a extends HTMLElement{constructor(){super(),this._shadow=this.attachShadow({mode:"open"}),this._bars=[],this._wrapper=null,this._visible=!1,this._lastFrame=0,this._interval=600,this._observer=null}static get observedAttributes(){return["bars","min-height","max-height","width","gap","speed","radius","color","bg","low-opacity","theme","align"]}get config(){return{bars:r(this,"bars",10,3,20),minH:r(this,"min-height",6,1,200),maxH:r(this,"max-height",60,10,400),width:r(this,"width",10,2,100),gap:r(this,"gap",6,0,100),speed:r(this,"speed",600,80,5e3),radius:r(this,"radius",999,0,999),color:this.getAttribute("color")||"auto",bg:this.getAttribute("bg")||"transparent",lowOpacity:r(this,"low-opacity",.2,0,1),theme:this.getAttribute("theme")||"dark",align:this.getAttribute("align")||"center"}}connectedCallback(){this._build(),this._setupObserver(),n.add(this),s||(s=requestAnimationFrame(i))}disconnectedCallback(){n.delete(this),0===n.size&&s&&(cancelAnimationFrame(s),s=null),this._observer&&this._observer.disconnect()}attributeChangedCallback(){this._wrapper&&this._build()}_build(){const t=this.config;this._interval=t.speed,this._shadow.innerHTML="",this._bars=[];const e=document.createElement("style");e.textContent=`\n        :host {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .w {\n          display: inline-flex;\n          align-items: ${"bottom"===t.align?"flex-end":"center"};\n          justify-content: center;\n          gap: ${t.gap}px;\n          height: ${t.maxH+10}px;\n          background: transparent;\n          transition: background 1000ms ease-in-out;\n        }\n        .b {\n          width: ${t.width}px;\n          height: ${t.minH}px;\n          border-radius: ${t.radius}px;\n          background: ${"auto"!==t.color?t.color:"light"===t.theme?"#111":"#fff"};\n          transition:\n            height ${t.speed}ms ease-in-out,\n            opacity ${t.speed}ms ease-in-out,\n            background 1000ms ease-in-out;\n          flex-shrink: 0;\n        }\n      `;const n=document.createElement("div");n.className="w",this._wrapper=n;for(let e=0;e<t.bars;e++){const t=document.createElement("div");t.className="b",n.appendChild(t),this._bars.push(t)}this._shadow.appendChild(e),this._shadow.appendChild(n)}_setupObserver(){this._observer&&this._observer.disconnect(),this._observer=new IntersectionObserver(t=>{this._visible=t[0].isIntersecting},{threshold:.1}),this._observer.observe(this)}_frame(){const t=this.config,n=e(t.bars),s=t.maxH-t.minH;let i="auto"!==t.color?t.color:"light"===t.theme?"#111111":"#ffffff";if("pi"===t.bg){const n=function(t){return"#"+t.map(t=>t.toString(16)).join("")}(e(6));this._wrapper.style.background=n,this.style.setProperty("--pi-bg",n),"auto"===t.color&&(i=function(t){return parseInt(t.slice(1,3),16)/255*.299+parseInt(t.slice(3,5),16)/255*.587+parseInt(t.slice(5,7),16)/255*.114}(n)>.4?"#111111":"#ffffff")}else this._wrapper.style.background="transparent"===t.bg?"transparent":t.bg;n.forEach((e,n)=>{const r=this._bars[n];r&&(r.style.height=t.minH+e/9*s+"px",r.style.opacity=e<=2?t.lowOpacity:1,r.style.background=i)})}}customElements.get("pi-loader")||customElements.define("pi-loader",a)}();

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@srsdesigndev/pi-loader",
+  "version": "1.0.0",
+  "description": "A pi-driven generative loader web component. No randomness. No dependencies. Just π.",
+  "main": "src/pi-loader.js",
+  "module": "src/pi-loader.js",
+  "files": [
+    "src/",
+    "dist/"
+  ],
+  "keywords": [
+    "loader",
+    "loading",
+    "animation",
+    "pi",
+    "web-component",
+    "custom-element",
+    "generative",
+    "math",
+    "zero-dependency"
+  ],
+  "author": "srsdesigndev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/srsdesigndev/pi_loader.git"
+  },
+  "homepage": "https://srsdesigndev.github.io/pi_loader",
+  "bugs": {
+    "url": "https://github.com/srsdesigndev/pi_loader/issues"
+  }
+}

package/src/pi-loader.js

@@ -0,0 +1,262 @@
+/**
+ * pi-loader.js
+ * A pi-driven generative loader web component.
+ * No dependencies. No randomness. Just π.
+ *
+ * Usage:
+ *   <script src="pi-loader.js"></script>
+ *   <pi-loader></pi-loader>
+ *
+ * Attributes:
+ *   bars         {number}  Number of bars. Min: 3, Max: 20. Default: 10
+ *   min-height   {number}  Min bar height in px. Default: 6
+ *   max-height   {number}  Max bar height in px. Default: 60
+ *   width        {number}  Bar width in px. Default: 10
+ *   gap          {number}  Gap between bars in px. Default: 6
+ *   speed        {number}  Frame interval in ms. Default: 600
+ *   radius       {number}  Border radius px. 999 = pill, 0 = square. Default: 999
+ *   color        {string}  Bar color. 'auto' = adapts to bg. Any CSS color. Default: 'auto'
+ *   bg           {string}  'pi' = pi-driven hex, 'transparent', any CSS color. Default: 'transparent'
+ *   low-opacity  {number}  Opacity for digits 0–2. Default: 0.2
+ *   theme        {string}  'dark' or 'light'. Default: 'dark'
+ *   align        {string}  'center' or 'bottom'. Default: 'center'
+ *
+ * Performance:
+ *   - One shared BigInt pi spigot across ALL instances
+ *   - One single requestAnimationFrame loop for ALL instances
+ *   - IntersectionObserver pauses off-screen loaders automatically
+ *   - No setInterval, no polling, no per-instance timers
+ *
+ * @version 2.0.0
+ * @license MIT
+ */
+
+(function () {
+  'use strict';
+
+  // ── Pi Spigot (Rabinowitz-Wagon) ─────────────────────────────────────────
+  // One generator shared globally. Every digit consumed is gone forever.
+  function* piSpigot() {
+    let q = 1n, r = 0n, t = 1n, k = 1n, n = 3n, l = 3n;
+    while (true) {
+      if (4n * q + r - t < n * t) {
+        yield Number(n);
+        const nr = 10n * (r - n * t);
+        n = 10n * (3n * q + r) / t - 10n * n;
+        q *= 10n;
+        r = nr;
+      } else {
+        const nr = (2n * q + r) * l;
+        const nn = (q * (7n * k) + 2n + r * l) / (t * l);
+        q *= k; t *= l; l += 2n; k += 1n;
+        n = nn; r = nr;
+      }
+    }
+  }
+
+  const GLOBAL_GEN = piSpigot();
+
+  function nextDigits(n) {
+    const out = [];
+    for (let i = 0; i < n; i++) out.push(GLOBAL_GEN.next().value);
+    return out;
+  }
+
+  // ── Global RAF scheduler ─────────────────────────────────────────────────
+  // All instances register here. One rAF loop drives everything.
+  const _instances = new Set();
+  let _rafId = null;
+
+  function _tick(now) {
+    _instances.forEach(inst => {
+      if (inst._visible && now - inst._lastFrame >= inst._interval) {
+        inst._frame();
+        inst._lastFrame = now;
+      }
+    });
+    _rafId = requestAnimationFrame(_tick);
+  }
+
+  function _startLoop() {
+    if (!_rafId) _rafId = requestAnimationFrame(_tick);
+  }
+
+  function _stopLoop() {
+    if (_instances.size === 0 && _rafId) {
+      cancelAnimationFrame(_rafId);
+      _rafId = null;
+    }
+  }
+
+  // ── Utilities ────────────────────────────────────────────────────────────
+  function clamp(val, min, max) {
+    return Math.min(Math.max(val, min), max);
+  }
+
+  function getLuminance(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    return 0.299 * r + 0.587 * g + 0.114 * b;
+  }
+
+  function digitsToHex(digits) {
+    return '#' + digits.map(d => d.toString(16)).join('');
+  }
+
+  function parseAttr(el, name, def, min, max) {
+    const raw = el.getAttribute(name);
+    if (raw === null) return def;
+    const num = parseFloat(raw);
+    if (isNaN(num)) return def;
+    return (min !== undefined) ? clamp(num, min, max) : num;
+  }
+
+  // ── Web Component ────────────────────────────────────────────────────────
+  class PiLoader extends HTMLElement {
+
+    constructor() {
+      super();
+      this._shadow   = this.attachShadow({ mode: 'open' });
+      this._bars     = [];
+      this._wrapper  = null;
+      this._visible  = false;
+      this._lastFrame = 0;
+      this._interval = 600;
+      this._observer = null;
+    }
+
+    static get observedAttributes() {
+      return ['bars','min-height','max-height','width','gap',
+              'speed','radius','color','bg','low-opacity','theme','align'];
+    }
+
+    get config() {
+      return {
+        bars:       parseAttr(this, 'bars', 10, 3, 20),
+        minH:       parseAttr(this, 'min-height', 6, 1, 200),
+        maxH:       parseAttr(this, 'max-height', 60, 10, 400),
+        width:      parseAttr(this, 'width', 10, 2, 100),
+        gap:        parseAttr(this, 'gap', 6, 0, 100),
+        speed:      parseAttr(this, 'speed', 600, 80, 5000),
+        radius:     parseAttr(this, 'radius', 999, 0, 999),
+        color:      this.getAttribute('color') || 'auto',
+        bg:         this.getAttribute('bg') || 'transparent',
+        lowOpacity: parseAttr(this, 'low-opacity', 0.2, 0, 1),
+        theme:      this.getAttribute('theme') || 'dark',
+        align:      this.getAttribute('align') || 'center',
+      };
+    }
+
+    connectedCallback() {
+      this._build();
+      this._setupObserver();
+      _instances.add(this);
+      _startLoop();
+    }
+
+    disconnectedCallback() {
+      _instances.delete(this);
+      _stopLoop();
+      if (this._observer) this._observer.disconnect();
+    }
+
+    attributeChangedCallback() {
+      if (this._wrapper) this._build();
+    }
+
+    _build() {
+      const cfg = this.config;
+      this._interval = cfg.speed;
+      this._shadow.innerHTML = '';
+      this._bars = [];
+
+      const style = document.createElement('style');
+      style.textContent = `
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .w {
+          display: inline-flex;
+          align-items: ${cfg.align === 'bottom' ? 'flex-end' : 'center'};
+          justify-content: center;
+          gap: ${cfg.gap}px;
+          height: ${cfg.maxH + 10}px;
+          background: transparent;
+          transition: background 1000ms ease-in-out;
+        }
+        .b {
+          width: ${cfg.width}px;
+          height: ${cfg.minH}px;
+          border-radius: ${cfg.radius}px;
+          background: ${cfg.color !== 'auto' ? cfg.color : (cfg.theme === 'light' ? '#111' : '#fff')};
+          transition:
+            height ${cfg.speed}ms ease-in-out,
+            opacity ${cfg.speed}ms ease-in-out,
+            background 1000ms ease-in-out;
+          flex-shrink: 0;
+        }
+      `;
+
+      const wrapper = document.createElement('div');
+      wrapper.className = 'w';
+      this._wrapper = wrapper;
+
+      for (let i = 0; i < cfg.bars; i++) {
+        const bar = document.createElement('div');
+        bar.className = 'b';
+        wrapper.appendChild(bar);
+        this._bars.push(bar);
+      }
+
+      this._shadow.appendChild(style);
+      this._shadow.appendChild(wrapper);
+    }
+
+    _setupObserver() {
+      if (this._observer) this._observer.disconnect();
+      this._observer = new IntersectionObserver(entries => {
+        this._visible = entries[0].isIntersecting;
+      }, { threshold: 0.1 });
+      this._observer.observe(this);
+    }
+
+    _frame() {
+      const cfg = this.config;
+      const digits = nextDigits(cfg.bars);
+      const range = cfg.maxH - cfg.minH;
+
+      let barColor = cfg.color !== 'auto'
+        ? cfg.color
+        : (cfg.theme === 'light' ? '#111111' : '#ffffff');
+
+      if (cfg.bg === 'pi') {
+        const hex = digitsToHex(nextDigits(6));
+        this._wrapper.style.background = hex;
+        // also bubble bg up to host so parent containers can mirror it
+        this.style.setProperty('--pi-bg', hex);
+        if (cfg.color === 'auto') {
+          barColor = getLuminance(hex) > 0.4 ? '#111111' : '#ffffff';
+        }
+      } else {
+        this._wrapper.style.background =
+          cfg.bg === 'transparent' ? 'transparent' : cfg.bg;
+      }
+
+      digits.forEach((d, i) => {
+        const bar = this._bars[i];
+        if (!bar) return;
+        bar.style.height   = (cfg.minH + (d / 9) * range) + 'px';
+        bar.style.opacity  = d <= 2 ? cfg.lowOpacity : 1;
+        bar.style.background = barColor;
+      });
+    }
+  }
+
+  if (!customElements.get('pi-loader')) {
+    customElements.define('pi-loader', PiLoader);
+  }
+
+})();