mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 23:16:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade particle rendering (fix cos/sin being in wrong order)

Browse source
This commit is contained in:
Jip Fr 2023-08-25 21:54:26 +02:00
parent b94b6b0249
commit 4ffbe45ab1
2 changed files with 42 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/fishie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 314 B

59
src/components/utils/Lightbar.tsx
View file

@ -16,7 +16,14 @@ class Particle {
ran = 0;
constructor(canvas: HTMLCanvasElement) {
image: null | HTMLImageElement = null;
constructor(canvas: HTMLCanvasElement, { doFish } = { doFish: false }) {
if (doFish) {
this.image = new Image();
if (this.image) this.image.src = "/fishie.png";
}
this.reset(canvas);
this.initialize(canvas);
}
@ -26,12 +33,17 @@ class Particle {
this.y = Math.random() * 100 + 5;
this.radius = 1 + Math.floor(Math.random() * 0.5);
this.direction = -((Math.random() * Math.PI) / 2) + Math.PI / 4;
this.direction = (Math.random() * Math.PI) / 2 + Math.PI / 4;
this.speed = 0.02 + Math.random() * 0.08;
const second = 60;
this.lifetime = second * 3 + Math.random() * (second * 30);
if (this.image) {
this.direction = Math.random() <= 0.5 ? 0 : Math.PI;
this.lifetime = 30 * second;
}
this.ran = 0;
}
@ -46,8 +58,8 @@ class Particle {
update(canvas: HTMLCanvasElement) {
this.ran += 1;
const addX = this.speed * Math.sin(this.direction);
const addY = this.speed * Math.cos(this.direction);
const addX = this.speed * Math.cos(this.direction);
const addY = this.speed * Math.sin(this.direction);
this.x += addX;
this.y += addY;
@ -67,17 +79,25 @@ class Particle {
const o = (x - x * x) * 4;
ctx.globalAlpha = Math.max(0, o * 0.8);
ctx.ellipse(
this.x,
this.y,
this.radius,
this.radius * 1.5,
this.direction,
0,
Math.PI * 2
);
ctx.fillStyle = "white";
ctx.fill();
if (this.image) {
ctx.translate(this.x, this.y);
const w = 10;
const h = (this.image.naturalWidth / this.image.naturalHeight) * w;
ctx.rotate(this.direction - Math.PI);
ctx.drawImage(this.image, -w / 2, h, h, w);
} else {
ctx.ellipse(
this.x,
this.y,
this.radius,
this.radius * 1.5,
this.direction,
0,
Math.PI * 2
);
ctx.fillStyle = "white";
ctx.fill();
}
ctx.restore();
}
}
@ -93,8 +113,13 @@ function ParticlesCanvas() {
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
for (let i = 0; i < 20; i += 1) {
const particle = new Particle(canvas);
const shouldShowFishie = Math.floor(Math.random() * 600) === 1;
const particleCount = 20;
for (let i = 0; i < particleCount; i += 1) {
const particle = new Particle(canvas, {
doFish: shouldShowFishie && i <= particleCount / 2,
});
particles.push(particle);
}