make snow a bit nicer
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
parent
f601d48f4e
commit
bc71995cf0
1 changed files with 8 additions and 8 deletions
16
js/script.js
16
js/script.js
|
@ -9,17 +9,17 @@ 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)'
|
snowing: 'rgb(206, 212, 220)'
|
||||||
};
|
};
|
||||||
const BACKGROUNDS = {
|
const BACKGROUNDS = {
|
||||||
evening: '#0c2b53',
|
evening: 'linear-gradient(#011d32, #3b3b89)',
|
||||||
night: '#000000'
|
night: '#000000'
|
||||||
};
|
};
|
||||||
ctx.fillStyle = snowing ? FILL_STYLES.snowing : FILL_STYLES.light;
|
ctx.fillStyle = snowing ? FILL_STYLES.snowing : FILL_STYLES.light;
|
||||||
let darkMode = 0;
|
let darkMode = 0;
|
||||||
if(snowing) {
|
if(snowing) {
|
||||||
document.body.classList.add('dark-mode');
|
document.body.classList.add('dark-mode');
|
||||||
document.body.style.backgroundColor = BACKGROUNDS.evening;
|
document.body.style.background = BACKGROUNDS.evening;
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventListener('resize', () => {
|
addEventListener('resize', () => {
|
||||||
|
@ -30,7 +30,7 @@ addEventListener('resize', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
function Point() {
|
function Point() {
|
||||||
const r = 8;
|
const r = snowing ? 4 : 8;
|
||||||
|
|
||||||
// progress below 0 is neglected, negative initial
|
// progress below 0 is neglected, negative initial
|
||||||
// progress serves to introduce random delays -
|
// progress serves to introduce random delays -
|
||||||
|
@ -63,8 +63,8 @@ function Point() {
|
||||||
};
|
};
|
||||||
this.render = function() {
|
this.render = function() {
|
||||||
if(snowing) {
|
if(snowing) {
|
||||||
this.y += 0.5 * Math.pow(this.r, 0.25);
|
this.y += Math.pow(this.r, 0.25);
|
||||||
this.x = (this.x + 0.3) % (canvas.width + this.r); // wind
|
this.x = (this.x + 0.3) % canvas.width; // wind
|
||||||
this.progress += 0.005;
|
this.progress += 0.005;
|
||||||
this.draw();
|
this.draw();
|
||||||
if(this.y >= canvas.height + r) this.init();
|
if(this.y >= canvas.height + r) this.init();
|
||||||
|
@ -156,12 +156,12 @@ addEventListener('keypress', e => {
|
||||||
} else {
|
} else {
|
||||||
if(darkMode) {
|
if(darkMode) {
|
||||||
ctx.fillStyle = FILL_STYLES.snowing;
|
ctx.fillStyle = FILL_STYLES.snowing;
|
||||||
document.body.style.backgroundColor = BACKGROUNDS.evening;
|
document.body.style.background = BACKGROUNDS.evening;
|
||||||
darkMode = 0;
|
darkMode = 0;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
ctx.fillStyle = FILL_STYLES.dark;
|
ctx.fillStyle = FILL_STYLES.dark;
|
||||||
document.body.style.backgroundColor = BACKGROUNDS.night;
|
document.body.style.background = BACKGROUNDS.night;
|
||||||
darkMode = 1;
|
darkMode = 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue