https://phfrohring.com/page/ac946fae-6766-428b-bb26-c63880167228/

Illustration
TOC SHOW ANSWERS home
This article explains how to integrate a p5.js animation into a web
page. It includes a series of questions and answers to test readers'
understanding of basic p5.js concepts. The accompanying animation
demonstrates both the integration process and the concepts in action.

The objective is to learn enough about P5.js to integrate simple
animations into a web page.

 1. The section Experiment demonstrates an integration of p5.js
    animation into this very web page.
 2. The section QA tests the readers understanding of p5.js through a
    series of questions and answers.

The objective of the experiment is to display a grid of
interconnected nodes. An animation will demonstrate how `probes'
propagate from one node to another by sensing the neighbors of each
node and choosing to jump to the next node in a given direction.

A grid of nodes is displayed below. Three probes are started at the
top left corner in red, each with a given direction.

In a nutshell, how to use p5?

We will examine this web page experiment and describe its main
elements. Given this HTML:

<div id="p5" style="margin: 2rem 0;"> <canvas></canvas> <script defer
src="data/p5.min.js"></script> <script defer src="data/grid.js"></
script> <div class="actions" style="margin-top:1rem;display:flex;
justify-content:left;"> </div>

we examine grid.js. It defines two functions:

function setup() { /* ... */ } function draw() { /* ... */ }

Using the Actor Model, we may interpret the code like so:

 1. setup() is a message sent by p5 to itself once.
 2. When p5 processes setup(), it executes the associated block of
    instructions -- i.e. { /* ... */ }.
 3. draw() is a message sent by p5 to itself 60 times per second
    after setup() has been received and processed.
 4. When p5 processes draw(), it executes the associated block of
    instructions -- i.e. { /* ... */ }.

Note that using new p5(func) where func is:

const func = function(p) { p.setup = function() { /* ... */ } p.draw =
function() { /* ... */ } }

allows avoiding the use of the global scope.

How should this code be interpreted?

function setup() { createCanvas(600, 400) } function draw() {
background(135, 206, 235); fill("yellow"); stroke("orange");
strokeWeight(20); circle(550, 50, 100); }

 1. setup() is processed.
     1. A canvas is built. It has a width of 600px and a height of
        400px.
 2. draw() is processed.
     1. The background is painted in blue.
     2. The next shape will be filled with yellow.
     3. The stroke of the next shape will be orange.
     4. The next shape stroke weight will be 20.
     5. A circle with a center at (550, 50) and a diameter of 100 is
        drawn.

Given the block of instructions associated with setup() reproduced
below, how should it be interpreted?

function setup() { canvas.draw() resetSketch() } function resetSketch
() { const start_node = nodes.get(0,0); probes = [ new Probe
(start_node, colors.color("red-500"), right_dir), new Probe
(start_node, colors.color("blue-500"), bottom_right_dir), new Probe
(start_node, colors.color("green-500"), bottom_dir), ] !isLooping() &
& loop() } class Canvas { #width #height #canvas #parent #actions
constructor(width, height, canvas_id) { this.#width = width this.#
height = height this.#parent = document.getElementById(canvas_id)
this.#canvas = this.#parent.getElementsByTagName("canvas")[0] this.#
actions = this.#parent.getElementsByClassName("actions")[0] } get
width() { return this.#width } get height() { return this.#height }
draw() { createCanvas(this.#width, this.#height, this.#canvas); let
button = createButton("reset"); button.elt.classList.add("button")
button.mousePressed(resetSketch); this.#actions.appendChild
(button.elt) } }

 1. setup() is processed.
     1. canvas.draw() is processed.
         1. A P5 Canvas is created and will be rendered into the
            canvas in the DOM.
         2. A button is created such that when clicked, it resets the
            rendered animation.
         3. The button is placed in the actions bar.
     2. resetSketch() processed.
         1. Three probes are started from the top left node.
         2. Each probe has a given direction: right, bottom_right and
            bottom.
         3. If the draw() message is not received 60 times per
            second, then: make it so.

Given the implementation of draw() below, how should it be
interpreted?

function draw() { background(bg_color); nodes.draw() probes.forEach
((probe) => probe.draw()) if (frameCount % 10 == 0) { probes.forEach
((probe) => probe.next()) !probes.some((probe) => probe.moving) &&
noLoop() } }

 1. draw() is processed.
     1. The background of the canvas is painted using color: bg_color
     2. Each node receives a draw() message, each causing the node to
        draw itself.
     3. Each probe receives a draw() message, each causing the probe
        to draw itself.
     4. Every 10 frames:
         1. Each probe tries to reach the next node if any.
         2. If no probe can reach a next node, the animation stops.

We observe that each frame is a superposition of drawn objects.

  * It would be preferable to avoid using the global scope.
  * It would be preferable to encapsulate the whole animation in a
    Web Component.

  * An animation using p5.js has been integrated into this web page.
  * The basic components have been described and tested.
  * More challenging animation would require more elaborate code,
    which may be the subject of an other article.

  * p5.js
  * How can I display two p5js sketches on the same html page?

---------------------------------------------------------------------

This work by Pierre-Henry frohring is licensed under CC BY-SA 4.0[cc]
[by][sa]