In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Public
Edited
Oct 18, 2022
1 star
viewof TT = Inputs.range([0.001, 0.2], {label: "Line Size", step: 0.001, value:0.005})
{
return createCanvas(W, H, draw, setup)
}
W = width
H = ~~(W/3)
function setup({width, height}) {
let frameCount = 0; // Set up a closure as our frame counter
const counter = () => frameCount++;
let t = 0
const incT = () => t+=TT;
let x,y = 0
return {incT, x, y}; // return object with initialized state.
}
// The state initialized in setup is passed as the second argument to draw.
function draw(p8g, {incT, x, y}){
const { background, stroke, colorMode, HSB, line, translate, fill, pop, push, rotate} = p8g;
const {sin, cos} = Math;
// let f=64
let t= incT();
background(0)
stroke(-1,99);
for(y=0;y<W;y+=9){
for(x=0;x<W;x+=9){
push();
translate(x,y);
let dx = sin(PI/2*noise(x+t))*f;
let dy = cos(PI/2*noise(y+t))*f;
line(-dx,-dy,dx,dy);
pop();}
}
}
PI = Math.PI
TAU = PI*2
import {noise} from "@hellonearthis/noise-like-p5js"
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;
let state = 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)}`;
}
state = setup(p8g);
// Draw Loop
request = requestAnimationFrame(function tick() {
draw(p8g, state);
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.
