Skip to content

Commit

Permalink
Puddle optimisations
Browse files Browse the repository at this point in the history
  • Loading branch information
Declan Chidlow committed Dec 5, 2023
1 parent dcbd50d commit ec5beb4
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 38 deletions.
27 changes: 8 additions & 19 deletions config/global/assets/puddle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ class AsciiNode {

// ASCII shades and their corresponding threshold values
this.asciiShades = [..." .,:-=+*#%@"];
this.asciiThreshold = [];
for (let index = 0; index < this.asciiShades.length; ++index) {
this.asciiThreshold.push(index * 100.0 / (this.asciiShades.length - 1));
}
this.asciiThreshold = this.asciiShades.map((el, index) => index * 100.0 / (this.asciiShades.length - 1));
}

// Attach click and mousemove listeners
Expand All @@ -46,9 +43,7 @@ class AsciiNode {
// Create the HTML element representing the node
getNodeElement() {
this.element = document.createElement("span");
this.element.style.display = "block";
this.element.style.width = "100%";
this.element.style.height = "100%";
this.element.style.cssText = "display: block; width: 100%; height: 100%;";
this.drawNode(0);
this.applyListeners();
return this.element;
Expand Down Expand Up @@ -96,17 +91,15 @@ class AsciiNode {
let nodeLeftForce = nodeLeft ? nodeLeft.currentForce : 0;

// Calculate next force based on neighboring forces
this.nextForce =
(nodeUpForce + nodeDownForce + nodeRightForce + nodeLeftForce) / 2 - this.nextForce;
this.nextForce = (nodeUpForce + nodeDownForce + nodeRightForce + nodeLeftForce) / 2 - this.nextForce;
this.nextForce = this.nextForce * this.data.forceDampeningRatio;

this.data.addToDrawQueue(this.xx, this.yy);
}

// Draw the node based on force magnitude
drawNode(forceMagnitude) {
if (forceMagnitude > 100) forceMagnitude = 100;
else if (forceMagnitude < 0) forceMagnitude = 0;
forceMagnitude = Math.min(100, Math.max(0, forceMagnitude));
let index = this.asciiThreshold.findIndex((el) => el >= forceMagnitude);
this.element.innerText = this.asciiShades[index];
}
Expand Down Expand Up @@ -162,16 +155,14 @@ class PuddleData {

// Get node at specific coordinates in the grid
getNode(xx, yy) {
if (xx < 0 || xx >= this.numCols ||
yy < 0 || yy >= this.numRows)
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return undefined;
return this.nodeList[yy * this.numCols + xx];
}

// Add node to the update queue if not already added
addToUpdateQueue(xx, yy) {
if (xx < 0 || xx >= this.numCols ||
yy < 0 || yy >= this.numRows)
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return;
let index = yy * this.numCols + xx;
if (!this.nodeList[index].isAddedToUpdate) {
Expand Down Expand Up @@ -288,10 +279,8 @@ class Puddle {
this.data.refresh(this.numRows, this.numCols);

this.parentNode.innerHTML = '';
this.parentNode.style.fontFamily = "Fira Code, monospace";
this.parentNode.style.display = "grid";
this.parentNode.style.gridTemplateColumns = "repeat(" + this.numCols + ", " + this.nodeSize + "px)";
this.parentNode.style.gridTemplateRows = "repeat(" + this.numRows + ", " + this.nodeSize + "px)";
this.parentNode.style.cssText = `font-family: "Fira Code, monospace"; display: grid; grid-template-columns: repeat(${this.numCols}, ${this.nodeSize}px); grid-template-rows: repeat(${this.numRows}, ${this.nodeSize}px);`;

for (let yy = 0; yy < this.numRows; ++yy) {
for (let xx = 0; xx < this.numCols; ++xx) {
let node = new this.nodeStyle(xx, yy, this.data);
Expand Down
27 changes: 8 additions & 19 deletions docs/assets/puddle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ class AsciiNode {

// ASCII shades and their corresponding threshold values
this.asciiShades = [..." .,:-=+*#%@"];
this.asciiThreshold = [];
for (let index = 0; index < this.asciiShades.length; ++index) {
this.asciiThreshold.push(index * 100.0 / (this.asciiShades.length - 1));
}
this.asciiThreshold = this.asciiShades.map((el, index) => index * 100.0 / (this.asciiShades.length - 1));
}

// Attach click and mousemove listeners
Expand All @@ -46,9 +43,7 @@ class AsciiNode {
// Create the HTML element representing the node
getNodeElement() {
this.element = document.createElement("span");
this.element.style.display = "block";
this.element.style.width = "100%";
this.element.style.height = "100%";
this.element.style.cssText = "display: block; width: 100%; height: 100%;";
this.drawNode(0);
this.applyListeners();
return this.element;
Expand Down Expand Up @@ -96,17 +91,15 @@ class AsciiNode {
let nodeLeftForce = nodeLeft ? nodeLeft.currentForce : 0;

// Calculate next force based on neighboring forces
this.nextForce =
(nodeUpForce + nodeDownForce + nodeRightForce + nodeLeftForce) / 2 - this.nextForce;
this.nextForce = (nodeUpForce + nodeDownForce + nodeRightForce + nodeLeftForce) / 2 - this.nextForce;
this.nextForce = this.nextForce * this.data.forceDampeningRatio;

this.data.addToDrawQueue(this.xx, this.yy);
}

// Draw the node based on force magnitude
drawNode(forceMagnitude) {
if (forceMagnitude > 100) forceMagnitude = 100;
else if (forceMagnitude < 0) forceMagnitude = 0;
forceMagnitude = Math.min(100, Math.max(0, forceMagnitude));
let index = this.asciiThreshold.findIndex((el) => el >= forceMagnitude);
this.element.innerText = this.asciiShades[index];
}
Expand Down Expand Up @@ -162,16 +155,14 @@ class PuddleData {

// Get node at specific coordinates in the grid
getNode(xx, yy) {
if (xx < 0 || xx >= this.numCols ||
yy < 0 || yy >= this.numRows)
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return undefined;
return this.nodeList[yy * this.numCols + xx];
}

// Add node to the update queue if not already added
addToUpdateQueue(xx, yy) {
if (xx < 0 || xx >= this.numCols ||
yy < 0 || yy >= this.numRows)
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return;
let index = yy * this.numCols + xx;
if (!this.nodeList[index].isAddedToUpdate) {
Expand Down Expand Up @@ -288,10 +279,8 @@ class Puddle {
this.data.refresh(this.numRows, this.numCols);

this.parentNode.innerHTML = '';
this.parentNode.style.fontFamily = "Fira Code, monospace";
this.parentNode.style.display = "grid";
this.parentNode.style.gridTemplateColumns = "repeat(" + this.numCols + ", " + this.nodeSize + "px)";
this.parentNode.style.gridTemplateRows = "repeat(" + this.numRows + ", " + this.nodeSize + "px)";
this.parentNode.style.cssText = `font-family: "Fira Code, monospace"; display: grid; grid-template-columns: repeat(${this.numCols}, ${this.nodeSize}px); grid-template-rows: repeat(${this.numRows}, ${this.nodeSize}px);`;

for (let yy = 0; yy < this.numRows; ++yy) {
for (let xx = 0; xx < this.numCols; ++xx) {
let node = new this.nodeStyle(xx, yy, this.data);
Expand Down

0 comments on commit ec5beb4

Please sign in to comment.