Similar p5 API for creative drawing

ddd.js

const cssColor = (...color) =>
  `rgb${color.length === 4 ? "a" : ""}(${(color.length === 1
    ? Array(3).fill(color[0])
    : color
  ).join(",")})`;

const createP5Api = (ctx, frameCount) => ({
  context: ctx,
  width: ctx.canvas.width,
  height: ctx.canvas.height,
  frameCount,
  push: () => ctx.save(),
  pop: () => ctx.restore(),
  translate: (x, y) => ctx.translate(x, y),
  beginShape: () => ctx.beginPath(),
  endShape: () => {
    ctx.closePath();
    ctx.stroke();
  },
  vertex: (x, y) => ctx.lineTo(x, y),
  rotate: (rad) => ctx.rotate(rad),
  line: (x1, y1, x2, y2) => {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.closePath();
    ctx.stroke();
  },
  stroke: (...color) => {
    ctx.strokeStyle = cssColor(...color);
  },
  background: (...color) => {
    ctx.fillStyle = cssColor(...color);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  },
});

const get = (type, { id, ...options }) =>
  document.getElementById(id) ||
  Object.assign(document.createElement(type), { id, ...options });

const getSize = (element) => {
  const { width, height } = element.getBoundingClientRect();
  return { width, height: Math.min(window.innerHeight, height) };
};

const setup = (draw, target = document.querySelector("body")) => {
  const ctx = get("canvas", {
    id: "ddd-canvas-main",
    style:
      "position: absolute; top: 0; left: 0; z-index: 99; pointer-events: none",
  }).getContext("2d");

  new ResizeObserver(() =>
    Object.assign(ctx.canvas, { ...getSize(target) })
  ).observe(target);
  target.appendChild(ctx.canvas);

  requestAnimationFrame(function render(i = 0) {
    draw(createP5Api(ctx, i));
    requestAnimationFrame(() => render(i + 1));
  });
};

globalThis.ddd = { setup };

test.js

globalThis.isChrome = typeof globalThis.browser === undefined;
globalThis.browser = globalThis.browser || globalThis.chrome;

const createDrawer = () => {
  let y = 0;
  const { PI, cos, sin } = Math;
  return ({
    width,
    height,
    background,
    stroke,
    line,
    frameCount,
    push,
    pop,
    translate,
    beginShape,
    endShape,
    rotate,
    vertex,
  }) => {
    const star = (x, y, radius1, radius2, npoints) => {
      let angle = (PI * 2) / npoints;
      let halfAngle = angle / 2.0;
      beginShape();
      for (let a = 0; a < PI * 2; a += angle) {
        let sx = x + cos(a) * radius2;
        let sy = y + sin(a) * radius2;
        vertex(sx, sy);
        sx = x + cos(a + halfAngle) * radius1;
        sy = y + sin(a + halfAngle) * radius1;
        vertex(sx, sy);
      }
      endShape();
    };

    background(0, 0, 0, 0);
    stroke(0);
    y = y - 1;
    if (y < 0) {
      y = height;
    }
    line(0, y, width, y);

    push();
    translate(width * 0.2, height * 0.5);
    rotate(frameCount / 200.0);
    star(0, 0, 5, 70, 3);
    pop();

    push();
    translate(width * 0.5, height * 0.5);
    rotate(frameCount / 50.0);
    star(0, 0, 80, 100, 40);
    pop();

    push();
    translate(width * 0.8, height * 0.5);
    rotate(frameCount / -100.0);
    star(0, 0, 30, 70, 5);
    pop();
  };
};

globalThis.ddd.setup(
  createDrawer(),
  document.body.appendChild(
    Object.assign(document.createElement("ddd-container"), {
      style:
        "position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; pointer-events: none",
    })
  )
);