# Embedding OpenProcessing Sketches

**URL:** <https://discourse.processing.org/t/embedding-openprocessing-sketches/32614>\
**Category:** p5.js\
**Created:** [October 4, 2021, 8:29pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614 "2021-10-04T20:29:20Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 4, 2021, 8:29pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/1 "2021-10-04T20:29:20Z")

</div>

I know this forum supports embedding sketches hosted at `editor.p5js.org`. However it doesn’t seem to support sketches from `openprocessing.org`. Presumably this forum is configured with a whitelist of domains that can be embedded. Would the admins consider whitelisting [openprocessing.org](http://openprocessing.org) (or am I doing something wrong)?

Example code:

```auto
<iframe src="https://openprocessing.org/sketch/1104573/embed/?plusEmbedHash=ZDMwYTZiNTc1ZjFkOTMzMmE0NDQxZGZiYWQyNTdiMjE5YWYxMzgyNDhiNjhiMjNkMGE4MDYzYmZlMGY1NzNiMmZjNTY0YzZlYjFkZjEyNjZhYjkwZGZkMjEwM2Q3NGNiZGI5MmIzYWU1NDFmMzMxMGYzM2RmN2ExNjNiMDE0NzFVN2I3OFlsMU83OWt4dGdqM09SY21UOUduRnNTdm9DOEsrM1pjUnhxTWlPYlQyTDhobjR2V3h4dHhjd21Pd1lPWXFCZFJSWXgwNE11aVFiZzBFN09DZz09&plusEmbedTitle=true" width="400" height="400"></iframe>

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [October 5, 2021, 2:36am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/2 "2021-10-05T02:36:10Z")

</div>

@jeremydouglass did a [post](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/19) on this a while back i think if you read further down it’s talked about. i can’t even get the p5js editor to embed but that’s probably my error or maybe they disabled it? jeremy will know

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [October 5, 2021, 2:45am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/3 "2021-10-05T02:45:29Z")

</div>

Before I used to be able to just post a link and the open processing sketch would display in the comment with full functionality however having checked a few of the sketches I posted the links are there however I can no longer interact with them on the forum, so maybe something has changed on the forum or on open processing itself. Also I can no longer create new processing sketches on open processing due to their last update so that may be the issue.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 5, 2021, 8:20am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/4 "2021-10-05T08:20:01Z")

</div>

Thanks! Based on the post you linked to I was able to determine that this forum’s domain whitelist is subdomain sensitive. For OpenProcessing you _must_ use `https://www.openprocessing/` and for `p5js.org` you _must_ use `https://editor.p5js.org/`. So beware the generated `<iframe />` tags from those sites because they actually use different urls.

Here’s a working example:

```auto
<iframe src="https://www.openprocessing.org/sketch/1116549/embed/" width="100%" height="510" allowfullscreen frameborder="0"
marginwidth="0" marginheight="0"></iframe>

```

https://www.openprocessing.org/sketch/1116549/embed/

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [October 5, 2021, 8:36am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/5 "2021-10-05T08:36:17Z")

</div>

nice work. thanks for the example.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 5, 2021, 2:57pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/6 "2021-10-05T14:57:10Z")

</div>

Hi @KumuPaul – based on your investigation, what are the specific (sub)domains that should be added to this forum whitelist? The whitelisting was set up some time ago, so it probably got out of sink with those site embed generators as they updated.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 5, 2021, 6:33pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/7 "2021-10-05T18:33:01Z")

</div>

TLDR; `openprocessing.org` and `preview.p5js.org`

* * *

OpenProcessing generates an iframe with a src that has no subdomain (which won’t work, but if you add `www.` then it will):

```auto
<iframe src="https://openprocessing.org/sketch/1165174/embed/?plusEmbedHash=Mjk0MmYyNTA0MTk1OTNmNjg2NjBjOGJlYmNiOGFjMTFiM2Y3ZTM1OGU2OTViYzc2ZTkzNjJmYzI5MjNjMTZmMDgwMWJhZWUzNmIwZjc4ZjA2NDZkYjgzMGIyNTA1ZGMxZGM5YmYwYWZlNGNiYWVjNTU1MTYyYTNiOTJmZWRmZjNxYU8xUFRMclY5a2tnbkI0Sy9VdjJlaFJtZ2tnY3NzOHVWUUVoMFd5U0I1TUtwSVFlUDVMaXNYM1Qyc3RNanZXNHA4MTBmVHRmNFJ1OFdjM0JnUUVaQT09&plusEmbedTitle=true" width="400" height="400"></iframe>

```

