Tinkering with code and algorithms for fun
Published
Edited
Apr 19, 2022
1 fork
12 stars
createSketch(p5 => {
const c = p5.color("#DC3F74");
let resizes = 0, playbacks = 0;
p5.setup = () => {
p5.createCanvas(...canvasSize());
p5.textFont("sans-serif");
p5.textStyle(p5.BOLD);
p5.fill(c);
p5.textSize(30);
};
p5.draw = () => {
// avoids re-evaluating the cell
p5.background(viewof background[1].valueAsNumber);
const str = `p5.js
${isFullscreen() ? "" : "not "}fullscreen
${resizes} resizes
${isFullscreen() ? `click to play (${playbacks})` : ""}`;
p5.translate(p5.millis() / 10 % p5.width, p5.height / 2 - 50);
p5.text(str, 0, 0);
p5.translate(-p5.width, 0);
p5.text(str, 0, 0);
};
const inBounds = (x, y) => x >= 0 && x < p5.width && y >= 0 && y < p5.height;
p5.mouseClicked = () => {
// Note: sketch.mouseClicked captures mouse clicks in the *entire* webpage
// so use this if you only want to capture clicks on the canvas
if (inBounds(p5.mouseX, p5.mouseY)) {
if (isFullscreen()){
// doorbell is created with Howler, see below
playbacks++
doorbell.play();
} else {
// go fullscreen if canvas is clicked
fullscreen.click();
}
}
};
p5.windowResized = () => {
resizes++;
p5.resizeCanvas(...canvasSize());
};
})
function canvasSize() {
return [
document.body.clientWidth,
document.body.clientWidth * screen.height / screen.width
];
}
isFullscreen = () => document.fullscreenElement === fullscreen.parentElement.nextElementSibling
createSketch = {
const p5 = await require('p5@1.4.1/lib/p5.min.js');
return function*(sketch) {
const element = document.createElement("div");
yield element;
const instance = new p5(sketch, element, true);
try {
while (true) {
yield element;
}
} finally {
instance.remove();
}
};
}
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.
