nazt · January 19, 2023 17:49 · Oct 2, 2019
diff --git a/rings.js b/rings.js
@@ -0,0 +1,50 @@
+const canvasSketch = require('canvas-sketch');
+const { renderPaths, createPath, pathsToPolylines } = require('canvas-sketch-util/penplot');
+const { clipPolylinesToBox } = require('canvas-sketch-util/geometry');
+const Random = require('canvas-sketch-util/random');
+
+const settings = {
+  dimensions: [ 12, 12 ],
+  orientation: 'landscape',
+  pixelsPerInch: 300,
+  scaleToView: true,
+  units: 'cm'
+};
+
+const sketch = ({ width, height, units }) => {
+  // Holds all our 'path' objects
+  // which could be from createPath, or SVGPath string, or polylines
+  const paths = [];
+
+  // Draw random arcs
+  const count = 2000;
+  for (let i = 0; i < count; i++) {
+    // skip some randomly
+    if (Random.gaussian() > 0) continue;
+
+    // setup arc properties randomly
+    const angle = Random.gaussian(0, Math.PI / 2);
+    const arcLength = Math.abs(Random.gaussian(0, Math.PI / 2));
+    const r = ((i + 1) / count) * Math.min(width, height) / 1;
+
+    // draw the arc
+    const p = createPath();
+    p.arc(width / 2, height / 2, r, angle, angle + arcLength);
+    paths.push(p);
+  }
+
+  // Convert the paths into polylines so we can apply line-clipping
+  // When converting, pass the 'units' to get a nice default curve resolution
+  let lines = pathsToPolylines(paths, { units });
+
+  // Clip to bounds
+  const margin = 1.5;
+  const box = [ margin, margin, width - margin, height - margin ];
+  lines = clipPolylinesToBox(lines, box);
+
+  // The 'penplot' util includes a utility to render
+  // and export both PNG and SVG files
+  return props => renderPaths(lines, props);
+};
+
+canvasSketch(sketch, settings);