Skip to content

Code examples explaining how to send data from iframe p5 sketches to a host webpage

Notifications You must be signed in to change notification settings

guidoschmidt/example.p5.iframe-communication

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

communication with p5 iframes

Short guide explaining how to send data from iframe p5 sketches to a host webpage

👉🏻 Blog Post

👉🏻 Live Example

Getting Started

This examples doesn't utilize a web bundler, check out branch complex-vite+pnpm for a variation using vite.js and pnpm.

To try this example, spin up a local webserver, e.g. using npx

npx http-server -o

Structure

  • index.html is the main web page which includes a sketch via iframe
  • index.js is the main JavaScript file handling Window.postMessage from the iframe and switching the background color via CSS variables
  • index.css is the stylesheet of the main pages. Defines the CSS variable --color-background which is changed when receiving messages from the iframe
  • extern/ holds the external p5 sketch files. This is basically the webpage which will be linked via iframe