{"id":17412902,"url":"https://github.com/guidoschmidt/example.p5.iframe-communication","last_synced_at":"2025-03-03T00:12:33.218Z","repository":{"id":150857603,"uuid":"573544980","full_name":"guidoschmidt/example.p5.iframe-communication","owner":"guidoschmidt","description":"Code examples explaining how to send data from iframe p5 sketches to a host webpage","archived":false,"fork":false,"pushed_at":"2023-02-07T11:59:07.000Z","size":670,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-13T10:51:41.029Z","etag":null,"topics":["blogpost","creativecode","creativecodeart","creativecoding","example","iframe","p5","p5js"],"latest_commit_sha":null,"homepage":"https://guidoschmidt.github.io/example.p5.iframe-communication/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guidoschmidt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-02T18:11:34.000Z","updated_at":"2024-12-29T04:21:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"d11698c4-6e58-4900-abca-1a3ac4f52e4d","html_url":"https://github.com/guidoschmidt/example.p5.iframe-communication","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidoschmidt%2Fexample.p5.iframe-communication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidoschmidt%2Fexample.p5.iframe-communication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidoschmidt%2Fexample.p5.iframe-communication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidoschmidt%2Fexample.p5.iframe-communication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guidoschmidt","download_url":"https://codeload.github.com/guidoschmidt/example.p5.iframe-communication/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241587853,"owners_count":19986628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blogpost","creativecode","creativecodeart","creativecoding","example","iframe","p5","p5js"],"created_at":"2024-10-17T00:50:15.464Z","updated_at":"2025-03-03T00:12:33.198Z","avatar_url":"https://github.com/guidoschmidt.png","language":"JavaScript","readme":"# communication with p5 iframes\n\u003e Short guide explaining how to send data from iframe p5 sketches to a host\n\u003e webpage\n\n### 👉🏻 [Blog Post](https://preview.guidoschmidt.cc/journal/iframe-p5/)\n### 👉🏻 [Live Example](https://guidoschmidt.github.io/example.p5.iframe-communication/)\n\n\n### Getting Started\nThis examples doesn't utilize a web bundler, check out branch [complex-vite+pnpm](https://github.com/guidoschmidt/example.p5.iframe-communication/tree/complex-vite+pnpm)\nfor a variation using [vite.js](https://vitejs.dev/) and [pnpm](https://pnpm.io/).\n\nTo try this example, spin up a local webserver, e.g. using [npx](https://docs.npmjs.com/cli/v7/commands/npx)\n\n```\nnpx http-server -o\n```\n\n### Structure\n\n- `index.html` is the main web page which includes a sketch via `iframe`\n- `index.js` is the main JavaScript file handling `Window.postMessage` from the\n  `iframe` and switching the background color via CSS variables\n- `index.css` is the stylesheet of the main pages. Defines the CSS variable\n  `--color-background` which is changed when receiving messages from the `iframe`\n- `extern/` holds the external p5 sketch files. This is basically the\n  webpage which will be linked via `iframe`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidoschmidt%2Fexample.p5.iframe-communication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguidoschmidt%2Fexample.p5.iframe-communication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidoschmidt%2Fexample.p5.iframe-communication/lists"}