Update demo to show framerate

Author: bryanjos

docs/all.js

@@ -4,18 +4,19 @@
     <div id="main">
       <p>
         This is an demo for the
-        <a href="https://github.com/bryanjos/processes"
+        <a href="https://github.com/elixirscript/processes"
           >erlang processes javascript library</a
         >
         which will hopefully be part of elixirscript. Below is a table with
-        10,000 cells. For each cell there is a process responsible for updating
-        its contents. Each process updates its cell's color and updates it to a
-        random number. This demo is inspired by the
-        <a href="http://swannodette.github.io/2013/08/02/100000-processes/"
+        10,000 cells. There are 10,000 independent processes. Each process
+        updates a random table cell's color and updates it to a random number.
+        This demo is inspired by the
+        <a href="https://swannodette.github.io/2013/08/02/100000-processes"
           >10,000 Processes</a
         >
         demo on David Nolen's blog.
       </p>
+      <p><span id="fps"></span> FPS</p>
     </div>
   <script type="text/javascript" src="all.js"></script></body>
 </html>

docs/all.js.map

@@ -193,7 +193,7 @@ class ProcessQueue {
 
 }
 
-class Scheduler {
+class DefaultScheduler {
   constructor(throttle = 0, reductions_per_process = 8) {
     this.isRunning = false;
 
@@ -222,11 +222,15 @@ class Scheduler {
     this.isRunning = false;
   }
 
+  _run(run) {
+    this.invokeLater(() => {
+      run();
+    });
+  }
+
   run() {
     if (this.isRunning) {
-      this.invokeLater(() => {
-        this.run();
-      });
+      this._run(this.run.bind(this));
     } else {
       for (let [pid, queue] of this.queues) {
         let reductions = 0;
@@ -253,9 +257,7 @@ class Scheduler {
         }
       }
 
-      this.invokeLater(() => {
-        this.run();
-      });
+      this._run(this.run.bind(this));
     }
   }
 
@@ -288,16 +290,14 @@ class Scheduler {
 /* @flow */
 
 class ProcessSystem {
-  constructor() {
+  constructor(scheduler = new DefaultScheduler(5)) {
     this.pids = new Map();
     this.mailboxes = new Map();
     this.names = new Map();
     this.links = new Map();
     this.monitors = new Map();
-    const throttle = 5; //ms between scheduled tasks
-
     this.current_process = null;
-    this.scheduler = new Scheduler(throttle);
+    this.scheduler = scheduler;
     this.suspended = new Map();
     let process_system_scope = this;
     this.main_process_pid = this.spawn(function* () {
@@ -622,8 +622,21 @@ class ProcessSystem {
 
 }
 
+class RequestAnimationScheduler extends DefaultScheduler {
+  constructor(throttle = 0, reductions_per_process = 8) {
+    super(throttle, reductions_per_process);
+  }
+
+  _run(run) {
+    window.requestAnimationFrame(run);
+  }
+
+}
+
 var index = {
-  ProcessSystem
+  ProcessSystem,
+  RequestAnimationScheduler,
+  DefaultScheduler
 };
 
 module.exports = index;

docs/index.html

@@ -8,14 +8,15 @@
           >erlang processes javascript library</a
         >
         which will hopefully be part of elixirscript. Below is a table with
-        10,000 cells. For each cell there is a process responsible for updating
-        its contents. Each process updates its cell's color and updates it to a
-        random number. This demo is inspired by the
+        10,000 cells. There are 10,000 independent processes. Each process
+        updates a random table cell's color and updates it to a random number.
+        This demo is inspired by the
         <a href="https://swannodette.github.io/2013/08/02/100000-processes"
           >10,000 Processes</a
         >
         demo on David Nolen's blog.
       </p>
+      <p><span id="fps"></span> FPS</p>
     </div>
   </body>
 </html>

lib/processes.js

@@ -2,30 +2,6 @@ import '../css/index.css'
 
 import Processes from '../../index.js'
 
-const system = new Processes.ProcessSystem(
-  new Processes.RequestAnimationScheduler()
-)
-
-const rows = 200
-const columns = 50
-
-const maxProcesses = rows * columns
-
-const main = document.getElementById('main')
-
-tableCreate(rows, columns)
-
-for (let i = 0; i < maxProcesses; i++) {
-  const _pid = system.spawn(function*() {
-    while (true) {
-      yield* render(
-        Math.floor(Math.random() * maxProcesses),
-        Math.floor(Math.random() * 10)
-      )
-    }
-  })
-}
-
 function* render(cell, number) {
   let el = document.getElementById(`td-${cell}`)
   const style = 'group' + (number % 6)
@@ -35,6 +11,7 @@ function* render(cell, number) {
 }
 
 function tableCreate(numberOfRows, numberOfColumns) {
+  const main = document.getElementById('main')
   let tbl = document.createElement('table')
   tbl.cellPadding = 0
   tbl.cellSpacing = 0
@@ -59,3 +36,51 @@ function tableCreate(numberOfRows, numberOfColumns) {
   tbl.appendChild(tbdy)
   main.appendChild(tbl)
 }
+
+// from https://www.growingwiththeweb.com/2017/12/fast-simple-js-fps-counter.html
+const times = []
+let fps
+let fpsEl
+
+function refreshLoop() {
+  window.requestAnimationFrame(() => {
+    const now = performance.now()
+    while (times.length > 0 && times[0] <= now - 1000) {
+      times.shift()
+    }
+    times.push(now)
+    fps = times.length
+    if (!fpsEl) {
+      fpsEl = document.getElementById('fps')
+    }
+
+    fpsEl.textContent = fps.toString()
+    refreshLoop()
+  })
+}
+
+document.addEventListener('DOMContentLoaded', function(event) {
+  const system = new Processes.ProcessSystem(
+    new Processes.RequestAnimationScheduler()
+  )
+
+  const rows = 200
+  const columns = 50
+
+  const maxProcesses = rows * columns
+
+  refreshLoop()
+
+  tableCreate(rows, columns)
+
+  for (let i = 0; i < maxProcesses; i++) {
+    const _pid = system.spawn(function*() {
+      while (true) {
+        yield* render(
+          Math.floor(Math.random() * maxProcesses),
+          Math.floor(Math.random() * 10)
+        )
+      }
+    })
+  }
+})