Particle.js

import Image from "../Image.js";
import GameObject from "../../objects/GameObject.js";

export default class Particle extends GameObject {
  static drawQueue = {};
  static partSheets = [];
  
  z = 1000;

  constructor(engine, options = {start:{}}) {
    super(engine, {x: 50, y: 50, radius: 50});

    this.part = generateParticle();
    this.ctx = this.part.img.getContext("2d");
    this.ctx.globalCompositeOperation = "source-atop";

    this.time = 0;
    this.lifeSpan = options.lifeSpan ?? 1;

    this.optimizeColorTransitions = options.optimizeColorTransitions ?? true;

    this.initial = options.start;
    this._setState(this.initial);

    this.stateDelta = {};
    for(var key in options.start) {
      if ( typeof options.start[key] === "number" && typeof options.end?.[key] === "number" ) {
        if ( this.optimizeColorTransitions && ['r', 'g', 'b'].includes(key)) {
          this._normalizeColor(options, key);
        }
        this.stateDelta[key] = options.end[key] - options.start[key];
      }
    }

  }

  update(ctx) {
    this.time += 1/60;
    if ( this.time > this.lifeSpan ) {
      this.engine.unregister(this);
    }
    this._setState(this._generateDeltaState(this.time / this.lifeSpan));
  }

  draw(ctx) {
    Particle._queueForDraw(this);
  }

  get r() {
    return this._r;
  }

  set r(val) {
    this._r = Math.floor(val);
    this._changeColor(this.r, this.g, this.b);
  }
  
  get g() {
    return this._g;
  }

  set g(val) {
    this._g = Math.floor(val);
    this._changeColor(this.r, this.g, this.b);
  }

  get b() {
    return this._b;
  }

  set b(val) {
    this._b = Math.floor(val);
    this._changeColor(this.r, this.g, this.b);
  }

  _changeColor() {
    this.col = "rgb("+this.r+","+this.g+","+this.b+")";
  }

  _setState(state) {
    for ( var key in state ) {
      this[key] = state[key];
    }
  }

  _generateDeltaState(delta) {
    var newDeltaState = {};
    for ( var key in this.stateDelta ) {
      newDeltaState[key] = this.initial[key] + this.stateDelta[key] * delta;
    }
    return newDeltaState;
  }

  _normalizeColor(options, color) {
    if ( options.start ) {
      [options.start, options.end].forEach(state => {
        if ( state?.hasOwnProperty(color) ) {
          state[color] = Math.round(state[color]/16)*16;
        }
      });
    }
  }

  static _queueForDraw(particle) {
    this.drawQueue[particle.col] = this.drawQueue[particle.col] ?? [];
    this.drawQueue[particle.col].push(particle);
  }

  static drawQueuedParticles(ctx) {
    var x = 0, y = 0, sheet = 0;
    var particleSegments = [];
    if ( Particle.partSheets.length === 0 ) {
      var can = generateParticleSheet();
      Particle.partSheets.push({can, ctx: can.getContext("2d")});
    }
    for ( var key in this.drawQueue ) {
      var particleList = this.drawQueue[key];

      if ( sheet >= Particle.partSheets.length ) {
        var can = generateParticleSheet();
        Particle.partSheets.push({can, ctx: can.getContext("2d")});
      }
      var sheetCtx = Particle.partSheets[sheet].ctx;
      sheetCtx.fillStyle = key;
      sheetCtx.fillRect(x, y, 50, 50);

      particleList.forEach(particle => particleSegments.push({particle, sheet, x, y}));
      x += 50;
      if ( x >= 1000 ) {
        x = 0;
        y += 50;
        if ( y >= 1000 ) {
          y = 0;
          sheet++;
        }
      }
    };
    // console.log("Drawing " + Object.keys(this.drawQueue).length + "/" + particleSegments.length + " particles.");
    particleSegments.forEach(seg => {
      var { x: px, y: py, w: pw, h: ph } = seg.particle.rect;
      ctx.globalAlpha = seg.particle.alpha;
      ctx.drawImage(Particle.partSheets[seg.sheet].can, seg.x, seg.y, 50, 50, px, py, pw, ph);
    });
    this.drawQueue = {};
  }
}

function generateParticle(size = 50) {
  if ( generateParticle.particle ) {
    return generateParticle.particle;
  }

  var can = document.createElement("canvas");
  can.width = can.height = size;
  var ctx = can.getContext("2d");
  var iData = ctx.getImageData(0, 0, size, size);
  var data = iData.data;

  var i = 0, center = size / 2;
  for ( var y = 0; y < size; y++ ) {
    for ( var x = 0; x < size; x++ ) {
      var dist = Math.sqrt(Math.pow(x-center, 2) + Math.pow(y-center, 2));
      
      data[i] = data[i + 1] = data[i + 2] = 255;
      data[i + 3] = Math.max((center - dist) / center, 0) * 255;

      i += 4;
    }
  }

  ctx.putImageData(iData, 0, 0);
  return generateParticle.particle = new Image(can);
}

function generateParticleSheet() {
  var part = generateParticle(50);
  var sheet = document.createElement("canvas");
  sheet.width = sheet.height = 1000;
  var ctx = sheet.getContext("2d");
  
  for ( var y = 0; y < 1000; y += 50 ) {
    for ( var x = 0; x < 1000; x += 50 ) {
      part.draw(ctx, x, y);
    }
  }

  ctx.globalCompositeOperation = "source-atop";

  return sheet;
}