In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
// Changing canvas size means you have to reload page
createCanvas(w, w)
w = 512
// The helper functions further below let you define a
// draw function as a regular cell, just like you would
// with Processing or P5js. It is called once per frame.
function draw(){
const {
background,
stroke,
point,
} = p8g;
const {sin, PI} = Math;
background(0);
for(let y=1;y<=(w-1);y++) {
for(let x=1;x<=(w-1);x++){
stroke(255*noise(y,0),alpha); // added alpha
point(99*noise((x-y)/99+window.r,window.r)*sin((x+y)/99)+y,x);
}
}
window.r-=PI/99;
}
window.r = 0
import {noise} from "@hellonearthis/noise-like-p5js"
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.
