Animated Gradient PFP Generator

animated_gradient_pfp.ts

// Animated Gradient PFP Generator by taep96

// Instructions:
// - put the original image in the same directory as this script and name it `original.png`
// - set `canvas_size` to the desired size of the images in pixels
// - set `ring_thickness` to the desired thickness of the ring in pixels
// - run `bun install canvas`
// - run `bun run `animated_gradient_pfp.ts`
// - the images will be saved to `output/pfp-{000-360}.png`
// - you can use ezgif.com, ffmpeg, or gifski to collect the images into a usable format

import { createCanvas, loadImage } from "canvas";

const canvas_size = 2048;
const ring_thickness = 128;

const original_canvas = createCanvas(canvas_size, canvas_size);
const original_canvas_ctx = original_canvas.getContext("2d");

original_canvas_ctx.beginPath();
original_canvas_ctx.arc(
  canvas_size / 2,
  canvas_size / 2,
  canvas_size / 2,
  0,
  2 * Math.PI,
  false
);
original_canvas_ctx.clip();

const original = await loadImage("original.png");
original_canvas_ctx.drawImage(original, 0, 0, canvas_size, canvas_size);

const ring_canvas = createCanvas(canvas_size, canvas_size);
const ring_canvas_ctx = ring_canvas.getContext("2d");

ring_canvas_ctx.beginPath();
ring_canvas_ctx.arc(
  canvas_size / 2,
  canvas_size / 2,
  canvas_size / 2,
  0,
  2 * Math.PI,
  false
);
ring_canvas_ctx.clip();

const gradient = ring_canvas_ctx.createLinearGradient(
  0,
  0,
  canvas_size,
  canvas_size
);

gradient.addColorStop(0, "#cd0067");
gradient.addColorStop(0.5, "#993399");
gradient.addColorStop(1, "#003399");

ring_canvas_ctx.fillStyle = gradient;

for (let d = 1; d <= 360; d++) {
  ring_canvas_ctx.translate(canvas_size / 2, canvas_size / 2);
  ring_canvas_ctx.rotate((d * Math.PI) / 180);
  ring_canvas_ctx.translate(-canvas_size / 2, -canvas_size / 2);
  ring_canvas_ctx.fillRect(0, 0, canvas_size, canvas_size);

  ring_canvas_ctx.resetTransform();
  ring_canvas_ctx.drawImage(
    original_canvas,
    ring_thickness,
    ring_thickness,
    canvas_size - ring_thickness * 2,
    canvas_size - ring_thickness * 2
  );

  const buffer = ring_canvas.toBuffer("image/png");
  Bun.write(`output/pfp-${d.toString().padStart(3, "0")}.png`, buffer as any);
}