542 lines
16 KiB
JavaScript
542 lines
16 KiB
JavaScript
/**
|
|
* PPE SAFETY CHALLENGE - PARTICLE PHYSICS & VISUAL FX ENGINE
|
|
* Renders high-velocity sparks, chemical pours, near-miss hazard projectiles, and freeze-frame effects.
|
|
*/
|
|
|
|
class ParticleEngine {
|
|
constructor(canvasId) {
|
|
this.canvas = document.getElementById(canvasId);
|
|
this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
|
|
this.particles = [];
|
|
this.projectiles = [];
|
|
this.confetti = [];
|
|
this.isRunning = false;
|
|
this.isFrozen = false;
|
|
this.activeMode = null; // 'sparks', 'chemical', 'confetti'
|
|
|
|
this.resize();
|
|
window.addEventListener('resize', () => this.resize());
|
|
}
|
|
|
|
resize() {
|
|
if (!this.canvas) return;
|
|
const rect = this.canvas.parentElement.getBoundingClientRect();
|
|
this.canvas.width = rect.width;
|
|
this.canvas.height = rect.height;
|
|
}
|
|
|
|
clear() {
|
|
this.particles = [];
|
|
this.projectiles = [];
|
|
this.confetti = [];
|
|
if (this.ctx && this.canvas) {
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
}
|
|
|
|
setFrozen(freeze) {
|
|
this.isFrozen = freeze;
|
|
}
|
|
|
|
startMode(mode) {
|
|
this.activeMode = mode;
|
|
this.isFrozen = false;
|
|
if (!this.isRunning) {
|
|
this.isRunning = true;
|
|
this.animate();
|
|
}
|
|
}
|
|
|
|
stopMode() {
|
|
this.activeMode = null;
|
|
this.clear();
|
|
}
|
|
|
|
// Particle Spawning (Disabled for clean direct feedback)
|
|
spawnHazardProjectile(type, startX, startY, targetX, targetY) {
|
|
// Disabled
|
|
}
|
|
|
|
spawnSparks(originX, originY, count = 12) {
|
|
// Disabled
|
|
}
|
|
|
|
spawnChemicalFlow(originX, originY) {
|
|
// Disabled
|
|
}
|
|
|
|
spawnConfetti() {
|
|
this.confetti = [];
|
|
const colors = ['#facc15', '#10b981', '#0ea5e9', '#ec4899', '#8b5cf6'];
|
|
for (let i = 0; i < 80; i++) {
|
|
this.confetti.push({
|
|
x: this.canvas.width / 2,
|
|
y: this.canvas.height / 2,
|
|
vx: (Math.random() - 0.5) * 16,
|
|
vy: (Math.random() - 0.8) * 14,
|
|
size: Math.random() * 8 + 4,
|
|
color: colors[Math.floor(Math.random() * colors.length)],
|
|
rotation: Math.random() * Math.PI * 2,
|
|
rotSpeed: (Math.random() - 0.5) * 0.2,
|
|
gravity: 0.2,
|
|
life: 1.0,
|
|
decay: 0.012
|
|
});
|
|
}
|
|
}
|
|
|
|
animate() {
|
|
if (!this.isRunning) return;
|
|
|
|
if (!this.isFrozen) {
|
|
if (this.ctx && this.canvas) {
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
|
|
// Origin coordinates relative to stage
|
|
const originX = this.canvas.width * 0.72;
|
|
const originY = this.canvas.height * 0.65;
|
|
|
|
if (this.activeMode === 'sparks') {
|
|
this.spawnSparks(originX, originY, 6);
|
|
} else if (this.activeMode === 'chemical') {
|
|
this.spawnChemicalFlow(originX, originY);
|
|
}
|
|
|
|
// 1. Update & Draw Ambient Task Particles
|
|
for (let i = this.particles.length - 1; i >= 0; i--) {
|
|
const p = this.particles[i];
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
p.vy += p.gravity;
|
|
p.life -= p.decay;
|
|
|
|
if (p.life <= 0) {
|
|
this.particles.splice(i, 1);
|
|
continue;
|
|
}
|
|
|
|
this.ctx.save();
|
|
this.ctx.globalAlpha = Math.max(0, p.life);
|
|
this.ctx.fillStyle = p.color;
|
|
this.ctx.shadowBlur = p.type === 'spark' ? 8 : 4;
|
|
this.ctx.shadowColor = p.color;
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
this.ctx.fill();
|
|
this.ctx.restore();
|
|
}
|
|
|
|
// 2. Update & Draw Near-Miss Projectiles (For Consequence Warning)
|
|
for (let i = this.projectiles.length - 1; i >= 0; i--) {
|
|
const prj = this.projectiles[i];
|
|
prj.trail.push({ x: prj.x, y: prj.y });
|
|
if (prj.trail.length > 8) prj.trail.shift();
|
|
|
|
prj.x += prj.vx;
|
|
prj.y += prj.vy;
|
|
|
|
// Draw glowing motion trail
|
|
this.ctx.save();
|
|
this.ctx.strokeStyle = prj.color;
|
|
this.ctx.lineWidth = prj.size * 0.8;
|
|
this.ctx.lineCap = 'round';
|
|
this.ctx.shadowBlur = 12;
|
|
this.ctx.shadowColor = prj.color;
|
|
|
|
if (prj.trail.length > 1) {
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(prj.trail[0].x, prj.trail[0].y);
|
|
for (let j = 1; j < prj.trail.length; j++) {
|
|
this.ctx.lineTo(prj.trail[j].x, prj.trail[j].y);
|
|
}
|
|
this.ctx.stroke();
|
|
}
|
|
|
|
// Draw head
|
|
this.ctx.fillStyle = '#ffffff';
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(prj.x, prj.y, prj.size, 0, Math.PI * 2);
|
|
this.ctx.fill();
|
|
this.ctx.restore();
|
|
|
|
// Check if close to worker target -> trigger freeze frame
|
|
const dist = Math.hypot(prj.x - prj.targetX, prj.y - prj.targetY);
|
|
if (dist < 35 && !prj.reached) {
|
|
prj.reached = true;
|
|
// Trigger visual freeze event
|
|
window.dispatchEvent(new CustomEvent('hazard-freeze-triggered', { detail: { projectile: prj } }));
|
|
}
|
|
}
|
|
|
|
// 3. Update & Draw Victory Confetti
|
|
for (let i = this.confetti.length - 1; i >= 0; i--) {
|
|
const c = this.confetti[i];
|
|
c.x += c.vx;
|
|
c.y += c.vy;
|
|
c.vy += c.gravity;
|
|
c.rotation += c.rotSpeed;
|
|
c.life -= c.decay;
|
|
|
|
if (c.life <= 0) {
|
|
this.confetti.splice(i, 1);
|
|
continue;
|
|
}
|
|
|
|
this.ctx.save();
|
|
this.ctx.translate(c.x, c.y);
|
|
this.ctx.rotate(c.rotation);
|
|
this.ctx.globalAlpha = c.life;
|
|
this.ctx.fillStyle = c.color;
|
|
this.ctx.fillRect(-c.size / 2, -c.size / 4, c.size, c.size / 2);
|
|
this.ctx.restore();
|
|
}
|
|
} else {
|
|
// FROZEN STATE: Draw pulsating danger halo around the frozen near-miss particle
|
|
if (this.projectiles.length > 0) {
|
|
const prj = this.projectiles[0];
|
|
this.ctx.save();
|
|
const pulse = Math.sin(Date.now() * 0.01) * 8 + 18;
|
|
this.ctx.strokeStyle = '#ef4444';
|
|
this.ctx.lineWidth = 3;
|
|
this.ctx.setLineDash([6, 4]);
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(prj.x, prj.y, pulse, 0, Math.PI * 2);
|
|
this.ctx.stroke();
|
|
|
|
// Threat line to avatar
|
|
this.ctx.strokeStyle = 'rgba(239, 68, 68, 0.7)';
|
|
this.ctx.lineWidth = 2;
|
|
this.ctx.setLineDash([4, 4]);
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(prj.x, prj.y);
|
|
this.ctx.lineTo(prj.targetX, prj.targetY);
|
|
this.ctx.stroke();
|
|
this.ctx.restore();
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(() => this.animate());
|
|
}
|
|
}
|
|
|
|
/**
|
|
* GOLDEN PARTICLE ENGINE FOR HOME SCREEN
|
|
* Generates floating golden ambient dust, sparkling stars, glowing bokeh orbs, and embers.
|
|
*/
|
|
class GoldenParticleEngine {
|
|
constructor(canvasId) {
|
|
this.canvas = document.getElementById(canvasId);
|
|
this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
|
|
this.particles = [];
|
|
this.mouse = { x: -1000, y: -1000, isHovering: false };
|
|
this.isRunning = false;
|
|
this.maxParticles = 75;
|
|
this.animId = null;
|
|
|
|
if (this.canvas) {
|
|
this.init();
|
|
}
|
|
}
|
|
|
|
init() {
|
|
this.resize();
|
|
window.addEventListener('resize', () => this.resize());
|
|
|
|
// Interactive mouse glow and cursor sparkle trail
|
|
const backdrop = this.canvas.parentElement;
|
|
if (backdrop) {
|
|
backdrop.addEventListener('mousemove', (e) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
this.mouse.x = e.clientX - rect.left;
|
|
this.mouse.y = e.clientY - rect.top;
|
|
this.mouse.isHovering = true;
|
|
|
|
if (Math.random() < 0.4 && this.isRunning) {
|
|
this.spawnCursorSparkle(this.mouse.x, this.mouse.y);
|
|
}
|
|
});
|
|
|
|
backdrop.addEventListener('mouseleave', () => {
|
|
this.mouse.isHovering = false;
|
|
this.mouse.x = -1000;
|
|
this.mouse.y = -1000;
|
|
});
|
|
}
|
|
|
|
this.createInitialParticles();
|
|
this.start();
|
|
}
|
|
|
|
resize() {
|
|
if (!this.canvas) return;
|
|
const rect = this.canvas.parentElement ? this.canvas.parentElement.getBoundingClientRect() : this.canvas.getBoundingClientRect();
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
this.canvas.width = (rect.width || 1024) * dpr;
|
|
this.canvas.height = (rect.height || 458) * dpr;
|
|
this.dpr = dpr;
|
|
this.logicalWidth = rect.width || 1024;
|
|
this.logicalHeight = rect.height || 458;
|
|
}
|
|
|
|
createInitialParticles() {
|
|
this.particles = [];
|
|
for (let i = 0; i < this.maxParticles; i++) {
|
|
this.particles.push(this.createParticle(true));
|
|
}
|
|
}
|
|
|
|
createParticle(randomY = false) {
|
|
const types = ['dust', 'dust', 'sparkle', 'orb', 'ember'];
|
|
const type = types[Math.floor(Math.random() * types.length)];
|
|
const w = this.logicalWidth || 1024;
|
|
const h = this.logicalHeight || 458;
|
|
|
|
const palettes = [
|
|
{ fill: '#ffd700', glow: '#f59e0b' }, // 24k Gold
|
|
{ fill: '#fef08a', glow: '#fbbf24' }, // Light Champagne Sparkle
|
|
{ fill: '#f59e0b', glow: '#d97706' }, // Deep Warm Amber Gold
|
|
{ fill: '#fffbeb', glow: '#facc15' }, // Star Core Glow
|
|
{ fill: '#eab308', glow: '#ca8a04' } // Lustrous Yellow Gold
|
|
];
|
|
const palette = palettes[Math.floor(Math.random() * palettes.length)];
|
|
|
|
let size, baseAlpha, speedY, speedX, wobbleSpeed;
|
|
if (type === 'orb') {
|
|
size = Math.random() * 4.5 + 2.5;
|
|
baseAlpha = Math.random() * 0.22 + 0.08;
|
|
speedY = -(Math.random() * 0.35 + 0.12);
|
|
speedX = (Math.random() - 0.5) * 0.22;
|
|
wobbleSpeed = Math.random() * 0.015 + 0.005;
|
|
} else if (type === 'sparkle') {
|
|
size = Math.random() * 3.5 + 2.2;
|
|
baseAlpha = Math.random() * 0.55 + 0.35;
|
|
speedY = -(Math.random() * 0.6 + 0.25);
|
|
speedX = (Math.random() - 0.5) * 0.35;
|
|
wobbleSpeed = Math.random() * 0.03 + 0.01;
|
|
} else if (type === 'ember') {
|
|
size = Math.random() * 2.2 + 1.2;
|
|
baseAlpha = Math.random() * 0.75 + 0.25;
|
|
speedY = -(Math.random() * 0.85 + 0.35);
|
|
speedX = (Math.random() - 0.5) * 0.4;
|
|
wobbleSpeed = Math.random() * 0.04 + 0.015;
|
|
} else { // dust
|
|
size = Math.random() * 1.8 + 0.8;
|
|
baseAlpha = Math.random() * 0.45 + 0.2;
|
|
speedY = -(Math.random() * 0.4 + 0.15);
|
|
speedX = (Math.random() - 0.5) * 0.2;
|
|
wobbleSpeed = Math.random() * 0.02 + 0.008;
|
|
}
|
|
|
|
return {
|
|
type,
|
|
x: Math.random() * w,
|
|
y: randomY ? Math.random() * h : h + Math.random() * 15,
|
|
size,
|
|
palette,
|
|
baseAlpha,
|
|
currentAlpha: baseAlpha,
|
|
speedY,
|
|
speedX,
|
|
wobbleAngle: Math.random() * Math.PI * 2,
|
|
wobbleSpeed,
|
|
wobbleRadius: Math.random() * 20 + 8,
|
|
twinkleAngle: Math.random() * Math.PI * 2,
|
|
twinkleSpeed: Math.random() * 0.05 + 0.02,
|
|
rot: Math.random() * Math.PI * 2,
|
|
rotSpeed: (Math.random() - 0.5) * 0.025,
|
|
life: 1.0,
|
|
isCursorParticle: false
|
|
};
|
|
}
|
|
|
|
spawnCursorSparkle(x, y) {
|
|
if (this.particles.length > this.maxParticles + 25) return;
|
|
|
|
this.particles.push({
|
|
type: 'sparkle',
|
|
x: x + (Math.random() - 0.5) * 14,
|
|
y: y + (Math.random() - 0.5) * 14,
|
|
size: Math.random() * 3 + 2,
|
|
palette: { fill: '#ffffff', glow: '#ffd700' },
|
|
baseAlpha: 0.95,
|
|
currentAlpha: 0.95,
|
|
speedY: (Math.random() - 0.7) * 1.4,
|
|
speedX: (Math.random() - 0.5) * 1.4,
|
|
wobbleAngle: Math.random() * Math.PI * 2,
|
|
wobbleSpeed: 0.05,
|
|
wobbleRadius: 6,
|
|
twinkleAngle: 0,
|
|
twinkleSpeed: 0.12,
|
|
rot: Math.random() * Math.PI,
|
|
rotSpeed: 0.06,
|
|
life: 1.0,
|
|
decay: 0.022,
|
|
isCursorParticle: true
|
|
});
|
|
}
|
|
|
|
start() {
|
|
if (this.isRunning) return;
|
|
this.isRunning = true;
|
|
this.animate();
|
|
}
|
|
|
|
stop() {
|
|
this.isRunning = false;
|
|
if (this.animId) {
|
|
cancelAnimationFrame(this.animId);
|
|
this.animId = null;
|
|
}
|
|
}
|
|
|
|
drawStarSparkle(ctx, x, y, size, rot, alpha, palette) {
|
|
ctx.save();
|
|
ctx.translate(x, y);
|
|
ctx.rotate(rot);
|
|
ctx.globalAlpha = alpha;
|
|
ctx.fillStyle = palette.fill;
|
|
ctx.shadowColor = palette.glow;
|
|
ctx.shadowBlur = 10;
|
|
|
|
const spikes = 4;
|
|
const outerRadius = size * 1.9;
|
|
const innerRadius = size * 0.35;
|
|
|
|
ctx.beginPath();
|
|
for (let i = 0; i < spikes * 2; i++) {
|
|
const r = (i % 2 === 0) ? outerRadius : innerRadius;
|
|
const angle = (i * Math.PI) / spikes;
|
|
const sx = Math.cos(angle) * r;
|
|
const sy = Math.sin(angle) * r;
|
|
if (i === 0) ctx.moveTo(sx, sy);
|
|
else ctx.lineTo(sx, sy);
|
|
}
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// Inner bright core
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, innerRadius * 0.75, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
animate() {
|
|
if (!this.isRunning) return;
|
|
|
|
const w = this.logicalWidth || 1024;
|
|
const h = this.logicalHeight || 458;
|
|
const dpr = this.dpr || 1;
|
|
|
|
if (this.ctx && this.canvas) {
|
|
this.ctx.save();
|
|
this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
this.ctx.clearRect(0, 0, w, h);
|
|
|
|
for (let i = this.particles.length - 1; i >= 0; i--) {
|
|
const p = this.particles[i];
|
|
|
|
// Motion & Oscillation
|
|
p.wobbleAngle += p.wobbleSpeed;
|
|
p.twinkleAngle += p.twinkleSpeed;
|
|
p.rot += p.rotSpeed;
|
|
|
|
p.y += p.speedY;
|
|
p.x += p.speedX + Math.sin(p.wobbleAngle) * 0.4;
|
|
|
|
// Twinkle factor
|
|
const twinkleFactor = 0.65 + 0.35 * Math.sin(p.twinkleAngle);
|
|
p.currentAlpha = p.baseAlpha * twinkleFactor;
|
|
|
|
// Cursor gentle magnetic attraction / deflection
|
|
if (this.mouse.isHovering) {
|
|
const dx = p.x - this.mouse.x;
|
|
const dy = p.y - this.mouse.y;
|
|
const dist = Math.hypot(dx, dy);
|
|
if (dist < 65 && dist > 1) {
|
|
const force = (65 - dist) / 65 * 0.65;
|
|
p.x += (dx / dist) * force;
|
|
p.y += (dy / dist) * force;
|
|
}
|
|
}
|
|
|
|
// Handle cursor-spawned decay
|
|
if (p.isCursorParticle) {
|
|
p.life -= p.decay || 0.02;
|
|
p.currentAlpha *= Math.max(0, p.life);
|
|
if (p.life <= 0) {
|
|
this.particles.splice(i, 1);
|
|
continue;
|
|
}
|
|
}
|
|
|
|
// Recycle particles drifting off screen
|
|
if (p.y < -25 || p.x < -30 || p.x > w + 30) {
|
|
if (!p.isCursorParticle) {
|
|
this.particles[i] = this.createParticle(false);
|
|
} else {
|
|
this.particles.splice(i, 1);
|
|
}
|
|
continue;
|
|
}
|
|
|
|
// Render particle
|
|
if (p.type === 'sparkle') {
|
|
this.drawStarSparkle(this.ctx, p.x, p.y, p.size, p.rot, Math.min(1, p.currentAlpha), p.palette);
|
|
} else if (p.type === 'orb') {
|
|
// Soft golden bokeh orb
|
|
this.ctx.save();
|
|
this.ctx.globalAlpha = Math.min(1, p.currentAlpha);
|
|
this.ctx.fillStyle = p.palette.fill;
|
|
this.ctx.shadowColor = p.palette.glow;
|
|
this.ctx.shadowBlur = 10;
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
this.ctx.fill();
|
|
|
|
// Outer translucent halo
|
|
this.ctx.fillStyle = p.palette.glow;
|
|
this.ctx.globalAlpha = p.currentAlpha * 0.35;
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(p.x, p.y, p.size * 1.7, 0, Math.PI * 2);
|
|
this.ctx.fill();
|
|
this.ctx.restore();
|
|
} else {
|
|
// Ambient dust or ember
|
|
this.ctx.save();
|
|
this.ctx.globalAlpha = Math.min(1, p.currentAlpha);
|
|
this.ctx.fillStyle = p.palette.fill;
|
|
this.ctx.shadowColor = p.palette.glow;
|
|
this.ctx.shadowBlur = p.type === 'ember' ? 8 : 4;
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
this.ctx.fill();
|
|
|
|
if (p.type === 'ember') {
|
|
this.ctx.fillStyle = '#ffffff';
|
|
this.ctx.globalAlpha = p.currentAlpha * 0.85;
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(p.x, p.y, p.size * 0.4, 0, Math.PI * 2);
|
|
this.ctx.fill();
|
|
}
|
|
this.ctx.restore();
|
|
}
|
|
}
|
|
|
|
this.ctx.restore();
|
|
}
|
|
|
|
this.animId = requestAnimationFrame(() => this.animate());
|
|
}
|
|
}
|
|
|
|
window.ParticleEngine = ParticleEngine;
|
|
window.GoldenParticleEngine = GoldenParticleEngine;
|
|
|