Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 16:51:51 +01: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

37
src/components/utils/Lightbar.tsx
View File

@ -16,7 +16,14 @@ class Particle {
ran = 0; 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.reset(canvas);
this.initialize(canvas); this.initialize(canvas);
} }
@ -26,12 +33,17 @@ class Particle {
this.y = Math.random() * 100 + 5; this.y = Math.random() * 100 + 5;
this.radius = 1 + Math.floor(Math.random() * 0.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; this.speed = 0.02 + Math.random() * 0.08;
const second = 60; const second = 60;
this.lifetime = second * 3 + Math.random() * (second * 30); 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; this.ran = 0;
} }
@ -46,8 +58,8 @@ class Particle {
update(canvas: HTMLCanvasElement) { update(canvas: HTMLCanvasElement) {
this.ran += 1; this.ran += 1;
const addX = this.speed * Math.sin(this.direction); const addX = this.speed * Math.cos(this.direction);
const addY = this.speed * Math.cos(this.direction); const addY = this.speed * Math.sin(this.direction);
this.x += addX; this.x += addX;
this.y += addY; this.y += addY;
@ -67,6 +79,13 @@ class Particle {
const o = (x - x * x) * 4; const o = (x - x * x) * 4;
ctx.globalAlpha = Math.max(0, o * 0.8); ctx.globalAlpha = Math.max(0, o * 0.8);
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( ctx.ellipse(
this.x, this.x,
this.y, this.y,
@ -78,6 +97,7 @@ class Particle {
); );
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.fill(); ctx.fill();
}
ctx.restore(); ctx.restore();
} }
} }
@ -93,8 +113,13 @@ function ParticlesCanvas() {
canvas.width = canvas.scrollWidth; canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight; canvas.height = canvas.scrollHeight;
for (let i = 0; i < 20; i += 1) { const shouldShowFishie = Math.floor(Math.random() * 600) === 1;
const particle = new Particle(canvas); const particleCount = 20;
for (let i = 0; i < particleCount; i += 1) {
const particle = new Particle(canvas, {
doFish: shouldShowFishie && i <= particleCount / 2,
});
particles.push(particle); particles.push(particle);
} }