snowing

Signed-off-by: Naman Sood <mail@nsood.in>

js/script.js

@@ -3,19 +3,30 @@ const canvas = document.querySelector('canvas#bg');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
+const snowing = true;
+
 const ctx = canvas.getContext('2d');
 const FILL_STYLES = {
 	light: 'rgba(0,0,0,0.05)',
-	dark: 'rgba(255,255,255,0.15)'
+	dark: 'rgba(255,255,255,0.15)',
-}
+	snowing: 'rgb(58, 82, 115)'
-ctx.fillStyle = FILL_STYLES.light;
+};
+const BACKGROUNDS = {
+	evening: '#0c2b53',
+	night: '#000000'
+};
+ctx.fillStyle = snowing ? FILL_STYLES.snowing : FILL_STYLES.light;
 let darkMode = 0;
+if(snowing) {
+	document.body.classList.add('dark-mode');
+	document.body.style.backgroundColor = BACKGROUNDS.evening;
+}
 
 addEventListener('resize', () => {
 	canvas.width = window.innerWidth;
 	canvas.height = window.innerHeight;
 	// need to set ctx.fillStyle whenever I resize???
-	ctx.fillStyle = darkMode ? FILL_STYLES.dark : FILL_STYLES.light;
+	ctx.fillStyle = darkMode ? FILL_STYLES.dark : snowing ? FILL_STYLES.snowing : FILL_STYLES.light;
 });
 
 function Point() {
@@ -31,9 +42,10 @@ function Point() {
 	// moves point to a random location and 
 	// resets its progress
 	this.init = function() {
-		this.x = Math.random() * canvas.width;
-		this.y = Math.random() * canvas.height;
 		this.progress = initialProgress;
+		this.x = Math.random() * canvas.width;
+		this.y = snowing ? initialProgress * canvas.height / 3 : Math.random() * canvas.height;
+		this.r = snowing ? Math.random() * r : 0;
 	}
 	
 	this.draw = function() {
@@ -44,26 +56,34 @@ function Point() {
 			// in radius. absolute value to prevent floating point errors
 			// accidentally causing negative sine values which cause ctx.arc
 			// to throw errors
-			ctx.arc(this.x, this.y, Math.abs(Math.sin(Math.PI*this.progress)*r), 0, 2*Math.PI);
+			if(!snowing) ctx.arc(this.x, this.y, Math.abs(Math.sin(Math.PI*this.progress)*r), 0, 2*Math.PI);
+			else ctx.arc(this.x + 20 * Math.sin(this.progress * 3 * Math.PI), this.y, this.r, 0, 2*Math.PI);
 			ctx.fill();
 		}
 	};
 	this.render = function() {
+		if(snowing) {
+			this.y += 0.5 * Math.pow(this.r, 0.25);
+			this.x = (this.x + 0.3) % (canvas.width + this.r); // wind
+			this.progress += 0.005;
+			this.draw();
+			if(this.y >= canvas.height + r) this.init();
+		}
+		else {
 			// stars come faster than they go
 			// so user can look at them longer
 			// i guess? idk this just looked pretty
-		if(this.progress > 0.5)
+			if(this.progress > 0.5) this.progress += 0.005;
-			this.progress += 0.005;
+			else this.progress += 0.05;
-		else
-			this.progress += 0.05;
 			this.draw();
 			if(this.progress >= 1) this.init();
 		}
 	}
+}
 
 const dots = [];
 
-const n = 20;
+const n = 50;
 
 for(let i = 0; i < n; i++) {
 	dots[i] = new Point();
@@ -118,8 +138,10 @@ addEventListener('keypress', e => {
 	}
 
 	if(eei == sequence.length) {
+		eei = 0;
 		clapper.classList.toggle('clapping');
 		setTimeout(() => {
+			if(!snowing) {
 				if(darkMode) {
 					document.body.classList.remove('dark-mode');
 					ctx.fillStyle = FILL_STYLES.light;
@@ -131,6 +153,18 @@ addEventListener('keypress', e => {
 					darkMode = 1;
 				}
 				eei = 0;
+			} else {
+				if(darkMode) {
+					ctx.fillStyle = FILL_STYLES.snowing;
+					document.body.style.backgroundColor = BACKGROUNDS.evening;
+					darkMode = 0;
+				}
+				else {
+					ctx.fillStyle = FILL_STYLES.dark;
+					document.body.style.backgroundColor = BACKGROUNDS.night;
+					darkMode = 1;
+				}
+			}
 			setTimeout(() => clapper.classList.toggle('clapping'), 500);
 		}, 500);
 	}