A friendly guide on how to integrate p5.js sketches into a website

Why is it useful?

• p5.js is a JavaScript library, created for beginners and people exploring creative code and digital interaction.
• So, it's basically JS, but EASIER!
• The good news is that our cools sketches don't need to be confined to a canvas in the online editor…
• … it can be seamlessly incorporated into our websites, just like any JS script!
• Here's a short tutorial on how to achieve this and bring more interaction to your webpages using 2 different methods!

---

This is the online p5.js editor

---

Try it here: https://editor.p5js.org/

1 - The < iframe > method

An iframe is basically a window into a nested page within a page, you just need to insert a URL (in this case, your p5.js sketch) as the source of the iframe tag in your HTML file.

Example

<iframe src="https://editor.p5js.org/avezray/full/JTjhOdGRB" width="600px" height="400px"></iframe>

Styling (could go directly to the css file)

<style> iframe{ border: none; } </style>

Results

pros

• Easy and straightforward
• Good for a blog post
• Good for multiple sketches

cons

• The editor interface will still be visible
• not very responsive
• manually set the size of the iframe in pixels (although there are some advanced hacks to bypass that, as shown below:)

 function resizeSketch(iframe, parentId, aspectRatio) {
                    let parent = document.getElementById(parentId);
                    let w = parent.clientWidth;
                    iframe.width = w;
                    iframe.height = w * aspectRatio;
                    iframe.contentWindow.addEventListener('resize', () => {
                        let w = parent.clientWidth;
                        iframe.width = w;
                        iframe.height = w * aspectRatio;
                    });
                }

---

2 - The local file method

Working within the web editor is convenient, but limited. In order to add our sketch to our own pages, we have to go through a few steps.
Firstly, we need to create another .js file in our website folder to contain our sketch.
After that, we need to include a link to this script to our main HTML file, and then connect it to the p5.js library.
For now, I recommend using the CDN, which just involves pasting the following line inside the < head >

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Example

<iframe src="https://editor.p5js.org/avezray/full/JTjhOdGRB" width="600px" height="400px"></iframe>

Styling (could go directly to the css file)

canvas {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
}

Results

https://kevinworkman.com/

pros

• More styling and positioning options
• Great for using the p5.js sketch as the background
• good for seamless integration

cons

• Lenghtier process
• Requires a lot of CSS to fine-tune

---

Useful p5.js tips and tricks

Resizing Canvas on window resize

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0, 100, 200);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Advanced (maintains aspect ratio):

      function setup() {
        pixelDensity(1);
        const cnv = createCanvas(windowWidth, windowHeight);
        cnv.id('sketch'); //remember to create an 'id' with the same name for the canvas element inside the HTML

        const displayRatio = windowWidth / windowHeight;
        pg = createGraphics(100 * displayRatio, 100);
      }
      
            function windowResized() {
        resizeCanvas(windowWidth, windowHeight);
      }

Modifying the DOM

When combining both p5.js and HTML, we could create interactions that modify the DOM elements. Example: clicking generates a new < p > tag with text.

https://p5js.org/examples/dom-input-and-button.html

---

Thank you!