generative-art.js

const canvasSketch = require('canvas-sketch');
const colors = require('nice-color-palettes');
const random = require('canvas-sketch-util/random');
const { lerp } = require('canvas-sketch-util/math');

const settings = {
  dimensions: [2048, 2048],
};

const palette = random.pick(colors);

const sketch = ({ width, height }) => {
  const a = 5;
  const b = 20;

  function createSpiral(spiralDepth = 2000, startPoint = 100) {
    const points = [];

    for (let i = startPoint; i <= spiralDepth; i++) {
      const angle = 0.05 * i;
      const x = center.x + (a + b * angle) * Math.cos(angle);
      const y = center.y + (a + b * angle) * Math.sin(angle);
      const color = random.pick(palette);
      const frequency = 1;
      const u = lerp(0, 1, x);
      const v = lerp(0, 1, y);
      const size = Math.abs(random.noise2D(u * frequency, v * frequency)) * 50;

      points.push({
        coords: [x, y],
        color,
        size,
      });
    }
    return points;
  }

  const center = {
    x: width / 2,
    y: height / 2,
  };

  const size = b * a * 2;
  const points = createSpiral(1200, 0);

  return ({ context, width, height }) => {
    points.forEach(({ coords: [x, y], color, size }) => {
      context.beginPath();
      context.fillStyle = color;
      context.arc(x - size * 0.5, y - size * 0.5, size, 0, Math.PI * 2);
      context.fill();
    });
  };
};

canvasSketch(sketch, settings);