diff --git a/js/script.js b/js/script.js index df00da3..8a1c869 100644 --- a/js/script.js +++ b/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)' -} -ctx.fillStyle = FILL_STYLES.light; + dark: 'rgba(255,255,255,0.15)', + snowing: 'rgb(58, 82, 115)' +}; +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() { - // 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(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; - else - this.progress += 0.05; - this.draw(); - if(this.progress >= 1) this.init(); + 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) this.progress += 0.005; + 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,19 +138,33 @@ addEventListener('keypress', e => { } if(eei == sequence.length) { + eei = 0; clapper.classList.toggle('clapping'); setTimeout(() => { - if(darkMode) { - document.body.classList.remove('dark-mode'); - ctx.fillStyle = FILL_STYLES.light; - darkMode = 0; + if(!snowing) { + if(darkMode) { + document.body.classList.remove('dark-mode'); + ctx.fillStyle = FILL_STYLES.light; + darkMode = 0; + } + else { + document.body.classList.add('dark-mode'); + ctx.fillStyle = FILL_STYLES.dark; + 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; + } } - else { - document.body.classList.add('dark-mode'); - ctx.fillStyle = FILL_STYLES.dark; - darkMode = 1; - } - eei = 0; setTimeout(() => clapper.classList.toggle('clapping'), 500); }, 500); }