.

`P5js.org` generates an iframe with a src at `https://preview.p5js.org/` (which won’t work by if you switch to one of the `https://editor.p5js.org/` urls for the sketch it will):

```auto
<iframe src="https://preview.p5js.org/Kumu-Paul/embed/-RRczHwYA"></iframe>

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 5, 2021, 7:58pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/8 "2021-10-05T19:58:04Z")

</div>

I have tried adding those specific bare domains / subdomains to the forum whitelist.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 5, 2021, 8:08pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/9 "2021-10-05T20:08:51Z")

</div>

Great!

https://openprocessing.org/sketch/1165174/embed/?plusEmbedHash=Mjk0MmYyNTA0MTk1OTNmNjg2NjBjOGJlYmNiOGFjMTFiM2Y3ZTM1OGU2OTViYzc2ZTkzNjJmYzI5MjNjMTZmMDgwMWJhZWUzNmIwZjc4ZjA2NDZkYjgzMGIyNTA1ZGMxZGM5YmYwYWZlNGNiYWVjNTU1MTYyYTNiOTJmZWRmZjNxYU8xUFRMclY5a2tnbkI0Sy9VdjJlaFJtZ2tnY3NzOHVWUUVoMFd5U0I1TUtwSVFlUDVMaXNYM1Qyc3RNanZXNHA4MTBmVHRmNFJ1OFdjM0JnUUVaQT09&plusEmbedTitle=true

And it’s working 🎉

Thanks.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 5, 2021, 8:15pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/10 "2021-10-05T20:15:05Z")

</div>

Removed the `www.` part from my most recent embed and it’s working as well:

```auto
<iframe
  src=https://OpenProcessing.org/sketch/1292231/embed/
  width=100% height=350 frameborder=0>
</iframe>

```

https://OpenProcessing.org/sketch/1292231/embed/

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [October 7, 2021, 3:31pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/11 "2021-10-07T15:31:05Z")

</div>

Hi Jeremy. The embeds of Web Editor sketches recently are demanding to allow cookies.  
After allowing, the window is reduced to a small fraction. This makes not much sense to me. Is there a solution?  
[Example here.](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js-webgl-solved-by-using-p5-geometry/31990/21)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 7, 2021, 5:12pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/12 "2021-10-07T17:12:11Z")

</div>

Hi @J_Silva – sorry, I do not know what is causing this, but the configuration on [discourse.processing.org](http://discourse.processing.org) has not changed. I am assuming that it is a recent change in the editor.p5.js server, and so the thing would be to open an issue on the p5.js web editor github repo.

> **[Issues · processing/p5.js-web-editor](https://github.com/processing/p5.js-web-editor/issues)**
>
> p5.js Web Editor, officially launched! Contribute to processing/p5.js-web-editor development by creating an account on GitHub.

You could also try re-embedding the sketch and see the editor is providing an updated embed code that does not cause this problem. If you discover that works as a fix we might be able to scour the forum and update bad embed codes with good ones.

@KumuPaul, any guesses why this might be happening?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 7, 2021, 10:25pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/13 "2021-10-07T22:25:43Z")

</div>

Oooof. That is annoying. [p5js.org](http://p5js.org) just 1) completely broke the fullscreen view of sketches (even if you navigate there directly, not in an iframe), and 2) introduced one of these stupid\* “accept cookies” banners. Unfortunately the latter is difficult to deal with because browsers will not send cookies with requests generated from within an iframe that is hosted on a site with a different domain name. So if [p5js.org](http://p5js.org) insists on having this “accept cookies” banner present on the full screen editor page then that is always going to show up, but they will hopefully fix the fact that they basically completely broke the page even after you dismiss the banner or load the page in a context were cookies are sent.

Good news: now that the `preview.p5js.org` domain is whitelisted you can switch to the `https://preview.p5js.org/{{UserName}}/embed/{{SketchId}}` style URL for your iframes and this will work because this page does not require cookies and isn’t broken. The only downside is it doesn’t have the “view code” button.

