fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

snowing

Browse source 
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2022-12-12 15:03:50 -05:00
parent c2ab665f0b
commit b9363f3ca9
1 changed files with 60 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

86
js/script.js
View file

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