-# 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`
-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()); };})
-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 />`
isFullscreen = () => document.fullscreenElement === fullscreen.parentElement.nextElementSibling
-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(); } }; }
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`
_howler = require('howler@2.2.3/dist/howler.js')
Howler = _howler.Howler
Howl = _howler.Howl;
doorbell = { return new Howl({ src: ["https://blindedcyclops.neocities.org/p5js/doorbell.ogg"], autoplay: false, loop: false, volume: 0.5 }); }