In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
{
return createCanvas(Width, Width, draw, setup)
}
points = {
reset
window.setup = 0 // reset background colour
let po = []
for (let y = 0; y <= Height + grid; y += grid) {
for (let x = 0; x <= Width; x += grid) {
let p = createVector(x, y);
po.push(p);
}
}
return po
}
Width = 800
Height = Width
grid = Width/100
window.setup = 0
function setup({width, height}) {
// background(0); // these dont work with this coding pattern
// noStroke();
let frameCount = 0; // Set up a closure as our frame counter
const frame = () => frameCount++;
return {frame}; // return object with initialized state.
}
function draw(p8g, {frame}){
const { background, noStroke, stroke, fill, ellipse, noSmooth} = p8g;
const {sin, cos, random} = Math;
let frameCount = frame()
if(clearBG%2) background(0)
if(window.setup == 0) {
background(0)
window.setup++
}
fill(flip%2?0:255)
noSmooth() // without noSmooth noStroke still has a stroke
noStroke()
for (let i = 0; i < points.length; i++) {
let size = map( noise(points[i].x * 0.001, points[i].y * 0.001, frameCount*0.001), 0, 1, -grid, grid );
// points[i].add(createVector(sin(size), cos(size))) // p8g doesn't have vector
points[i].x += sin(size)
points[i].y += cos(size)
if (points[i].x > Width) points[i].x = random(Width)*Width;
if (points[i].x < 0) points[i].x = random(Width)*Width;
if (points[i].y < 0) points[i].y = random(Height)*Height;
if (points[i].y > Height) points[i].y = random(Height)*Height;
ellipse(points[i].x, points[i].y, size, size);
}
}
function createVector(x,y){
return {x,y}
}
PI = Math.PI
TAU = PI*2
function map (value, start1, stop1, start2, stop2) {
return d3.scaleLinear()
.domain([start1, stop1])
.range([start2, stop2])(value)
}
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;
// check the canvas size required vs the current canvas
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.
