Published
Edited
Mar 17, 2019
function build (p5, s) {
s.paths = [];
let xdetail = 640; //default 640
let ydetail = 640; //default 640
let xlo = 1 * p5.width / 4;
let xhi = 3 * p5.width / 4;
let ylo = 1 * p5.height / 4;
let yhi = 3 * p5.height / 4;
let xset = linspace (xdetail, xlo, xhi);
let yset = linspace (ydetail, ylo, yhi);
//building paths
for (let xiter = 0; xiter < xset.length; xiter++) {
let path = [];
for (let yiter = 0; yiter < yset.length; yiter++) {
let xin = xset[xiter];
let yin = yset[yiter];
path.push ( { x: xin, y: yin } );
}
s.paths.push (path);
}
//hold original coordinates for each vector in each of s.paths path
for (let eout of s.paths) {
for (let ein of eout) {
ein.ox = ein.x;
ein.oy = ein.y;
}
}
}
function loop (p5, s) {
//drawing
let xnoff = 0.0015; // diff between lines
let ynoff = 0.020; // diff between points
let nscale = 70;
for (let eout of s.paths) {
for (let ein of eout) {
ein.x = ein.ox;
ein.y = ein.oy;
ein.x += p5.noise (0 + (ein.ox * xnoff),
0 + (ein.oy * ynoff)) * nscale;
ein.y += p5.noise (0 + (ein.ox * xnoff),
0 + (ein.oy * ynoff)) * nscale;
}
//drawPath (eout, false, p5.line);
for (let iter = 0; iter < eout.length - 1; iter++) {
let curr = eout[iter];
let next = eout[(iter + 1) % eout.length];
p5.line (curr.x, curr.y, next.x, next.y);
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
