web: update examples page

WebEngineering-FHNW · Dec 12, 2024 · 7b3381a · 7b3381a
1 parent 9ae7dce
commit 7b3381a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 7 deletions.
diff --git a/docs/examples.html b/docs/examples.html
@@ -166,6 +166,19 @@ <h2>Sequences</h2>
                     <a href="./src/examples/sequence/BeautifulMath.html">Beautiful Math</a> when
                     distributed over a circle?
                 </dd>
+                <dt><a href="./src/examples/sequence/Collatz.html">Collatz Number Exploration</a>
+                </dt>
+                <dd>Explore the
+                    <a href="./src/examples/sequence/Collatz.html">Collatz Numbers</a>. With the help
+                    of sequences and memoization you can browse through them in realtime.
+                </dd>
+                <dt><a href="./src/examples/sequence/Leibniz_Nilakantha.html">Approximating PI</a>
+                </dt>
+                <dd>Different sequences to approximate PI like
+                    <a href="./src/examples/sequence/Leibniz_Nilakantha.html">Gregory, Leibniz, and Nilakantha</a>
+                    have shown. We use the sequence API and the "limit" helper to celebrate their work
+                    in a functional approach.
+                </dd>
                 <dt><a href="./src/examples/sequence/fibonacci/Fibonacci.html">Fibonacci</a></dt>
                 <dd>While the fibonacci sequence is of course everybody's favorite,
                 it is also lends itself to a nice graphical <a href="./src/examples/sequence/fibonacci/Fibonacci.html">

diff --git a/docs/src/examples/sequence/Leibniz_Nilakantha.html b/docs/src/examples/sequence/Leibniz_Nilakantha.html
@@ -3,30 +3,44 @@
 <head>
     <meta charset="UTF-8">
     <title>Kolibri Tryout</title>
+    <style>
+        body {
+            font-family: system-ui;
+            font-variant-numeric: tabular-nums;
+            padding: 2em;
+        }
+    </style>
 
 </head>
 <body>
+
+<h1>The Heros approximating PI</h1>
+
 <pre>
     Gregory - Leibniz Series
 
      4       4       4       4       4
     ---  -  ---  +  ---  -  ---  +  ---  ...
      1       3       5       7       9
 
-
+    <span id="leibnizOut"></span>
 
     Nilakantha Series
 
           4       4       4       4
     3 +  ---  -  ---  +  ---  -  ---     ...
         2*3*4   4*5*6   6*7*8   8*9*10
 
+
+    <span id="nilaOut"></span>
+
 </pre>
 
 
 <script type="module">
 
-    import {ALL, Walk, limit, plus, Seq} from "../../kolibri/sequence/sequence.js";
+    import { ALL, Walk, limit, plus, Seq } from "../../kolibri/sequence/sequence.js";
+    import { select }                      from "../../kolibri/util/dom.js";
 
 
     const partialSum = numSeq => n =>
@@ -50,12 +64,27 @@
             .map( n => 1 / (n * (n + 1) * (n + 2)))
             .zipWith((x, sign) => sign * x)(plusMinus);
 
-    const leibniz      =     4 * limit(1e-3,  partialSumSeq(leib_seq) );
-    const nilakantha   = 3 + 4 * limit(1e-8,  partialSumSeq(nila_seq) );
-    console.log( leibniz );
-    console.log( nilakantha );
-    console.log( Math.PI );
+    const partialLeibnizSums  = partialSumSeq(leib_seq);
+    const leibniz             = 4 * limit(1e-3, partialLeibnizSums );
+
+    const partialNilaSums     = partialSumSeq(nila_seq);
+    const nilakantha          = 3 + 4 * limit(1e-8, partialNilaSums );
+
+    const [lout] = select(document.body, "#leibnizOut");
+    lout.textContent = `
+Partial sum sequence
+${partialLeibnizSums.show()}
+
+Limit * 4:      ${leibniz}
+    `;
+
+    const [nout] = select(document.body, "#nilaOut");
+    nout.textContent = `
+Partial sum sequence
+${partialNilaSums.show()}
 
+limit * 4 + 3:   ${nilakantha}
+    `;
 </script>