Processing web sketch embeds on this forum

Discourse has the ability to whitelist embedded iframes from select hosts.

We could use this to enable embedding web-hosted Processing / p5.js sketches from community-trusted platforms such as the p5.js web editor, or openprocessing.org, et cetera.

An embed from editor.p5js.org:

<iframe src="https://editor.p5js.org/jeremydouglass/sketches/C8iRfwjx-"
width="100%" height="510" allowfullscreen frameborder="0"
marginwidth="0" marginheight="0"></iframe>

An embed from openprocessing.org

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

A potential downside is that it might discourage people from posting their code into the forum – and code posted from web editor sketches has a bad habit of quickly mutating after a question is asked. But it would certainly make the Gallery more compelling…

We would need a list of what platforms to whitelist.

6 Likes

That is neat !

Do you think adding trinket.io to the list would be possible ? (for python mode users)

1 Like

Absolutely. Can you post an embed of a test sketch here? It doesn’t matter if it doesn’t render (yet).

Also, sketchpad.cc / studio.processingtogether.com:

…we may have a breaking problem with sketchpad / processingtogether – the certificate for https is expired, and https is required for an embed.

2 Likes

Trinket & OpenProcessing: :snake:

<iframe 
  src="https://trinket.io/embed/python/62fab051ed?runOption=run&start=result" 
  width="100%" height="510" allowfullscreen 
  frameborder="0" marginwidth="0" marginheight="0" >
</iframe>
3 Likes

Great ! I can’t post right now but will do tomorrow for sure.

edit : I see gotoloop went ahead, thank you !

Can you add Glitch.com as well, please? :pleading_face:

<iframe 
  src="https://glitch.com/embed/#!/embed/matter-js-bouncing-colorful-balls
      ?path=sketches/global.mjs&previewSize=0&sidebarCollapsed=false" 
  width="100%" height="640" frameborder="0" marginwidth="0" marginheight="0" >
</iframe>
2 Likes

Testing GitHub.io: :octopus:

<iframe 
  src="https://gosubroutine.github.io/Ball-in-the-Chamber/" 
  width="100%" height="640" frameborder="0" marginwidth="0" marginheight="0" >
</iframe>
1 Like

Hmm. Whitelisting iframes on GitHub.io is basically “any software by anyone.” I’m less confident about the implications of that than with a short list of sketch platforms. Thoughts?
@GoToLoop

8 posts were split to a new topic: Numpy with Trinket and-or with Python mode

@GoToLoop any thoughts on the github.io question above?

I guess you’re right. GitHub is more for big apps than simple sketches. :expressionless:

Besides, the runnable link doesn’t match its source code link. :link:

However, any JS hosting site is capable to have all kinds of nasty stuff. :space_invader:

1 Like

I would love to put an embed. I just found out that this is possible. @jeremydouglass please help!

1 Like

@codeguppy – Hmm. I just tried to enable this.

Discourse forums won’t allow the embed tag, so the share cut-paste from codeguppy doesn’t work:

<embed src="http://www.codeguppy.com/code.html?jSm8qvlb18R4Eu64jmE0" style="width:1024px; height:670px;">

But codeguppy doesn’t allow iframes, so this doesn’t load:

<iframe src="http://www.codeguppy.com/code.html?jSm8qvlb18R4Eu64jmE0" width:"100%" height:"510"></iframe>

It looks like the ones we can support (shown above) all allow iframe. I’m open to workarounds – sorry it wasn’t as easy as I thought!

Hi @jeremydouglass

Thanks! I debugged the issue! Seems to work now.

To embed codeguppy we need to specify https:// and appropriate size

<iframe src="https://www.codeguppy.com/code.html?jSm8qvlb18R4Eu64jmE0" width=1024 height=670></iframe>

Thanks!

2 Likes

Great, @codeguppy, thank you!

I’d like to feature-request adding that to the Share popup as a third option. Is there a github repo I should submit that to?

Good idea @jeremydouglass … as of now the main editor is not on github at https://github.com/CodeGuppyPrograms/
I’ll will take your feedback though about the share popup and see what can be done.

1 Like