Skip to content

Commit 9c21440

Browse files
hxrshxzhxrshxz
committed
Add tutorial for embedding p5.js sketches with iframes and
1 parent 874d129 commit 9c21440

File tree

3 files changed

+241
-2
lines changed

3 files changed

+241
-2
lines changed

‎src/content/tutorials/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const categories = [
88
"web-design",
99
"accessibility",
1010
"criticalAI",
11+
"beyond-web-editor",
1112
// "p5-strands",
1213
"webgl",
1314
"advanced",

‎src/content/tutorials/en/embedding-p5-with-iframe.mdx‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
---
2+
title: Embedding p5.js with an iframe
3+
description: Learn how to embed p5.js sketches in webpages using iframes, allowing you to use global mode and have multiple sketches on a single page.
4+
category: beyond-web-editor
5+
categoryIndex: 1
6+
authors:
7+
- hxrshxz
8+
- Dave Pagurek
9+
---
10+
11+
import Callout from "../../../components/Callout/index.astro";
12+
13+
## Introduction
14+
15+
While the p5.js Web Editor is a great place to create and share sketches, you might want to embed your p5.js projects in other webpages—like a personal portfolio, blog, or documentation site. One of the most straightforward and flexible ways to do this is by using an `<iframe>` element.
16+
17+
An iframe (inline frame) allows you to embed one HTML document inside another. This approach has several advantages:
18+
19+
- You can use **global mode** p5.js code without worrying about conflicts
20+
- You can have **multiple sketches** on the same page, each in its own iframe
21+
- Your sketch runs in an **isolated environment**, preventing naming conflicts with the parent page
22+
- You can easily **dynamically load and unload** sketches for better performance
23+
24+
## Prerequisites
25+
26+
Before starting this tutorial, you should:
27+
28+
- Have a basic understanding of HTML
29+
- Have a p5.js sketch ready to embed (either from the Web Editor or a local project)
30+
31+
## Step 1: Create Your p5.js Sketch
32+
33+
First, you'll need a p5.js sketch to embed. Here's a simple example:
34+
35+
```html
36+
<!DOCTYPE html>
37+
<html lang="en">
38+
<head>
39+
<meta charset="utf-8" />
40+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
41+
<title>My p5.js Sketch</title>
42+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
43+
<style>
44+
body {
45+
margin: 0;
46+
padding: 0;
47+
overflow: hidden;
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<script>
53+
function setup() {
54+
createCanvas(400, 400);
55+
}
56+
57+
function draw() {
58+
background(220);
59+
fill(255, 0, 200);
60+
ellipse(mouseX, mouseY, 50, 50);
61+
}
62+
</script>
63+
</body>
64+
</html>
65+
```
66+
67+
Save this as `sketch.html` in a folder on your computer or web server.
68+
69+
## Step 2: Embed the Sketch Using an iframe
70+
71+
Now, in your main webpage, you can embed the sketch using an `<iframe>` element:
72+
73+
```html
74+
<!DOCTYPE html>
75+
<html lang="en">
76+
<head>
77+
<meta charset="utf-8" />
78+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
79+
<title>My Portfolio</title>
80+
<style>
81+
.sketch-container {
82+
width: 400px;
83+
height: 400px;
84+
border: 2px solid #333;
85+
margin: 20px auto;
86+
}
87+
iframe {
88+
width: 100%;
89+
height: 100%;
90+
border: none;
91+
}
92+
</style>
93+
</head>
94+
<body>
95+
<h1>My Creative Coding Portfolio</h1>
96+
<p>Check out my interactive sketch below!</p>
97+
98+
<div class="sketch-container">
99+
<iframe src="sketch.html" title="Interactive p5.js sketch"></iframe>
100+
</div>
101+
102+
<p>More content can go here...</p>
103+
</body>
104+
</html>
105+
```
106+
107+
<Callout variant="helpful">
108+
**Accessibility Tip:** Always include a `title` attribute on your iframe that describes what the embedded content is. This helps screen reader users understand what the iframe contains.
109+
</Callout>
110+
111+
## Step 3: Embedding Web Editor Sketches
112+
113+
If your sketch is hosted on the p5.js Web Editor, you can embed it directly by using the full-screen URL:
114+
115+
```html
116+
<iframe
117+
src="https://editor.p5js.org/username/full/sketchID"
118+
width="400"
119+
height="400"
120+
title="My p5.js sketch from the Web Editor">
121+
</iframe>
122+
```
123+
124+
To get the full-screen URL from the Web Editor:
125+
1. Open your sketch in the p5.js Web Editor
126+
2. Click **File** → **Share** → **Fullscreen**
127+
3. Copy the URL provided
128+
129+
## Step 4: Multiple Sketches on One Page
130+
131+
One of the key advantages of using iframes is that you can embed multiple sketches on the same page without conflicts:
132+
133+
```html
134+
<div class="sketch-container">
135+
<h2>Sketch 1</h2>
136+
<iframe src="sketch1.html" width="400" height="400" title="First sketch"></iframe>
137+
</div>
138+
139+
<div class="sketch-container">
140+
<h2>Sketch 2</h2>
141+
<iframe src="sketch2.html" width="400" height="400" title="Second sketch"></iframe>
142+
</div>
143+
```
144+
145+
Each sketch runs in its own isolated environment, so global variables and function names won't conflict.
146+
147+
## Step 5: Performance Optimization with Dynamic Loading
148+
149+
For pages with many sketches, you can improve performance by dynamically loading and unloading iframes when they scroll into view:
150+
151+
```html
152+
<div class="sketch-container" data-sketch-src="sketch.html">
153+
<div class="loading">Loading sketch...</div>
154+
</div>
155+
156+
<script>
157+
// Create an Intersection Observer to load sketches when they're visible.
158+
const observer = new IntersectionObserver((entries) => {
159+
entries.forEach((entry) => {
160+
if (entry.isIntersecting === true) {
161+
const container = entry.target;
162+
const sketchSrc = container.dataset.sketchSrc;
163+
164+
if (sketchSrc && !container.querySelector('iframe')) {
165+
const iframe = document.createElement('iframe');
166+
iframe.src = sketchSrc;
167+
iframe.width = '400';
168+
iframe.height = '400';
169+
iframe.title = 'p5.js sketch';
170+
171+
container.innerHTML = '';
172+
container.appendChild(iframe);
173+
}
174+
}
175+
});
176+
}, {
177+
// Start loading slightly before it comes into view.
178+
rootMargin: '50px',
179+
});
180+
181+
// Observe all sketch containers.
182+
document.querySelectorAll('.sketch-container').forEach((container) => {
183+
observer.observe(container);
184+
});
185+
</script>
186+
```
187+
188+
<Callout variant="helpful">
189+
This technique is used on the p5.js website itself to efficiently handle pages with many example sketches!
190+
</Callout>
191+
192+
## Styling and Responsive Design
193+
194+
You can make your embedded sketches responsive using CSS:
195+
196+
```css
197+
.sketch-container {
198+
position: relative;
199+
width: 100%;
200+
max-width: 600px;
201+
/* Maintain square aspect ratio. */
202+
aspect-ratio: 1 / 1;
203+
margin: 0 auto;
204+
}
205+
206+
.sketch-container iframe {
207+
position: absolute;
208+
top: 0;
209+
left: 0;
210+
width: 100%;
211+
height: 100%;
212+
border: none;
213+
}
214+
```
215+
216+
## Common Issues and Solutions
217+
218+
### Issue: Sketch doesn't load
219+
220+
**Solution:** Make sure the `src` path in your iframe is correct. If the sketch file is in the same directory as your HTML file, use just the filename. If it's in a subdirectory, include the path (e.g., `src="sketches/sketch.html"`).
221+
222+
### Issue: Sketch is cut off
223+
224+
**Solution:** Ensure the iframe's width and height match your canvas size, or make sure your sketch canvas is sized to fit within the iframe.
225+
226+
### Issue: CORS errors when loading from Web Editor
227+
228+
**Solution:** The p5.js Web Editor handles CORS correctly when you use the full-screen URL format. Make sure you're using `https://editor.p5js.org/username/full/sketchID` and not the edit URL.
229+
230+
## Next Steps
231+
232+
Now that you know how to embed sketches with iframes, you might want to explore:
233+
234+
- Loading sketches directly into a container using [Instance Mode](../p5-instance-mode) (coming soon)
235+
- Using p5.js with modern JavaScript modules
236+
- Integrating p5.js with React or other frameworks
237+
238+
Happy coding!

‎src/layouts/TutorialLayout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ const relatedExamples =
4949
<Head
5050
title={entry.data.title}
5151
locale={currentLocale}
52-
description={entry.data.authors.join(", ")}
53-
featuredImageSrc={entry.data.featuredImage.src}
52+
description={entry.data.description}
53+
featuredImageSrc={entry.data.featuredImage?.src}
5454
/>
5555

5656
<BaseLayout

0 commit comments

Comments
 (0)