From ce37b4694eed34a59dc5a8b9b6c7ed9a137165f0 Mon Sep 17 00:00:00 2001 From: MshNiyaz Date: Sat, 24 Aug 2024 12:26:06 +0800 Subject: [PATCH] Fixed fade, added FPS tracking --- css/toolbar.css | 6 ++++++ css/windows.css | 1 + index.html | 11 ++++++----- js/automata.js | 27 +++++++++++---------------- js/inputs/config.js | 12 ++++++------ js/utils.js | 23 ++++------------------- 6 files changed, 34 insertions(+), 46 deletions(-) diff --git a/css/toolbar.css b/css/toolbar.css index 18806ab..2041dbc 100644 --- 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 index 81af638..6feffbc 100644 --- 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 index 48e02fe..bc2184c 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,8 @@
-

Cellula

+ Cellula +

FPS: 0

@@ -122,15 +123,15 @@
-

Discrete Automata

+

Discrete

- + -

Continuous Automata

- +

Continuous

+
diff --git a/js/automata.js b/js/automata.js index cf56135..6ef78cf 100644 --- 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,7 +1410,7 @@ export class Huegene extends Automata { } // Update grid using the kernel - this.grid = this.gridUpdateKernel( + const newGrid = this.gridUpdateKernel( this.grid, this.neighborhood, this.offsetGrid, @@ -1415,7 +1418,7 @@ export class Huegene extends Automata { 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 index ec81b1e..55a2809 100644 --- 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 index a1dddd4..6319cf7 100644 --- 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)); }