guidoschmidt / example.p5.iframe-communication Public

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

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
public/extern		public/extern
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml

Repository files navigation

communication with p5 iframes

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

This examples uses vite.js. To get started, install needed dependencies and start vite:

npm install
npm run dev

src/ holds the source code that embeds an external iframe and reacts on messages sent from the iframes page via Window.postMessage
public/extern/ holds the external p5 sketch files. This is basically the webpage which will be linked via iframe. The public/ folder acts as a static files folder for vite.js. We can act as if it was hosted somewhere else and referr to it via /extern on our local machine to simulate a scenario where it's hosted somewhere else.