From d094f7e0b709d2bec8fc5316741ef5747b15a688 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Sun, 22 Nov 2020 23:53:16 -0800
Subject: [PATCH] Added resolution parameter to config.

---
 README.md    | 1 +
 js/config.js | 4 +++-
 js/main.js   | 5 +++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 37fe193..e74f08c 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,7 @@ Now you know link fu. Here's a list of customization options:
 - **width** - the number of columns (and rows) to draw. Default is 80.
 - **slant** - which angle is up, in degrees. Default is 0.
 - **bloomSize** - The glow quality, from 0 to 1. Default is 0.5. Lowering this value may help the digital rain run smoother on your device.
+- **resolution** - The image size, relative to the window size. Default is 1. Lowering this value may improve your performance, especially on high pixel density displays.
 - **raindropLength** - the vertical scale of "raindrops" in the columns. Can be any number, even negative! Default is 1.0.
 - **animationSpeed** - the overall speed of the animation. Can be any number, even negative! Default is 1.0.
 - **fallSpeed** - the speed of the rain. Can be any number, even negative! Default is 1.0.
diff --git a/js/config.js b/js/config.js
index 6c4e9b6..ad10fa0 100644
--- a/js/config.js
+++ b/js/config.js
@@ -46,7 +46,8 @@ const defaults = {
     { rgb: [0.57, 0.97, 0.61], at: 1.0 }
   ],
   raindropLength: 1,
-  slant: 0
+  slant: 0,
+  resolution: 1
 };
 
 const versions = {
@@ -129,6 +130,7 @@ const paramMapping = {
   version: { key: "version", parser: s => s },
   effect: { key: "effect", parser: s => s },
   width: { key: "numColumns", parser: s => nullNaN(parseInt(s)) },
+  resolution: { key: "resolution", parser: s => nullNaN(parseFloat(s)) },
   animationSpeed: {
     key: "animationSpeed",
     parser: s => nullNaN(parseFloat(s))
diff --git a/js/main.js b/js/main.js
index 1a928b3..b942767 100644
--- a/js/main.js
+++ b/js/main.js
@@ -33,11 +33,12 @@ const effects = {
 };
 
 const config = makeConfig(window.location.search);
+const resolution = config.resolution;
 const effect = config.effect in effects ? config.effect : "plain";
 
 const resize = () => {
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
+  canvas.width = Math.ceil(canvas.clientWidth * resolution);
+  canvas.height = Math.ceil(canvas.clientHeight * resolution);
 };
 window.onresize = resize;
 resize();