---
# System prepended metadata

title: 'A friendly guide on how to integrate p5.js sketches into a website :computer: :sparkles:'

---


# A friendly guide on how to integrate p5.js sketches into a website :computer: :sparkles: 


## 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!** :smiley: 

---

### This is the online p5.js editor

---

{%youtube MXs1cOlidWs %}

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

![](https://i.imgur.com/Q9ASMQC.png)

### 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://i.imgur.com/0T1ODaL.png)
![](https://i.imgur.com/y3PSQGY.png)

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://i.imgur.com/4Xhvxz0.png)
https://p5js.org/examples/dom-input-and-button.html



---

### Thank you! :blush: 

