# 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


### 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! :blush: