@mbostock
Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Insert cell
Changed in parent
-
# Fullscreen p5js - template notebook with audio
+
md`# Fullscreen p5js - template notebook
-
A "template" notebook to quickly get up started with fullscreen `p5.js` sketches with sound support. See [the `p5` reference](https://p5js.org/reference/) for more details on its API. This notebook includes: - Tom McWright's function to easily load (multiple!) `p5.js` sketches (from [this notebook](https://beta.observablehq.com/@tmcw/p5)) - good fullscreen support (thanks to Mike Bostock, see [this notebook](https://beta.observablehq.com/@mbostock/fullscreen-canvas)), - a demo of how to use [Howler.js](https://howlerjs.com/) to play back sounds - example code of checking if touch input is inbounds of the `p5.js` canvas - example code of triggering fullscreen when touching the `p5.js` canvas (convenient on mobile) - example code for detecting whether or not the sketch is fullscreen (could be useful for freezing the sketch until running fullscreen, for example) - example trick of how to use the `viewof` macro with an `Inputs.range` element (or anything else) without re-evaluating the cell with the `p5.js` canvas
+
Combining Tom MacWright's [p5.js notebook](https://beta.observablehq.com/@tmcw/p5) with Mike Bostock's [Fullscreen Canvas notebook](https://beta.observablehq.com/@mbostock/fullscreen-canvas) to create an easy fullscreen p5js sketch "template" notebook`
Insert cell
Insert cell
Changed in parent
-
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(sketch => { const c = sketch.color("#DC3F74"); sketch.setup = () => { sketch.createCanvas(...canvasSize()); sketch.textAlign(sketch.CENTER); sketch.textFont("sans-serif"); sketch.textStyle(sketch.BOLD);
};
-
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);
+
sketch.draw = () => { sketch.translate(sketch.millis() / 10 % sketch.width, sketch.height / 2); sketch.background(viewof background.valueAsNumber); sketch.fill(c).textSize(100); sketch.text("p5.js, fullscreen", 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(); } }
+
sketch.windowResized = () => { sketch.resizeCanvas(...canvasSize());
};
-
p5.windowResized = () => { resizes++; p5.resizeCanvas(...canvasSize()); };
})
Insert cell
Changed in parent
-
viewof background = Inputs.range([0, 255], {label: "background color", value: 255, step: 1})// html`<input type='range' min=0 max=255 value=255 />`
+
viewof background = html`<input type='range' min=0 max=255 value=255 />`
Insert cell
Insert cell
Added in parent
isFullscreen = () => document.fullscreenElement === fullscreen.parentElement.nextElementSibling
Insert cell
Changed in parent
-
createSketch = { const p5 = await require('p5@1.4.1/lib/p5.min.js');
+
p5 = { const p5 = await require("p5@0.7/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(); } }; }
Insert cell
Added in parent
md`# Howler.js

Howler.js is a relatively lightweight JS library to make it easy to load and play sounds. It was less hassle than trying to make \`p5.sound\` work in Observable.

See [the main website](https://howlerjs.com/) for demos and [the github repo](https://github.com/goldfire/howler.js#documentation) for documentation on how to use it.

Bonus tip: [\`jfxr\`](https://jfxr.frozenfractal.com/) is a website for generating bleeps clientside. You can export the \`.wav\` files when you're happy with the results`
Insert cell
Added in parent
_howler = require('howler@2.2.3/dist/howler.js')
Insert cell
Added in parent
Howler = _howler.Howler
Insert cell
Added in parent
Howl = _howler.Howl;
Insert cell
Added in parent
doorbell = {
  return new Howl({
    src: ["https://blindedcyclops.neocities.org/p5js/doorbell.ogg"],
    autoplay: false,
    loop: false,
    volume: 0.5
  });
}
Insert cell