\*_\<rant\>_  
_All of these “accept cookies” banners are absolute worthless BS that has been foisted on the entire world by the misinformed, misguided, nanny state that is the EU. Cookies are just how the internet works! If you don’t like it, disable them completely in your browser (and have fun not being able to log in to websites or add items to your shopping cart). Cookies are part of the HTTP standards **for a good reason.** Consent banners do absolutely nobody any good whatsoever. They are just a huge nuisance. If you live in the EU I beg you to contact your MEPs immediately and tell them that they need to completely repeal this garbage legislation. If they don’t do so, then please vote for some MEPs that actually understand web technology, instead of these medieval luddites!_  
_\</rant\>_

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 7, 2021, 10:27pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/14 "2021-10-07T22:27:13Z")

</div>

Somebody beat me to opening a bug about this: [when running fullscreen mode the canvas is compressed to a thin squashed band · Issue #1938 · processing/p5.js-web-editor · GitHub](https://github.com/processing/p5.js-web-editor/issues/1938)

I was too busy writing my rant 😅

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 7, 2021, 11:12pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/15 "2021-10-07T23:12:22Z")

</div>

> [@KumuPaul](#):
>
> I was too busy writing my rant 😅

Just you wait for the **describe()** compulsory requirement! 😈

Their plan is when p5\*js reaches major version 2 all sketches must invoke **describe()**, otherwise the library will refuse to run them! 🤪

That’ll forcibly render all existing sketches incompatible w/ p5\*js! 😱

Till then we’ll be receiving annoying warnings on the console about that future “enhancement”. 😠

> <https://github.com/processing/p5.js/issues/5427>
>
> I was wondering what others think about the idea of potentially requiring a \[\`de…scribe()\`\](https://p5js.org/reference/#/p5/describe) line in order for a p5 sketch to run? 
> 
> \#### How would this new feature help \[increase access\]:
> This would increase the accessibility of p5.js sketches for people that are Blind or have visual impairments. Considering the way p5.js use continues to expand in education, as well as other spaces like NFTs, this decision could potentially have a large impact.
> 
> It's important to note that this could potentially increase the barrier a bit for those that are new to p5.js. On the other hand, it could be a way to spread awareness, through teachers and documentation that teach what this function is and how to use it. The function itself is very straightforward to use.
> 
> As a less intense version of this, it could be that the sketch template includes a describe line, but doesn't require it to run.
> 
> \#### Most appropriate sub-area of p5.js?
> 
> \- \[x \] Accessibility (Web Accessibility)
> \- \[x \] Core/Environment/Rendering

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [October 18, 2021, 11:42pm UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/16 "2021-10-18T23:42:56Z")

</div>

what the… why would they do that? that’s ridonculous.

edit: ok accessibility is important but surely there is a better way.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 19, 2021, 1:00am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/17 "2021-10-19T01:00:38Z")

</div>

I don’t think they’re going to make it refuse to run if there is no `describe()` call. I think it would be reasonable to display a `console.warn()` if it is missing. OpenProcessing and [editor.p5js.org](http://editor.p5js.org) both make those visible to the user, so that should encourage new sketches to use it. And they’re talking about updating the examples and templates to already have it (of course the sketch author has to put something meaningful in there for it to be of any use).

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [October 19, 2021, 1:17am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/18 "2021-10-19T01:17:19Z")

</div>

yeh i read a bit more of the discussion and it’s well intentioned i just hope it’s well implemented

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 19, 2021, 7:10am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614/19 "2021-10-19T07:10:48Z")

</div>

> [@KumuPaul](#):
>
> I don’t think they’re going to make it refuse to run if there is no **describe()** call.

To make it clearer the next major release they really intend for **describe()** to be mandatory I’ve collected some quotes from this absurd proposal:

### Proposal Author:

> … the idea of potentially requiring a **describe()** line in order for a p5 sketch to run?

### limzykenneth:

> A possible midway point would be only making **describe()** mandatory for the sketch to run when using the minified version.

### outofambit:

> I’m not opposed to halting the sketch if **describe()** isn’t called in **setup()**,

### nickmcintyre:

> Transitioning to a requirement in a 2.0 release…

> [@KumuPaul](#):
>
> OpenProcessing and [editor.p5js.org](http://editor.p5js.org) both make those visible to the user, so that should encourage new sketches to use it.

The 1st time we save a sketch in [OpenProcessing.org](http://OpenProcessing.org) we are presented w/ a form which we can fill w/ the sketch name, description, instructions, tags, screenshot, etc.

There’s absolutely no coercion for any of those options!

I wouldn’t mind if **describe()** were mandatory for [editor.p5js.org](http://editor.p5js.org) only.

But forcing it at library level is insane & tyrannical!