feat(example): add rng examples

example/index.css

@@ -8,6 +8,10 @@ details {
   padding: 0.5em 0.5em 0;
 }
 
+canvas {
+  border: 1px solid #aaa;
+}
+
 summary {
   font-weight: bold;
   margin: -0.5em -0.5em 0;

example/random.ts

@@ -1,19 +1,147 @@
 import van from "./vendor/van-1.2.3.min";
-import { Random } from "../src";
+import { Random, type PRNG } from "../src";
 
 import "./index.css";
 
-const { div, pre } = van.tags;
+const { div, button, label, input, pre, canvas } = van.tags;
 
 export default function Randoms() {
+  return div(Rngs(), Collections());
+}
+
+function Rngs() {
+  const WIDTH = 400;
+  const HEIGHT = 400;
+
+  const c = canvas({ width: WIDTH, height: HEIGHT });
+  const ctx = c.getContext("2d")!;
+  let rng: PRNG = new Random.Seedable(0);
+
+  function clear() {
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+  }
+
+  function rand() {
+    ctx.fillStyle = "#FF0C7C40";
+
+    for (let i = 0; i < iters.val; i++) {
+      const pos = rng.integer({ max: WIDTH * HEIGHT });
+      const [x, y] = [pos % WIDTH, Math.floor(pos / WIDTH)];
+      ctx.fillRect(x, y, 1, 1);
+    }
+
+    if (run.val) {
+      raf = requestAnimationFrame(rand);
+    }
+  }
+
+  const run = van.state(false);
+  const iters = van.state(100);
+  let raf: number;
+  let fn: () => void = rand;
+
+  return div(
+    { class: "iflexy" },
+    div(
+      { class: "flexy" },
+      button(
+        {
+          onclick: () => {
+            clear();
+            rng = new Random.Mulberry32(0);
+          },
+        },
+        "Mulberry32"
+      ),
+      button(
+        {
+          onclick: () => {
+            clear();
+            rng = new Random.SplitMix32(0);
+          },
+        },
+        "SplitMix32"
+      ),
+      button(
+        {
+          onclick: () => {
+            clear();
+            rng = new Random.SFC32(0, 1, 2, 3);
+          },
+        },
+        "SFC32"
+      ),
+      button(
+        {
+          onclick: () => {
+            clear();
+            rng = new Random.JSF32B(0, 1, 2, 3);
+          },
+        },
+        "JSF32B"
+      ),
+      button(
+        {
+          onclick: () => {
+            clear();
+            rng = new Random.GJRand32(0, 1, 2, 3);
+          },
+        },
+        "GJRand32"
+      )
+    ),
+    c,
+    div(
+      { class: "flexy" },
+      div(
+        { class: "iflex" },
+        button(
+          {
+            onclick: () => {
+              run.val = true;
+              cancelAnimationFrame(raf);
+              fn();
+            },
+          },
+          "Start"
+        ),
+        button(
+          {
+            onclick: () => {
+              run.val = false;
+              cancelAnimationFrame(raf);
+            },
+          },
+          "Stop"
+        ),
+        button({ onclick: clear }, "Clear")
+      ),
+      label(
+        "Speed",
+        input({
+          type: "range",
+          defaultValue: iters.val,
+          min: 0,
+          max: 1000,
+          step: 1,
+          oninput: (e) => {
+            iters.val = e.target.valueAsNumber;
+          },
+        })
+      )
+    )
+  );
+}
+
+function Collections() {
   const friends = ["alice", "bob", "carlos", "dan", "erin"];
   const secretSantas = Random.derangement(friends);
 
   return div(
     pre(`\
-const friends = ["alice", "bob", "carlos", "dan", "erin"];
+const friends = ${JSON.stringify(friends)};
 const secretSantas = Random.derangement(friends);\
-      `),
+    `),
     pre(JSON.stringify(friends)),
     pre(JSON.stringify(secretSantas))
   );

src/math/random.ts

@@ -320,7 +320,7 @@ class Mulberry32 extends GenericPRNG {
       this.#seed = (this.#seed + 0x6d2b79f5) | 0;
       let t = Math.imul(this.#seed ^ (this.#seed >>> 15), 1 | this.#seed);
       t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+      return ((t ^ (t >>> 14)) >>> 0) / 0x100000000;
     });
     this.#seed = seed;
   }
@@ -343,7 +343,7 @@ class SFC32 extends GenericPRNG {
       this.#b = (this.#c + (this.#c << 3)) | 0;
       this.#c = (this.#c << 21) | (this.#c >>> 11);
       this.#c = (this.#c + t) | 0;
-      return (t >>> 0) / 4294967296;
+      return (t >>> 0) / 0x100000000;
     });
     this.#a = a;
     this.#b = b;
@@ -362,7 +362,7 @@ class SplitMix32 extends GenericPRNG {
       t = Math.imul(t, 0x21f0aaad);
       t = t ^ (t >>> 15);
       t = Math.imul(t, 0x735a2d97);
-      return ((t = t ^ (t >>> 15)) >>> 0) / 4294967296;
+      return ((t = t ^ (t >>> 15)) >>> 0) / 0x100000000;
     });
     this.#seed = seed;
   }
@@ -384,7 +384,7 @@ class JSF32B extends GenericPRNG {
       this.#b = (this.#c + this.#d) | 0;
       this.#c = (this.#d + t) | 0;
       this.#d = (this.#a + t) | 0;
-      return (this.#d >>> 0) / 4294967296;
+      return (this.#d >>> 0) / 0x100000000;
     });
     this.#a = a;
     this.#b = b;
@@ -415,7 +415,7 @@ class GJRand32 extends GenericPRNG {
       this.#c = (this.#c + this.#a) | 0;
       this.#d = (this.#d + 0x96a5) | 0;
       this.#b = (this.#b + this.#d) | 0;
-      return (this.#a >>> 0) / 4294967296;
+      return (this.#a >>> 0) / 0x100000000;
     });
     this.#a = a;
     this.#b = b;