Fixed fade, added FPS tracking

Niyaz-Mohamed · Aug 24, 2024 · ce37b46 · ce37b46
1 parent 42ff3ad
commit ce37b46
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 46 deletions.
diff --git a/css/toolbar.css b/css/toolbar.css
@@ -4,6 +4,12 @@
  color: var(--bg-color);
 }
 
+/*! FPS Tracker*/
+#fps-tracker {
+ background-color: var(--theme-color);
+ color: var(--bg-color);
+}
+
 /*! Console */
 #console-container {
  padding: 0px 10px 0px 10px;

diff --git a/css/windows.css b/css/windows.css
@@ -12,6 +12,7 @@
  opacity: var(--toolbar-opacity);
  display: none;
  z-index: 2;
+ scrollbar-color: var(--theme-color) var(--highlight-color);
 }
 
 .window-header {

diff --git a/index.html b/index.html
@@ -33,7 +33,8 @@
 <body>
  <!--! Toolbar -->
  <div id="toolbar">
- <p id="app-title">Cellula</p>
+ <a id="app-title" href="https://github.com/Niyaz-Mohamed/Cellula">Cellula</a>
+ <p id="fps-tracker">FPS: <span id="fps-span">0</span></p>
  <!--Automata window trigger-->
  <div class="dropdown window-trigger">
  <button class="dropbtn triggerbtn" id="automata-btn">Life</button>
@@ -122,15 +123,15 @@
  <div id='automata-content' class='window-content'>
  <!--Buttons for selection-->
  <div class="sidenav">
- <p>Discrete Automata</p>
+ <p>Discrete</p>
  <button class="select-btn selected">Life</button>
  <button class="select-btn">Langton's Ant</button>
- <button class="select-btn">Elementary CA</button>
+ <button class="select-btn">Elementary</button>
  <button class="select-btn">Brian's Brain</button>
  <button class="select-btn">Wireworld</button>
  <button class="select-btn">Rock, Paper, Scissors</button>
- <p>Continuous Automata</p>
- <button class="select-btn">Neural CA</button>
+ <p>Continuous</p>
+ <button class="select-btn">Neural</button>
  <button class="select-btn">Huegene</button>
  </div>
  <!--Content for Life-->

diff --git a/js/automata.js b/js/automata.js
@@ -128,10 +128,11 @@ export class Automata {
  // Update draw times
  this.drawTimes.push(Date.now() - this.lastDraw);
  this.lastDraw = Date.now();
- this.drawTimes = this.drawTimes.slice(0, 10);
+ this.drawTimes = this.drawTimes.slice(-50);
  const aveDrawTime =
  this.drawTimes.reduce((a, b) => a + b) / this.drawTimes.length;
  this.fps = Math.round(1000 / aveDrawTime);
+ document.getElementById("fps-span").innerHTML = this.fps;
  }
 
  // Draw the cursor only when requried
@@ -1279,12 +1280,11 @@ export class Huegene extends Automata {
  // Extra Settings
  this.fade = false;
  this.psychedelic = false;
- this.fadeKeepRate = 0.96;
+ this.fadeKeepRate = 0.99;
  this.psychedelicRate = 4;
  document.getElementById("huegene-psychedelic-input").checked = false;
  document.getElementById("huegene-fade-input").checked = false;
 
- // TODO: Implement psychedelic mode where color of grid just cycles through various colors
  // Implement GPU kernel to update grid
  this.gridUpdateKernel = this.gpu
  .createKernel(
@@ -1304,7 +1304,7 @@ export class Huegene extends Automata {
  (x + dx + this.constants.cols) % this.constants.cols
  ]
  );
- // Check if neighbor is not empty
+ // Check if neighbor is not empty (leave some leeway)
  if (
  neighborColor[0] != 0 ||
  neighborColor[1] != 0 ||
@@ -1344,6 +1344,9 @@ export class Huegene extends Automata {
  );
 
  // Update the required cells
+ if (psychedelic)
+ randColor = shiftHue(randColor, this.constants.psychedelicRate);
+ if (fade) randColor = fadeRGB(randColor, this.constants.fadeKeepRate);
  return packRGB(shiftHue(randColor, offsetGrid[y][x]));
  },
  { output: [this.cols, this.rows] }
@@ -1407,15 +1410,15 @@ export class Huegene extends Automata {
  }
 
  // Update grid using the kernel
- this.grid = this.gridUpdateKernel(
+ const newGrid = this.gridUpdateKernel(
  this.grid,
  this.neighborhood,
  this.offsetGrid,
  this.fade,
  this.psychedelic
  );
  // Call kernel
- return this.grid;
+ return newGrid;
  }
 
  // Override calculation of color required by a specific state as rgb value
@@ -1468,9 +1471,6 @@ export class Huegene extends Automata {
  setConsoleText(`Updated pen to draw Erase (Black fill)`);
  }
  window.requestAnimationFrame(() => this.drawCursor());
-
- //TODO: REMOVE
- console.log(this.grid[0][0]);
  }
 
  // Override get pen color
@@ -1479,7 +1479,6 @@ export class Huegene extends Automata {
  return `rgba(${penState[0]},${penState[1]},${penState[2]}, 0.8)`;
  }
 
- // TODO: Restrict brightness/saturation values of generated colors
  // Get random color (in RGB) for pen
  genRandomPenColor() {
  return packRGB(hsvToRgb([Math.floor(Math.random() * 360), 0.6, 0.8]));
@@ -1536,7 +1535,7 @@ export function setAutomata(newAutomataName, args = [], grid = null) {
  );
  setConsoleText("Changed automata to Langton's Ant");
  break;
- case "Elementary CA":
+ case "Elementary":
  automata = new ElementaryCA(...args);
  // Convert non 0/1 cells to 1
  automata.grid = oldGrid.map((row) =>
@@ -1575,7 +1574,7 @@ export function setAutomata(newAutomataName, args = [], grid = null) {
  );
  setConsoleText("Changed automata to Rock, Paper, Scissors");
  break;
- case "Neural CA":
+ case "Neural":
  automata = new NeuralCA(...args);
  // Convert non 0/1 cells to 1
  automata.grid = oldGrid.map((row) =>
@@ -1596,7 +1595,3 @@ export function setAutomata(newAutomataName, args = [], grid = null) {
  if (!paused) changePaused();
 }
 automata.updateGrid();
-
-// TODO: Is there a better way to present this?
-//! Track FPS
-// setInterval(() => console.log("Current FPS is " + automata.fps), 5000);
diff --git a/js/inputs/config.js b/js/inputs/config.js
@@ -14,29 +14,28 @@ export const nameMap = {
  "Langton's Ant": "Ants",
  "Brian's Brain": "BB",
  "Rock, Paper, Scissors": "RPS",
- "Elementary CA": "Elem",
- "Neural CA": "Neural",
+ Elementary: "Elem",
 }; //! Used for setting automata name in top left
 
 export const infoMap = {
  Life: "life-info",
  "Langton's Ant": "ant-info",
- "Elementary CA": "elementary-info",
+ Elementary: "elementary-info",
  "Brian's Brain": "brain-info",
  Wireworld: "wire-info",
  "Rock, Paper, Scissors": "rps-info",
- "Neural CA": "neural-info",
+ Neural: "neural-info",
  Huegene: "huegene-info",
 }; //! Maps each automata name to the id of its info content
 
 export const settingsMap = {
  Life: "life-settings",
  "Langton's Ant": "ant-settings",
- "Elementary CA": "elementary-settings",
+ Elementary: "elementary-settings",
  "Brian's Brain": "brain-settings",
  Wireworld: "wire-settings",
  "Rock, Paper, Scissors": "rps-settings",
- "Neural CA": "neural-settings",
+ Neural: "neural-settings",
  Huegene: "huegene-settings",
 }; //! This maps each automata name to the id of its info content
 
@@ -55,6 +54,7 @@ export function setCellSize(size) {
  automata.rows = newRows;
  automata.cols = newCols;
  setConsoleText(`Cell Size set to: ${cellSize}`);
+ automata.drawTimes = automata.drawTimes.slice(-5);
  automata.drawGrid();
  automata.drawCursor();
 }

diff --git a/js/utils.js b/js/utils.js
@@ -302,23 +302,8 @@ export function hsvToRgb(hsvColor) {
 }
 
 // Fade any rgb color to black
-export function fadeRGB(color, fadeKeepRate, fallbackFade = 5) {
- let newColor = color.map((channel) =>
- Math.max(Math.floor(channel * fadeKeepRate), 0)
- );
- // Return black as is
- // if (
- // packRGB(color) == packRGB([0, 0, 0]) ||
- // color.every((channel) => channel < fallbackFade)
- // )
- // newColor = [0, 0, 0];
- // else if (
- // packRGB(newColor) == packRGB(color) ||
- // newColor.every((channel) => channel == newColor[0])
- // ) {
- // // Fallback case where you fade by fallback
- // newColor = newColor.map((channel) => Math.max(channel - fallbackFade, 0));
- // if (newColor.every((channel) => channel < 3)) console.log(newColor, color);
- // }
- return newColor;
+export function fadeRGB(color, fadeKeepRate) {
+ const colorSum = color[0] + color[1] + color[2];
+ if (colorSum < 20) return [0, 0, 0]; // When difference is too small to see, just return black
+ return color.map((channel) => Math.floor(channel * fadeKeepRate));
 }