prehistoric-systems/tilde
1
0
Fork 0
mirror of https://github.com/xvvvyz/tilde.git synced 2026-03-11 14:44:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

rain performance optimizations

Browse source
This commit is contained in:
Cade Scroggins 2023-03-30 20:39:19 -07:00
parent 708c6ed8d9
commit e6ffda0820
No known key found for this signature in database
GPG key ID: 6AC5A902158265D0
1 changed files with 27 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
index.html
View file

@ -43,9 +43,8 @@
openLinksInNewTab: true,
rainColumns: 200,
rainFade: 0.2,
rainFrameRate: 1000 / 20,
rainFrameRate: 1000 / 18,
rainFrameTotal: Infinity,
rainOverlap: 0.2,
rainResilience: 0.8,
suggestionLimit: 4,
};
@ -756,7 +755,7 @@
#ctx;
#drops;
#frameCount;
#interval;
#lastRender;
#rainColor;
#size;
@ -766,7 +765,7 @@
const template = document.getElementById('rain-template');
const clone = template.content.cloneNode(true);
this.#canvas = clone.querySelector('.rain');
this.#ctx = this.#canvas.getContext('2d');
this.#ctx = this.#canvas.getContext('2d', { alpha: false });
this.#renderCanvas();
const rerender = Rain.debounce(this.#renderCanvas, CONFIG.rainFrameRate);
const mq = '(prefers-color-scheme: light)';
@ -789,39 +788,40 @@
}
#renderCanvas = () => {
if (this.#interval) clearInterval(this.#interval);
this.#canvas.height = window.innerHeight;
this.#canvas.width = window.innerWidth;
this.#size = this.#canvas.width / CONFIG.rainColumns;
this.#size = Math.ceil(this.#canvas.width / CONFIG.rainColumns);
this.#backgroundColor = Rain.cssVar('--color-background');
this.#rainColor = Rain.cssVar('--color-rain');
this.#drops = new Array(CONFIG.rainColumns).fill(0);
this.#frameCount = 0;
this.#interval = setInterval(this.#renderRain, CONFIG.rainFrameRate);
this.#lastRender = performance.now();
requestAnimationFrame(this.#renderRain);
};
#renderRain = () => {
if (this.#frameCount >= CONFIG.rainFrameTotal) {
clearInterval(this.#interval);
return;
#renderRain = (timestamp) => {
if (this.#frameCount >= CONFIG.rainFrameTotal) return;
if (timestamp - this.#lastRender >= CONFIG.rainFrameRate) {
this.#ctx.fillStyle = this.#backgroundColor;
this.#ctx.globalAlpha = CONFIG.rainFade;
this.#ctx.fillRect(0, 0, this.#canvas.width, this.#canvas.height);
for (let i = 0; i < this.#drops.length; i++) {
this.#ctx.fillStyle = this.#rainColor;
this.#ctx.globalAlpha = 1;
const y = this.#drops[i] * this.#size;
this.#ctx.fillRect(i * this.#size, y, this.#size, this.#size);
const reset = Math.random() > CONFIG.rainResilience;
if (reset || y > this.#canvas.height) this.#drops[i] = 0;
else this.#drops[i]++;
}
this.#frameCount++;
this.#lastRender = timestamp;
}
this.#ctx.fillStyle = this.#backgroundColor;
this.#ctx.globalAlpha = CONFIG.rainFade;
this.#ctx.fillRect(0, 0, this.#canvas.width, this.#canvas.height);
for (let i = 0; i < this.#drops.length; i++) {
this.#ctx.fillStyle = this.#rainColor;
this.#ctx.globalAlpha = 1;
const y = this.#drops[i] * this.#size - CONFIG.rainOverlap;
const size = this.#size + CONFIG.rainOverlap * 2;
this.#ctx.fillRect(i * this.#size - CONFIG.rainOverlap, y, size, size);
const reset = Math.random() > CONFIG.rainResilience;
if (reset || y > this.#canvas.height) this.#drops[i] = 0;
else this.#drops[i]++;
}
this.#frameCount++;
requestAnimationFrame(this.#renderRain);
};
}