sophie/website
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

i added particles!
All checks were successful
/ test (push) Successful in 13s
Details

Browse source
This commit is contained in:
Soph :3 2024-07-27 04:22:44 +03:00
parent 7762622dc2
commit b33ce4a0d7
Signed by: sophie
GPG key ID: EDA5D222A0C270F2
2 changed files with 93 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
website/index.html
View file

@ -2,6 +2,8 @@ __TEMPLATE_HEAD__
<script type="module" src="scripts/blog.js"></script> <script type="module" src="scripts/blog.js"></script>
<script type="module" src="scripts/status_cafe.js"></script> <script type="module" src="scripts/status_cafe.js"></script>
<script type="module" src="scripts/particles.js"></script>
<script> <script>
window.addEventListener("load", () => { window.addEventListener("load", () => {
const stickers = document.getElementById("stickers"); const stickers = document.getElementById("stickers");
@ -20,6 +22,7 @@ __TEMPLATE_HEAD__
</head> </head>
<body class="repeating-bg"> <body class="repeating-bg">
<div class="order"> <div class="order">
<div class="paper details"> <div class="paper details">
<h1><span class="emoji">☹️☹️☹️</span>.ovh</h1> <h1><span class="emoji">☹️☹️☹️</span>.ovh</h1>
@ -28,7 +31,8 @@ __TEMPLATE_HEAD__
<p>I love to play games with peeps! My favorite games recently have been Minecraft and Stardew Valley! DM me <p>I love to play games with peeps! My favorite games recently have been Minecraft and Stardew Valley! DM me
if you wanna play with me ^w^ if you wanna play with me ^w^
</p> </p>
<p><a href="https://files.sad.ovh/public/midis">Did you know that I have a 6 gigabyte big MiDi collection? (empty password/username)</a></p> <p><a href="https://files.sad.ovh/public/midis">Did you know that I have a 6 gigabyte big MiDi collection?
(empty password/username)</a></p>
<p> <p>
DNI: DNI:
<br> <br>

88
website/scripts/particles.ts Normal file
View file

@ -0,0 +1,88 @@
class Particle {
x: number;
y: number;
timeExisting: number = 0;
element: HTMLSpanElement;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
const element = document.createElement("span");
element.style.position = "absolute";
element.style.left = this.x + "px";
element.style.top = this.y + "px";
element.style.color = "white";
element.style.fontSize = "30px";
element.style.transform = `rotate(${getRandomArbitrary(-90, 90)}deg)`;
element.style.userSelect = "none";
element.style.pointerEvents = "none";
element.innerText =
Math.random() < 0.5 ? "-" : Math.random() < 0.5 ? "+" : "*";
element.id = "particle_" + Math.random();
document.body.appendChild(element);
this.element = document.getElementById(element.id)!;
particles.push(this);
}
render() {
this.y += 2;
this.x -= getRandomArbitrary(-4, 4);
this.element.style.left = this.x + "px";
this.element.style.top = this.y + "px";
this.timeExisting += 1;
if (document.body.scrollHeight < this.y) {
this.kill(true);
}
if (this.timeExisting > 20) {
this.kill();
}
}
kill(forceKill = false) {
if (forceKill) {
document.body.removeChild(this.element);
particles = particles.filter((z) => z.element.id !== this.element.id);
} else {
const opacity = Math.abs(this.timeExisting - 30);
this.element.style.opacity = (opacity / 10) + "";
this.element.style.fontSize = (opacity * 3)+"px";
if (opacity <= 0) {
document.body.removeChild(this.element);
particles = particles.filter((z) => z.element.id !== this.element.id);
}
}
}
}
function getRandomArbitrary(min: number, max: number) {
return Math.random() * (max - min) + min;
}
let particles: Particle[] = [];
let lastRenderTimestamp = 0;
let lastMoveTimestamp = 0;
function particleRenderLoop(timestamp: number) {
if (timestamp - lastRenderTimestamp < 100) {
window.requestAnimationFrame(particleRenderLoop);
return;
}
lastRenderTimestamp = timestamp;
for (const particle of particles) {
particle.render();
}
window.requestAnimationFrame(particleRenderLoop);
}
document.addEventListener("mousemove", (event) => {
if (Date.now() - lastMoveTimestamp < 50) {
return;
}
lastMoveTimestamp = Date.now();
new Particle(
event.pageX + (Math.random() * 10 - 20),
event.pageY + (Math.random() * 10 - 20)
);
});
window.requestAnimationFrame(particleRenderLoop);