noise.js

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],
  // units: 'cm',
  // pixelsPerInch: 300
};

const characters = ['▅', '▃', '►', '▔', '▂', '	▬', '●']

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

  const createGrid = () => {
    const points = []
    const count = 200

    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)
        const radius = random.noise2D(u, v, 1, 1) * .5 + .5

        points.push({
          fill: random.pick(palette),
          radius: Math.abs(radius) * .02,
          position: [u, v],
          rotation: random.noise2D(u, v),
          character: random.pick(characters)
        })
      }
    }

    return points
  }

  const points = createGrid().filter(() => random.value() > .5)
  const margin = 300

  return ({ context, width, height }) => {
    // Set the canvas to white because otherwise we'll get a 
    // transparent background.
    context.fillStyle = 'white'
    context.fillRect(0, 0, width, height)
  
    points.forEach(data => {
      const {
        radius,
        position,
        fill,
        rotation,
        character
      } = data
      const [u, v] = position

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

      // context.fillStyle = 'white'
      // context.beginPath()
      // context.arc(x, y, radius * width, 0, 2 * Math.PI, false)
      // context.fillStyle = fill
      // context.fill()

      context.save()

      context.fillStyle = fill
      context.font = `${radius * width}px "Segoe UI"`

      context.translate(x, y)
      context.rotate(rotation)
      context.fillText(character, 0, 0)

      context.restore()
    })
  };
};

canvasSketch(sketch, settings);