diff --git a/src/content/tutorials/config.ts b/src/content/tutorials/config.ts index 82450e053a..ebcea759c6 100644 --- a/src/content/tutorials/config.ts +++ b/src/content/tutorials/config.ts @@ -8,6 +8,7 @@ export const categories = [ "web-design", "accessibility", "criticalAI", + "beyond-web-editor", // "p5-strands", "webgl", "advanced", diff --git a/src/content/tutorials/en/embedding-p5-with-iframe.mdx b/src/content/tutorials/en/embedding-p5-with-iframe.mdx new file mode 100644 index 0000000000..23e67b4ac6 --- /dev/null +++ b/src/content/tutorials/en/embedding-p5-with-iframe.mdx @@ -0,0 +1,238 @@ +--- +title: Embedding p5.js with an iframe +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. +category: beyond-web-editor +categoryIndex: 1 +authors: + - hxrshxz + - Dave Pagurek +--- + +import Callout from "../../../components/Callout/index.astro"; + +## Introduction + +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 ` + + +

More content can go here...

+ + +``` + + +**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. + + +## Step 3: Embedding Web Editor Sketches + +If your sketch is hosted on the p5.js Web Editor, you can embed it directly by using the full-screen URL: + +```html + +``` + +To get the full-screen URL from the Web Editor: +1. Open your sketch in the p5.js Web Editor +2. Click **File** → **Share** → **Fullscreen** +3. Copy the URL provided + +## Step 4: Multiple Sketches on One Page + +One of the key advantages of using iframes is that you can embed multiple sketches on the same page without conflicts: + +```html +
+

Sketch 1

+ +
+ +
+

Sketch 2

+ +
+``` + +Each sketch runs in its own isolated environment, so global variables and function names won't conflict. + +## Step 5: Performance Optimization with Dynamic Loading + +For pages with many sketches, you can improve performance by dynamically loading and unloading iframes when they scroll into view: + +```html +
+
Loading sketch...
+
+ + +``` + + +This technique is used on the p5.js website itself to efficiently handle pages with many example sketches! + + +## Styling and Responsive Design + +You can make your embedded sketches responsive using CSS: + +```css +.sketch-container { + position: relative; + width: 100%; + max-width: 600px; + /* Maintain square aspect ratio. */ + aspect-ratio: 1 / 1; + margin: 0 auto; +} + +.sketch-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} +``` + +## Common Issues and Solutions + +### Issue: Sketch doesn't load + +**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"`). + +### Issue: Sketch is cut off + +**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. + +### Issue: CORS errors when loading from Web Editor + +**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. + +## Next Steps + +Now that you know how to embed sketches with iframes, you might want to explore: + +- Loading sketches directly into a container using [Instance Mode](../p5-instance-mode) (coming soon) +- Using p5.js with modern JavaScript modules +- Integrating p5.js with React or other frameworks + +Happy coding! diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro index 7107405d05..779c646270 100644 --- a/src/layouts/TutorialLayout.astro +++ b/src/layouts/TutorialLayout.astro @@ -50,7 +50,7 @@ const relatedExamples = title={entry.data.title} locale={currentLocale} description={entry.data.authors.join(", ")} - featuredImageSrc={entry.data.featuredImage.src} + featuredImageSrc={entry.data.featuredImage?.src} />