Fuegos artificiales con ratón

3,761 Andev.web

Abrir en el editor Publica tu código

Recomendado

8 May 2026

Reemplazador HTML: Obtener e inyectar contenido externo

12 September 2025

Control deslizante de imágenes HTML CSS JavaScript

11 February 2026

Ejemplo de detección de aviones con seguimiento manual de AR en WebXR

HTML

CSS

class PointerParticle {
  constructor(spread, speed, component) {
    const { ctx, pointer, hue } = component;

this.ctx = ctx;
    this.x = pointer.x;
    this.y = pointer.y;
    this.mx = pointer.mx * 0.1;
    this.my = pointer.my * 0.1;
    this.size = Math.random() + 1;
    this.decay = 0.01;
    this.speed = speed * 0.08;
    this.spread = spread * this.speed;
    this.spreadX = (Math.random() - 0.5) * this.spread - this.mx;
    this.spreadY = (Math.random() - 0.5) * this.spread - this.my;
    this.color = `hsl(${hue}, 90%, 60%)`;
  }

draw() {
    this.ctx.fillStyle = this.color;
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    this.ctx.fill();
  }

collapse() {
    this.size -= this.decay;
  }

trail() {
    this.x += this.spreadX * this.size;
    this.y += this.spreadY * this.size;
  }

update() {
    this.draw();
    this.trail();
    this.collapse();
  }
}

class PointerParticles extends HTMLElement {
  static register(tag = "pointer-particles") {
    if ("customElements" in window) {
      customElements.define(tag, this);
    }
  }

static css = `
      :host {
        display: grid;
        width: 100%;
        height: 100%;
        user-select: none;
      }
    `;

constructor() {
    super();

this.canvas;
    this.ctx;
    this.fps = 60;
    this.msPerFrame = 1000 / this.fps;
    this.timePrevious;
    this.particles = [];
    this.pointer = {
      x: 0,
      y: 0,
      mx: 0,
      my: 0
    };
    this.hue = 0;
  }

connectedCallback() {
    const canvas = document.createElement("canvas");
    const sheet = new CSSStyleSheet();

this.shadowroot = this.attachShadow({ mode: "open" });

sheet.replaceSync(PointerParticles.css);
    this.shadowroot.adoptedStyleSheets = [sheet];

this.shadowroot.append(canvas);

this.canvas = this.shadowroot.querySelector("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.setCanvasDimensions();
    this.setupEvents();
    this.timePrevious = performance.now();
    this.animateParticles();
  }

createParticles(event, { count, speed, spread }) {
    this.setPointerValues(event);

for (let i = 0; i < count; i++) {
      this.particles.push(new PointerParticle(spread, speed, this));
    }
  }

setPointerValues(event) {
    this.pointer.x = event.x - this.offsetLeft;
    this.pointer.y = event.y - this.offsetTop;
    this.pointer.mx = event.movementX;
    this.pointer.my = event.movementY;
  }

setupEvents() {
    const parent = this.parentNode;

parent.addEventListener("click", (event) => {
      this.createParticles(event, {
        count: 300,
        speed: Math.random() + 1,
        spread: Math.random() + 50
      });
    });

parent.addEventListener("pointermove", (event) => {
      this.createParticles(event, {
        count: 20,
        speed: this.getSpeed(event),
        spread: 1
      });
    });

window.addEventListener("resize", () => this.setCanvasDimensions());
  }

getSpeed(event) {
    const a = event.movementX;
    const b = event.movementY;
    const c = Math.floor(Math.sqrt(a * a + b * b));

return c;
  }

handleParticles() {
    for (let i = 0; i < this.particles.length; i++) {
      this.particles[i].update();

if (this.particles[i].size <= 0.1) {
        this.particles.splice(i, 1);
        i--;
      }
    }
  }

setCanvasDimensions() {
    const rect = this.parentNode.getBoundingClientRect();

this.canvas.width = rect.width;
    this.canvas.height = rect.height;
  }

animateParticles() {
    requestAnimationFrame(() => this.animateParticles());

const timeNow = performance.now();
    const timePassed = timeNow - this.timePrevious;

if (timePassed < this.msPerFrame) return;

const excessTime = timePassed % this.msPerFrame;

this.timePrevious = timeNow - excessTime;

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.hue = this.hue > 360 ? 0 : (this.hue += 3);

this.handleParticles();
  }
}

PointerParticles.register();