Last active
June 15, 2018 12:09
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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