Embedding OpenProcessing Sketches

p5.js
1

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 (or am I doing something wrong)?

Example code:

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

@jeremydouglass did a post 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

2 Likes
3

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.

4

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:

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

nice work. thanks for the example.

6

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.

7

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):

<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):

<iframe src="https://preview.p5js.org/Kumu-Paul/embed/-RRczHwYA"></iframe>
2 Likes
8

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

3 Likes
9

Great!

And it’s working :tada:

Thanks.

2 Likes
10

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

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

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.

12

Hi @J_Silva – sorry, I do not know what is causing this, but the configuration on 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.

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?

13

Oooof. That is annoying. 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 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>

2 Likes
14

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

I was too busy writing my rant :sweat_smile:

15

Just you wait for the describe() compulsory requirement! :smiling_imp:

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

That’ll forcibly render all existing sketches incompatible w/ p5*js! :scream:

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

16

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

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

17

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 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).

18

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

19

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…

The 1st time we save a sketch in 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 only.

But forcing it at library level is insane & tyrannical!