In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Public
Edited
Oct 13, 2022
createCanvas(W, W, draw, setup)
function setup(p8g) {
p8g.background(0)
}
draw = {
// Implement frameCount as a closure
let frameCount = 0;
return function draw({background, stroke, translate, line}){
frameCount++;
const {sin, cos, PI } = Math;
const TAU = PI * 2
const t = frameCount * .005;
let F = 0.5
let X,Y,R = 0
background(128,255,0,9)
translate(360,360)
for(let r=0;r<TAU+(X=Y=0)+!(F=++F%6);r+=PI/18) {
for(let d=0;d<350;d+=3) {
stroke(255*sin(d/(9*sin(d/99-t))-t*99))
line(X,Y,X+=cos(R=r+(p5ed(simplex.noise2D(d/200-t,1))-.5)*9*(F-3))*3,Y+=sin(R)*3)
}
}
}
}
W = 720
p5ed = d3.scaleLinear()
.domain([-1, 1])
.range([0, 1])
simplex = new simplexNoise(42)
simplexNoise = require('simplex-noise@2.4.0')
createCanvas = {
const p8g = await import('https://cdn.skypack.dev/p8g.js@0.8.1?min');
let canvas = null;
let _draw = () => {};
let _setup = () => {};
let request = null;
return async function createCanvas(width, height, draw = _draw, setup = _setup) {
// cancel previous loop
if (request) cancelAnimationFrame(request);
_setup = setup;
_draw = draw;
if (!canvas) {
canvas = await html`${p8g.createCanvas(width, height)}`;
}
setup(p8g);
// Draw Loop
request = requestAnimationFrame(function tick() {
draw(p8g);
request = requestAnimationFrame(tick);
});
invalidation.then(() => cancelAnimationFrame(request));
return canvas;
}
}
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.
