Scribble Inspired by a tweet by Matt DesLauriers @mattdesl Try adjusting the parameters: amplitude: frequency: random seed:
viewof amplitude = DOM.range()
viewof freq = DOM.range()
viewof myseed = DOM.range(0, 2000, 100)
canvas = { const w = width + 28, h = height; const context = DOM.context2d(w, h, 1); const image = context.getImageData(0, 0, w, h); const indexes = []; let frame = 0; context.canvas.style.margin = "0 -14px"; const s = new SimplexNoise(myseed) var x = w >> 1, y = h >> 1; var newx = x, newy = y; const resolution = 1000 var points = scribble(resolution) for (var i = 0; i < points.length; i++) { newx = (w/2) + (w/3) * points[i][0] newy = (h/2) + (w/3) * points[i][1] context.beginPath(); context.lineWidth = 1 + Math.abs(4 * s.noise3D(points[i][0], points[i][1], -1)) context.moveTo(x, y); context.lineTo(newx, newy); if (i > 0) { context.stroke(); } x = newx y = newy if (!(++frame % (resolution / 200))) { yield context.canvas; } } yield context.canvas; }
scribble = (resolution = 1000) => { const s = new SimplexNoise(myseed + Math.random()) // const s = new SimplexNoise(myseed) return arcs01(resolution).map(t => { const angle = t * Math.PI * 2; // const freq = 1.0 // const amplitude = 0.75; const x = Math.cos(angle) * freq; const y = Math.sin(angle) * freq; return [ amplitude * s.noise3D(x, y, -1), amplitude * s.noise3D(x, y, 1) ]; }); }
// s = new SimplexNoise(Math.random)
SimplexNoise = require('simplex-noise')
array = n => Array.from(new Array(n))
arcs = n => array(n).map((_, i) => i / n)
arcs01 = n => array(n).map((_, i) => ( n <= 1 ? 0 : i / (n - 1) ))
arcs(5)
arcs01(5)
height = 600