The avatar for @hellonearthis
Brett Cooper
In New Zealand being kid of human. We might make mistakes but we will make other things too. - Michael Joseph Savage
Published
Edited
Sep 16, 2020
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
p5 = new P5();
Insert cell
Insert cell
height = 600
Insert cell
Insert cell
my_canvas = {
let cv = p5.createCanvas(width, height);
p5.background(0,0,0x4F);
p5.textSize(100);
p5.stroke(0)
p5.fill(p5.random(255),p5.random(255),p5.random(255))

// const el = html`${cv.elt}`; // add canvas to html element

return cv
}
Insert cell
el = html`${my_canvas.elt}`;
Insert cell
draw_loop = {
p5.background(0,0,0x4F,20);
p5.copy(0,14,width,height,0,0,width,height)
//invalidation.then(() => p5.clear()); // is clear the right thing to call here?
p5.text(` ITS ToO FAST! ${c}`, p5.random(20), height-15); // only updating because of 'c'

// yield m;
}
Insert cell
Insert cell
Insert cell
c = window.requestAnimationFrame(loopy);
Insert cell
Insert cell
loopy = {
return function loopy(){
now
window.requestAnimationFrame(loopy);
}
}
Insert cell
P5 = require("https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js").catch(
() => window.P5
)
Insert cell
Insert cell

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.
Learn more