In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
May 25, 2022
W = 200
draw_svg = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, W, W])
.style('background', '#000')
.attr('width',W)
.attr('height',W);
const out = svg.append('g')
.attr('stroke-width', 1)
.attr('fill', 'none')
.node()
const sx = 1;
const sy = 10;
const numX = Math.ceil(W / sx);
const numY = Math.ceil(2 * W / sy);
const pool = Array.from({length: numX * numY}, (_, i) => out.appendChild(htl.svg`<line ${{
x1: i % numX,
x2: i % numX,
y1: W
}}>`));
let c = 1, f = 0
while(true) {
for(let y = 0; y < numY; y++) { // loops 8k times
for(let x = 0; x < numX; x++) { // that's a lot of lines
const px = x * sx;
const py = y * sy;
const line = pool[x + y * numX];
let n = noise(simplex.noise2D(px / 500, (py + f) / W)) // simplex noise -1, 1 vs perlin 0, 1
line.setAttribute('y2', py + W * 2 * n - W);
line.setAttribute('stroke', (c>0) ? `${mc(py-mapColour(n)/2)}` : '#000');
}
c=-c
}
f++ // update noise for next loop
yield svg.node();
//await Promises.tick(1000/5);
}
}
noise = d3.scaleLinear() // scale simplex noise (-1, 1) to p5 perlin noise (0,1)
.domain([-1,1])
.range([0,1])
y2_range = FileAttachment("draw_svg.json").json() // well outside the svg Size
d3.extent(y2_range)
mapColour = d3.scaleLinear()
.domain([0, 0.75])
.range([0, W])
mc = d3.scaleLinear()
.domain([0,W])
.range([`#000`,'#fff'])
simplex = new SimplexNoise(98)
SimplexNoise = require('simplex-noise@2.4')
import {p5 as p5js} from "@tmcw/p5"
p5js(p5 => {
let f=0,c=1
let W=400
p5.setup=()=>{
p5.createCanvas(W,W)
p5.background(0)
p5.noiseSeed(98)
}
p5.draw=e=>{
if(doIT==false) p5.noLoop()
for(let y=0;y<2*W;y+=10){
for(let x=0;x<W;x++){
let n=p5.noise(x/500,(y+f)/W)
p5.stroke(c>0?y-p5.map(n,0,.75,0,W)/2:0)
p5.line(x,W,x,y+(W*2)*n-W)
}
c=-c
}
f+=1
};
})
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.
