Код для генерации сторис НФТ аватарка

story.js

const canvasWidth = 1080;
const canvasHeight = 1920;
const center = [canvasWidth, canvasHeight].map(divideBy2);

// Полотно для создания размытого фона
const blurredSize = 1 / 8;
const blurredWidth = canvasWidth * blurredSize;
const blurredHeight = canvasHeight * blurredSize;

// Настройка бейджа с нфт аватаркой
const mountSize = 814;
const borderWidth = 24;
const tokenSize = mountSize - borderWidth * 4;

let tokenImage, tokenImageBg, overlay, mount, caption, clip;

const captionTop = canvasHeight / 5;

let now;
let blurred;

function preload() {
  tokenImageBg = loadImage("./image.jpeg");
  tokenImage = loadImage("./image.jpeg");
  overlay = loadImage("./bg_overlay.svg");
  mount = loadImage("./mount.svg");
  caption = loadImage("./story_caption.svg");
  clip = loadImage("./clip.png");
}

function setup() {
  pixelDensity(1);
  createCanvas(canvasWidth, canvasHeight);
  noLoop();

  blurred = createGraphics(blurredWidth, blurredHeight);

  imageMode(CENTER);
  blurred.imageMode(CENTER);
}

function draw() {
  now = millis();
  imageMode(CENTER);
  // blurred background
  renderBackground();

  // overlay with heptagons
  renderOverlay();

  // caption (story_caption.svg)
  renderCaption();

  // mount
  renderMount();

  // masked image
  renderToken();
}

function renderBackground() {
  if (tokenImageBg.width < tokenImageBg.height) {
    // vertical image
    tokenImageBg.resize(blurredWidth, 0);
  } else {
    // horizontal and square
    tokenImageBg.resize(0, blurredHeight);
  }
  blurred.image(
    tokenImageBg,
    divideBy2(blurredWidth),
    divideBy2(blurredHeight)
  );
  blurred.filter(BLUR, 20);

  image(blurred, ...center, width, height);
}

function renderOverlay() {
  blendMode(OVERLAY);
  image(overlay, ...center);
  blendMode(BLEND);
}

function renderCaption() {
  image(caption, center[0], captionTop);
}

function renderMount() {
  image(mount, ...center);
}

function renderToken() {
  tokenImage.resize(tokenSize, 0);
  tokenImage.mask(clip);
  image(tokenImage, ...center);
}

function divideBy2(v) {
  return v / 2;
}