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.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);
}