diff --git a/index.html b/index.html index d9e8d01..146e112 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@ rainFade: 0.2, rainFrameRate: 1000 / 18, rainResilience: 0.8, + rainSpeed: 1, suggestionLimit: 4, }; @@ -754,7 +755,8 @@ #drops; #lastRender; #rainColor; - #size; + #rainHeight; + #rainWidth; constructor() { super(); @@ -787,7 +789,8 @@ #renderCanvas = () => { this.#canvas.height = window.innerHeight; this.#canvas.width = window.innerWidth; - this.#size = Math.ceil(this.#canvas.width / CONFIG.rainColumns); + this.#rainWidth = Math.ceil(this.#canvas.width / CONFIG.rainColumns); + this.#rainHeight = this.#rainWidth * CONFIG.rainSpeed; this.#backgroundColor = Rain.cssVar('--color-background'); this.#rainColor = Rain.cssVar('--color-rain'); this.#ctx.fillStyle = this.#backgroundColor; @@ -806,8 +809,9 @@ 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 x = i * this.#rainWidth; + const y = this.#drops[i] * this.#rainHeight; + this.#ctx.fillRect(x, y, this.#rainWidth, this.#rainHeight); const reset = Math.random() > CONFIG.rainResilience; if (reset || y > this.#canvas.height) this.#drops[i] = 0; else this.#drops[i]++;