[Proposal] Shiny Mixin for PokemonSprite

[NoelDavies]

Shiny Mixin for PokemonSprite

• Proposed
• Prototype: CodePen Example
• Implementation:

Summary`

Potential reusable Shiny particle animation (canvas)

Motivation

To better convey and more obviously communicate the instance of a shiny pokemon

Detailed design

function shine(){
  if (!particles.length){
    for (var i = 0; i < 5; i++) setTimeout(addSparkles, i * 100);
    drawer = setInterval(drawSparkles, 50);
    setTimeout(stopDrawing, 1000);
  }
}

function addSparkles(){
	for (var i = 0; i < 8; i++) particles.push({ "scale": 1, "radius": 60, "angle": 45 * i });
}

function drawSparkles(){
	ctx.clearRect(0, 0, 256, 256);
	for (p of particles){
      var x = 128 + p.radius * Math.cos(p.angle * Math.PI / 180);
      var y = 128 + p.radius * Math.sin(p.angle * Math.PI / 180);
      var scaled = Math.max(32 * p.scale, 0);
      ctx.drawImage(sparkle, x - scaled / 2, y - scaled / 2, scaled, scaled);
      if (p.scale > 0.6) p.scale -= 0.2;
      else p.scale -= 0.05;
      p.angle -= 5;
      p.radius += 5;
    }
}

Drawbacks (optional)

More potential workload on streamer/user's GPU whilst potentially streaming (would need to include the option to disable GPU rendering / fancy gpu-intensive stuff like this)