In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
createCanvas(W, W, draw, setup, {css: "background: #000"})
function draw(p8g){
const { background, noStroke, stroke, fill, ellipse, noSmooth, text, textSize, push, pop, line} = p8g;
const {sin, cos, tan} = Math;
let count = window.count
// setup code
if( window.setup == true){
window.setup = false // gets reset when cancelAnimationFrame() is called in createCanvas()
window.count = 0
background(0) // set background to black
}
background(0,0,0,alf);
stroke(200,100,0,77);
let a = [];
for (let x = 0; x <= W; x += W) { // 0 and 400 to draw to and bottom
for (let y = -50; y < W + 50; y += 10) {
let X = noise(y + count) * 200 + x - 99;
let Y = tan(sin(y + count * 1.7)) * 99 + y - 50;
a.push([X, Y]);
for (let i = 0; i < a.length; i++) {
let A = a[i][0];
let B = a[i][1];
if (dist(X, Y, A, B) < (W-threads)) rotated?line(Y , X, B, A ) : line(X, Y, A, B )
}
}
}
window.count += .01 // is there a better way to do these globals in observable?
}
window.count
W = 400 // width
H = 400 // ~~(w/1.7777777777777777)/2
window.count = 0 // like frameCount
window.setup = true
import {map, noise, random, PI, TAU } from "@hellonearthis/noise-like-p5js"
import {dist} from "@makio135/utilities"
map(5,0,10,0,1000)
noise(1,30)
random(20)
TAU
PI
// setup and draw are both passed a `p8g` object.
// This means you can use destructuring assignment
// in the parameters to avoid having to write
// `p8g.fill`, `p8g.rect`, etc.
//
// Note that unlike P5, `fill`, `stroke` and other
// settings are not kept between draw calls,
// so initializing those once in setup won't work!
// The reason for this is that p8g does not have
// its own `setup` function, just the `draw` loop.
function setup(p8g) {
// initiate background as bright blue
p8g.background(0x82, 0xb4, 0xed);
}
// 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.
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, opts = {}) {
const {
css
} = opts
// cancel previous loop
if (request) cancelAnimationFrame(request);
if(typeof _setup !== "function") throw new Error("setup is not a function!");
if(typeof _draw !== "function") throw new Error("draw is not a function!")
_setup = setup;
_draw = draw;
if (!canvas) {
canvas = await html`${p8g.createCanvas(width, height)}`;
}
if (typeof css === "string") canvas.style = css;
state = setup(p8g);
// Draw Loop
request = requestAnimationFrame(function tick() {
draw(p8g, state);
request = requestAnimationFrame(tick);
});
invalidation.then(() => cancelAnimationFrame(request));
return canvas;
}
}
// createCanvas = {
// const p8g = await import('https://cdn.skypack.dev/p8g.js@0.8.1?min');
// let canvas = null;
// let _draw = () => {};
// let request = null;
// let state = null;
// return async function createCanvas(width, height, draw = _draw) {
// // cancel previous loop
// if (request) {
// window.setup = true
// cancelAnimationFrame(request);
// }
// _draw = draw;
// // resizing of the canvas requires a reload
// if (!canvas) {
// canvas = await html`${p8g.createCanvas(width, height)}`;
// canvas.id="p8gCanvas"
// }
// // Draw Loop
// // framerate() would be controlled here
// 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.
