@thi.ng/geom-fuzz/dots.js

Highly configurable, fuzzy line & polygon creation with presets and composable fill & stroke styles. Canvas & SVG support

import { bounds } from "@thi.ng/geom/bounds";
import { pointInside } from "@thi.ng/geom/point-inside";
import { points } from "@thi.ng/geom/points";
import { unmapPoint } from "@thi.ng/geom/unmap-point";
import { mergeDeepObj } from "@thi.ng/object-utils/merge-deep";
import { range2d } from "@thi.ng/transducers/range2d";
import { div2 } from "@thi.ng/vectors/div";
import { jitter } from "@thi.ng/vectors/jitter";
const defDots = (opts = {}) => {
  opts = mergeDeepObj(
    {
      space: 5,
      jitter: 0.5,
      attribs: {
        shape: "circle",
        stroke: "black",
        fill: "none"
      }
    },
    opts
  );
  return (shape) => {
    const box = bounds(shape);
    const [w, h] = box.size;
    const cols = ~~(w / opts.space);
    const rows = ~~(h / opts.space);
    const maxg = [cols - 1, rows - 1];
    const acc = [];
    for (let p of range2d(cols, rows)) {
      if (p[1] & 1) p[0] += 0.5;
      unmapPoint(box, div2(null, p, maxg), p);
      jitter(p, p, opts.jitter);
      if (pointInside(shape, p)) {
        acc.push(p);
      }
    }
    return points(acc, opts.attribs);
  };
};
export {
  defDots
};