Backdrops

backdrops: [{
  key: 'confetti', name: 'Confetti',
  draw(pen, frame) {
    pen.clearRect(0, 0, frame.w, frame.h);
    for (let n = 0; n < 90 * (frame.amount / 100); n++) {
      const x = ((n * 97.13) % 1) * frame.w + Math.sin(frame.time + n) * 14, fall = 30 + (n % 7) * 12;
      const y = ((n * 53.7 + frame.time * fall) % (frame.h + 20)) - 10;
      pen.fillStyle = `hsl(${(n * 47) % 360} 85% 62% / 0.8)`;
      pen.save();
      pen.translate(x, y);
      pen.rotate(frame.time * 2 + n);
      pen.fillRect(-4, -2, 8, 4);
      pen.restore();
    }
  },
}],

import math
import random

RINGS = [(random.random(), random.random(), random.uniform(0.3, 1)) for _ in range(14)]


@plugin.backdrop('Ripples')
def ripples(pen, frame):
    pen.clearRect(0, 0, frame.w, frame.h)
    pen.strokeStyle = frame.color
    pen.lineWidth = 1.5
    for x, y, pace in RINGS[:max(1, int(len(RINGS) * frame.amount / 100))]:
        age = (frame.time * pace * 0.25 + x) % 1               # each grows from nothing and fades as it goes
        pen.globalAlpha = 0.5 * (1 - age)
        pen.beginPath()
        pen.arc(x * frame.w, y * frame.h, 20 + age * 180, 0, math.tau)
        pen.stroke()
    pen.globalAlpha = 1