Skip to content

Instantly share code, notes, and snippets.

@mattdesl
Last active July 28, 2018 08:58
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mattdesl/d2a18c2c958077d1315fa417bff431c6 to your computer and use it in GitHub Desktop.
Save mattdesl/d2a18c2c958077d1315fa417bff431c6 to your computer and use it in GitHub Desktop.
const canvasSketch = require('canvas-sketch'); // not yet released tool
const Random = require('./util/random');
const { lerp } = require('./util/math');
// We can force a random seed or a specific string/number
Random.setSeed(Random.getRandomSeed());
const settings = {
pixelsPerInch: 300,
// When exporting, use the seed as the suffix
// This way we can reproduce it more easily later
suffix: Random.getSeed(),
dimensions: [ 7, 11 ],
units: 'in'
};
const sketch = ({ width, height }) => {
const margin = 0;
const sliceCount = 80000;
const slices = Array.from(new Array(sliceCount)).map((_, i, list) => {
const t = list.lenth <= 1 ? 0 : i / (list.length - 1);
const noiseAngle = t * Math.PI * 2;
const nx = Math.cos(noiseAngle);
const ny = Math.sin(noiseAngle);
const nf = 0.05 + Random.range(0, 0.5);
const amplitude = 2;
const noise = Random.noise2D(nx * nf, ny * nf);
const noise01 = noise * 0.5 + 0.5;
const tOffset = Random.gaussian() * 0.01;
const cx = width / 2;
const x = cx + noise * amplitude;
return {
alpha: Random.range(0.5, 1) * (1 - noise01),
color: 'white',
lineWidth: Random.range(0.005, 0.02) * 0.1,
length: Random.gaussian() * noise01 * 0.5,
angle: Random.range(-1, 1) * noise01 * 40 * Math.PI / 180,
x,
y: lerp(margin, height - margin, t + tOffset)
};
});
return ({ context }) => {
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'black';
context.fillRect(0, 0, width, height);
context.globalCompositeOperation = 'lighter';
slices.forEach(slice => {
context.save();
context.beginPath();
context.translate(slice.x, slice.y);
context.rotate(slice.angle);
context.lineTo(slice.length / 2, 0);
context.lineTo(-slice.length / 2, 0);
context.lineWidth = slice.lineWidth;
context.strokeStyle = slice.color;
context.globalAlpha = slice.alpha;
context.stroke();
context.restore();
});
};
};
canvasSketch(sketch, settings);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment