Skip to content

Instantly share code, notes, and snippets.

@mattdesl
Last active June 15, 2018 12:09
Show Gist options
  • Select an option

  • Save mattdesl/c6544f69b689112c3eccac8e143c8838 to your computer and use it in GitHub Desktop.

Select an option

Save mattdesl/c6544f69b689112c3eccac8e143c8838 to your computer and use it in GitHub Desktop.
Lots of arcs, a quick generative art print test https://twitter.com/mattdesl/status/1007379873361514496
const sketcher = require('canvas-sketch-tool');
const settings = {
// Pixel [width,height] of our artwork
dimensions: [ 1280, 1280 ],
// Export at a higher resolution than what we see
// in the browser
exportPixelRatio: 2
};
const sketch = () => {
// Utility function, random number between [min..max] range
const random = (min, max) => Math.random() * (max - min) + min;
// Generate a whole bunch of circles/arcs
const count = 8000;
const circles = Array.from(new Array(count)).map(() => {
const arcStart = Math.PI * 2 - random(0, Math.PI * 2 / 3);
const arcLength = random(-0.1, 0.3) * Math.PI * 2;
const segmentCount = Math.floor(random(5, 200));
const spread = 0.085;
return {
segments: Array.from(new Array(segmentCount)).map(() => random(0, 1)),
arcStart,
arcEnd: arcStart + arcLength,
arcLength,
thickness: random(0.01, 1),
alpha: random(0.25, 0.33),
radius: random(0.1, 0.75),
x: 0.5 + random(-1, 1) * spread,
y: 0.5 + random(-1, 1) * spread
};
});
return ({ context, width, height }) => {
// Fill browser with solid color
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'black';
context.globalAlpha = 1;
context.fillRect(0, 0, width, height);
const side = Math.min(width, height);
// Now draw each arc
context.strokeStyle = 'white';
context.fillStyle = 'white';
circles.forEach(circle => {
context.beginPath();
context.globalCompositeOperation = 'lighter';
// Instead of just drawing an arc, we will draw little dots along
// the arc, somewhat randomly jittered around
circle.segments.forEach(t => {
const angle = circle.arcStart + circle.arcLength * t;
const radius = circle.radius * side + random(-1, 1) * 0.5;
const x = circle.x * width + Math.cos(angle) * radius;
const y = circle.y * height + Math.sin(angle) * radius;
context.beginPath();
context.arc(x, y, circle.thickness * random(0.5, 1.25), 0, Math.PI * 2, false);
context.fill();
context.globalAlpha = circle.alpha;
});
});
};
};
// Setup the sketch
sketcher(sketch, settings);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment