Bursts of color

There are very few courses or tutorials for generative art on the web. This is why I was so happy to come across Matt DesLauriers’s course on Frontend Masters. This piece was made as a project for that course.

We used a JS framework called Canvas-Sketch. It is an open source project initiated by Matt. I like the specific generative art features this framework has. It basically adds new features to the existing Canvas API in order to make life simple for generative artists. That being said, I am not very comfortable with Javascript (especially ES6 stuff). I find Python and Processing Java easier. I think I will stick with Processing 🙂

However, the course is really good because it introduced me to some good conceptual bits and the artist’s process.

Here is the code I wrote to generate this piece:

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

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

const sketch = () => {
  const palette = random.pick(palettes);

  const createGrid = () => {
    const points = [];
    const count = 40;
    for (let x = 0; x < count; x++) {
      for (let y = 0; y < count; y++) {
        const u = count <= 1 ? 0.5: x / (count - 1);
        const v = count <= 1 ? 0.5: y / (count - 1);
        points.push({
          color: random.pick(palette),
          radius: Math.abs(0.01 + random.gaussian() * 0.005),
          position: [ u, v ]
        });
      }
    }
    return points;
  };

  random.setSeed(001);
  const points = createGrid().filter(() => random.value() > 0.5);
  const margin = 100;

  return ({ context, width, height }) => {
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);

    points.forEach(data => {
      const {
        position,
        radius,
        color
      } = data;

      const [ u, v ] = position;

      const x = lerp(margin, width - margin, u);
      const y = lerp(margin, height - margin, v);

      context.beginPath();
      context.arc(x, y, radius * width, 0, Math.PI * 2, false);
      context.fillStyle = color
      context.lineWidth = 30;
      context.fill();
    });
  };
};

canvasSketch(sketch, settings);