This commit is contained in:
parent
545011326e
commit
aeafd99cf8
2 changed files with 48 additions and 38 deletions
|
|
@ -38,7 +38,7 @@ const binky = [
|
||||||
["https://giikis2.nekoweb.org", "giikis2.png"],
|
["https://giikis2.nekoweb.org", "giikis2.png"],
|
||||||
["https://layercake.nekoweb.org", "layercake.gif"],
|
["https://layercake.nekoweb.org", "layercake.gif"],
|
||||||
["https://yoyle.city", "yoyledotcity.png"],
|
["https://yoyle.city", "yoyledotcity.png"],
|
||||||
["https://prigoana.com/", "prigoana"],
|
["https://prigoana.com/", "prigoana.png"],
|
||||||
|
|
||||||
|
|
||||||
[
|
[
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,8 @@ function getRandomArbitrary(min: number, max: number) {
|
||||||
return Math.random() * (max - min) + min;
|
return Math.random() * (max - min) + min;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isWinter = (new Date()).getMonth() == 11;
|
||||||
|
|
||||||
class Particle {
|
class Particle {
|
||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
|
|
@ -31,19 +33,15 @@ class Particle {
|
||||||
this.id = Math.random();
|
this.id = Math.random();
|
||||||
this.angle = 2 * Math.PI * this.id;
|
this.angle = 2 * Math.PI * this.id;
|
||||||
// trans flag colors
|
// trans flag colors
|
||||||
this.color = ["#5BCEFA", "#F5A9B8", "#FFFFFF"][
|
|
||||||
|
this.color = isWinter ?
|
||||||
|
["#ecfffd", "#d0eceb", "#a0e6ec", "#94f2f4"][
|
||||||
|
Math.floor(Math.random() * 4)
|
||||||
|
] : ["#5BCEFA", "#F5A9B8", "#FFFFFF"][
|
||||||
Math.floor(Math.random() * 3)
|
Math.floor(Math.random() * 3)
|
||||||
];
|
];
|
||||||
// random pastel color with HSL
|
|
||||||
/*this.color =
|
const characters = isWinter ? ["❅", "❆", "❃", "❊", "❉"] : ["+", "⊹", ".", "-"]
|
||||||
"hsl(" +
|
|
||||||
360 * Math.random() +
|
|
||||||
"," +
|
|
||||||
(25 + 70 * Math.random()) +
|
|
||||||
"%," +
|
|
||||||
(85 + 10 * Math.random()) +
|
|
||||||
"%)";*/
|
|
||||||
const characters = ["+", "⊹", ".", "-"]
|
|
||||||
this.style = characters[Math.floor(Math.random() * characters.length)];
|
this.style = characters[Math.floor(Math.random() * characters.length)];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -55,7 +53,7 @@ class Particle {
|
||||||
|
|
||||||
renderSurfaceContext.save();
|
renderSurfaceContext.save();
|
||||||
renderSurfaceContext.fillStyle = this.color;
|
renderSurfaceContext.fillStyle = this.color;
|
||||||
renderSurfaceContext.font = Math.floor(this.id * 80) + "px Arial";
|
renderSurfaceContext.font = Math.floor(this.id * (isWinter ? 30 : 80)) + "px Arial";
|
||||||
renderSurfaceContext.translate(this.x, this.y);
|
renderSurfaceContext.translate(this.x, this.y);
|
||||||
renderSurfaceContext.rotate(2 * Math.PI * this.id);
|
renderSurfaceContext.rotate(2 * Math.PI * this.id);
|
||||||
renderSurfaceContext.fillText(this.style, -width2 / 2, 4);
|
renderSurfaceContext.fillText(this.style, -width2 / 2, 4);
|
||||||
|
|
@ -88,33 +86,45 @@ setInterval((e) => {
|
||||||
renderSurface.height = document.documentElement.scrollHeight;
|
renderSurface.height = document.documentElement.scrollHeight;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
let lastMoveTimestamp = 0;
|
if (isWinter) {
|
||||||
|
let X = Math.floor(Math.random() * document.documentElement.scrollWidth);
|
||||||
|
|
||||||
document.documentElement.addEventListener("mousemove", (event) => {
|
setInterval(() => {
|
||||||
if (Date.now() - lastMoveTimestamp < 20) {
|
X = Math.floor(Math.random() * document.documentElement.scrollWidth);
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
lastMoveTimestamp = Date.now();
|
const particle = new Particle(X, 0);
|
||||||
const particle = new Particle(event.pageX, event.pageY);
|
particles.push(particle);
|
||||||
particles.push(particle);
|
}, 200)
|
||||||
});
|
} else {
|
||||||
|
let lastMoveTimestamp = 0;
|
||||||
|
|
||||||
document.documentElement.addEventListener(
|
|
||||||
"touchmove",
|
|
||||||
function (e) {
|
|
||||||
for (let i = 0; i < e.touches.length; i++) {
|
|
||||||
if (Date.now() - lastMoveTimestamp < 50) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
lastMoveTimestamp = Date.now();
|
document.documentElement.addEventListener("mousemove", (event) => {
|
||||||
const touch = e.touches.item(i);
|
if (Date.now() - lastMoveTimestamp < 20) {
|
||||||
if (!touch) return;
|
return;
|
||||||
|
|
||||||
const particle = new Particle(touch.pageX, touch.pageY);
|
|
||||||
particles.push(particle);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
false
|
lastMoveTimestamp = Date.now();
|
||||||
);
|
const particle = new Particle(event.pageX, event.pageY);
|
||||||
|
particles.push(particle);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.documentElement.addEventListener(
|
||||||
|
"touchmove",
|
||||||
|
function (e) {
|
||||||
|
for (let i = 0; i < e.touches.length; i++) {
|
||||||
|
if (Date.now() - lastMoveTimestamp < 50) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastMoveTimestamp = Date.now();
|
||||||
|
const touch = e.touches.item(i);
|
||||||
|
if (!touch) return;
|
||||||
|
|
||||||
|
const particle = new Particle(touch.pageX, touch.pageY);
|
||||||
|
particles.push(particle);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue