# Processing web sketch embeds on this forum

**URL:** <https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097>\
**Category:** Community\
**Created:** [March 28, 2020, 12:04am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097 "2020-03-28T00:04:34Z")\
**Posts on this page:** 18\
**Page:** 1

<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:** [March 28, 2020, 12:04am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/1 "2020-03-28T00:04:34Z")

</div>

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](http://openprocessing.org), et cetera.

An embed from [editor.p5js.org](http://editor.p5js.org):

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

```

https://editor.p5js.org/jeremydouglass/sketches/C8iRfwjx-

An embed from [openprocessing.org](http://openprocessing.org)

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

```

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

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.

http://www.codeguppy.com/code.html?jSm8qvlb18R4Eu64jmE0

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [March 28, 2020, 1:48am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/2 "2020-03-28T01:48:51Z")

</div>

That is neat !

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

---

<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:** [March 28, 2020, 2:02am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/3 "2020-03-28T02:02:47Z")

</div>

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

---

<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:** [March 28, 2020, 2:09am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/4 "2020-03-28T02:09:10Z")

</div>

Also, sketchpad.cc / [studio.processingtogether.com](http://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.

---

<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:** [March 28, 2020, 2:16am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/5 "2020-03-28T02:16:03Z")

</div>

Trinket & OpenProcessing: 🐍

> [@Issues with smooth 2D movement in python](https://discourse.processing.org/t/issues-with-smooth-2d-movement-in-python/18556/4):
>
> That’s a very old sketch of mine. innocent BtW, I did a followup w/ 2 players instead of 1 both for Java Mode & p5js flavors: sunglasses And now I’ve decided to do a Python Mode version as well. Check it out: snake #!/bin/python2 """ Players Movement (v1.1.0) by GoToLoop (2020/Mar/11) Discourse.Processing.org/t/issues-with-smooth-2d-movement-in-python/18556/4 GoToLoop.Trinket.io/sites/players-movement Trinket.io/processing/62fab051ed Reddit.com/r/processing/comments/bshqa8/ ho…

---

<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:** [March 28, 2020, 2:19am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/6 "2020-03-28T02:19:46Z")

</div>

> [@jeremydouglass](#):
>
> Can you post an embed of a test sketch here?

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

```

https://trinket.io/embed/python/62fab051ed?runOption=run&start=result

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [March 28, 2020, 2:21am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/7 "2020-03-28T02:21:43Z")

</div>

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

edit : I see gotoloop went ahead, thank you !

---

<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:** [March 28, 2020, 3:02am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/8 "2020-03-28T03:02:02Z")

</div>

Can you add [Glitch.com](http://Glitch.com) as well, please? 🥺

```auto
<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>

```

https://glitch.com/embed/#!/embed/matter-js-bouncing-colorful-balls?path=sketches/global.mjs&previewSize=0&sidebarCollapsed=false

---

<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:** [March 28, 2020, 5:37am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/9 "2020-03-28T05:37:13Z")

</div>

Testing [GitHub.io](http://GitHub.io): 🐙

```auto
<iframe 
  src="https://gosubroutine.github.io/Ball-in-the-Chamber/" 
  width="100%" height="640" frameborder="0" marginwidth="0" marginheight="0" >
</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:** [March 28, 2020, 6:23am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/10 "2020-03-28T06:23:24Z")

</div>

Hmm. Whitelisting iframes on [GitHub.io](http://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

---

<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:** [April 4, 2020, 10:48pm UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/11 "2020-04-04T22:48:27Z")

</div>

8 posts were split to a new topic: [Numpy with Trinket and-or with Python mode](https://discourse.processing.org/t/numpy-with-trinket-and-or-with-python-mode/19409)

---

<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:** [March 28, 2020, 7:03pm UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/15 "2020-03-28T19:03:30Z")

</div>

@GoToLoop any thoughts on the [github.io](http://github.io) question above?

---

<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:** [March 28, 2020, 7:26pm UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/17 "2020-03-28T19:26:29Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [May 5, 2020, 11:25pm UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/18 "2020-05-05T23:25:43Z")

</div>

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

---

<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:** [May 6, 2020, 3:13am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/19 "2020-05-06T03:13:14Z")

</div>

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

```auto
<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:

```auto
<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!

---

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [May 6, 2020, 9:38pm UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/20 "2020-05-06T21:38:06Z")

</div>

Hi @jeremydouglass

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

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

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

```

https://www.codeguppy.com/code.html?jSm8qvlb18R4Eu64jmE0

Thanks!

---

<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:** [May 6, 2020, 9:54pm UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/21 "2020-05-06T21:54:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [May 7, 2020, 12:19am UTC](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097/22 "2020-05-07T00:19:09Z")

</div>

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