dots.js

// Static artwork

const randomRange = (min, max) => Math.random() * (max - min) + min;

export default ({ width, height, data }) => {
  const baseHue = Math.random() * 360;

  const newColor = () => {
    const hue = baseHue + randomRange(-1, 1) * 5;
    const sat = 50 + randomRange(-1, 1) * 10;
    const light = 50 + randomRange(-1, 1) * 10;
    return `hsl(${hue}, ${sat}%, ${light}%)`;
  };

  const dots = [];

  // Draw N dots
  const count = data.count ?? 50;
  const margin = (data.margin ?? 0.1) * Math.min(width, height);
  for (let i = 0; i < count; i++) {
    dots.push({
      radius: width * 0.05,
      position: [
        randomRange(margin, width - margin),
        randomRange(margin, height - margin),
      ],
      color: newColor(),
    });
  }

  return ({ context, data }) => {
    const steps = data.steps ?? 5;
    const angle = data.angle ?? 0;
    console.log(angle);

    dots.forEach((dot) => {
      const [x, y] = dot.position;
      context.beginPath();
      for (let i = 0; i < steps; i++) {
        const theta = angle + (i / steps) * Math.PI * 2;
        context.lineTo(
          x + Math.cos(theta) * dot.radius,
          y + Math.sin(theta) * dot.radius
        );
      }
      context.closePath();
      context.fillStyle = dot.color;
      context.fill();
    });
  };
};

grid.js

export default () => {
  return ({ context, width, height, data }) => {
    const margin = (data.margin ?? 0) * Math.min(width, height);
    const {
      gridSizeX = 4,
      gridSizeY = 4,
      lineWidth = 1,
      lineJoin = "round",
      lineCap = "butt",
      alpha = 1,
      color = "#000",
    } = data;

    const chunkSizeX = (width - margin * 2) / gridSizeX;
    const chunkSizeY = (height - margin * 2) / gridSizeY;

    context.beginPath();
    for (let y = 1; y < gridSizeY; y++) {
      const px = margin;
      const py = margin + y * chunkSizeY;
      context.moveTo(px, py);
      context.lineTo(px + width - margin * 2, py);
    }
    for (let x = 1; x < gridSizeX; x++) {
      const px = margin + x * chunkSizeX;
      const py = margin;
      context.moveTo(px, py);
      context.lineTo(px, py + height - margin * 2);
    }
    context.strokeStyle = color;
    context.lineWidth = lineWidth;
    context.globalAlpha = alpha;
    context.lineJoin = lineJoin;
    context.lineCap = lineCap;
    context.moveTo(margin, margin);
    context.lineTo(width - margin, margin);
    context.lineTo(width - margin, height - margin);
    context.lineTo(margin, height - margin);
    context.closePath();
    context.stroke();
  };
};