In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Public
Edited
May 9, 2023
p8gc = {
return createCanvas(W, H, draw, setup, {css})
}
function draw(p8g){
const { background, rect, fill, noSmooth, noStroke, stroke, rectMode, CENTER, point} = p8g;
const {sin, cos, atan2, abs, random} = Math;
// setup code
if( window.setup == true){
window.setup = false // gets reset when cancelAnimationFrame() is called in createCanvas()
window.frameCount = 0
// these gets reset by p8g, which I think is a bug
// stroke(210)
background(0) // not reset
}
// noStroke()
noSmooth()
// rectMode(CENTER) //CORNER, CORNERS, CENTER, or RADIUS
background(0,0,0,200)
let f = window.frameCount
for(let x=1;x<W;x+=blockSize) {
for(let y=1;y<W;y+=blockSize){
let i=atan2(y-V,x-V)
let r=dist(x,y,V,V)
// fill((abs(cos(i)-cos(f/30))<1?abs(r-f*3)%200:255)*noise(x/30,y/30)) // was getting od artifact so change code to use DPI and pixels
// rect(x,y,blockSize,blockSize)
stroke((abs(cos(i)-cos(f/30))<1?abs(r-f*3)%200:255)*noise(x/30,y/30))
point(x,y)
}
}
window.frameCount ++ // is there a better way to do these globals?
}
pixelscale = 3
blockSize = 1
W = 200
V = W/2
H = W // ~~(w/1.7777777777777777)/2
window.frameCount = 0
window.setup = true
css = `
background: #000;
image-rendering: pixelated;
width: ${W * pixelscale}px;
height: ${H * pixelscale}px;
`
// 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);
}
import {noise, PI, TAU, bool} from "@hellonearthis/noise-like-p5js"
import {dist} from "@makio135/utilities"
// 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.3?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;
}
}
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.
