In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
// p8g can currently only initialize a WebGL2 canvas once.
// That means it can easily conflict with Observable's reactivity.
// To avoid that, use `createCanvas` to create a p8g canvas ONCE
// and don't use any reactivity in this cell
createCanvas(W, W)
function draw(){
const {
colorMode,
HSB,
// blendMode,
BLEND,
ADD,
background,
noStroke,
fill,
rect
} = p8g;
const {sin, cos, PI, pow, abs} = Math;
const TAU = PI * 2
let S= 0
t[0]+=.01
colorMode(HSB)
// blendMode(BLEND)
background(0)
noStroke()
// blendMode(ADD)
for(let y=0;y<W;y+=20){
for(let x=0;x<W;x+=20) {
fill((x/9+y/4+t[0]*99)%360,75,99,.4)
rect(x+(S=p5ed(simplex.noise3D(x/99,y/99+t[0],p5ed(simplex.noise2D(t[0]/2,0))))**2*99)+sin(y+t[0])*9,y+S,25-S,25-S)
// rect(x+(S=p5ed(simplex.noise3D(x/99,y/99+t,p5ed(simplex.noise2D(t/2,0))))**2*99)+sin(y+t)*9,y+S,25-S*2,25-S*2,30/S,3)
// console.log(S)
}
}
}
simplex.noise3D(20/99,20/99+t,p5ed(simplex.noise2D(t/2,0)))
S = 600 // not 1000 due to p8g issue
W = 720
t=[0]
p5ed = d3.scaleLinear()
.domain([-1, 1])
.range([0, 1])
simplex = new simplexNoise(42)
simplexNoise = require('simplex-noise@2.4.0')
async function createCanvas(width, height) {
return html`${p8g.createCanvas(width, height)}`;
}
// The normal p8g approach would be to assign a draw function to
// the p8g object, but because it's imported through skypack
// at runtime the p8g module is read-only. So instead we use
// this workaround. As a bonus, we can write the draw() function
// as a named cell.
p8g_readonly_workaround = {
await p8g;
// Draw Loop
let request = requestAnimationFrame(function tick() {
draw();
request = requestAnimationFrame(tick);
});
invalidation.then(() => cancelAnimationFrame(request));
}
p8g = await import('https://cdn.skypack.dev/p8g.js@0.8.1?min');
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.
