-
# 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 />`

-
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();
    }
  };
}