# Embed a py.processing sketch to the web for easy sharing?

**URL:** <https://discourse.processing.org/t/embed-a-py-processing-sketch-to-the-web-for-easy-sharing/19060>\
**Category:** Processing.py\
**Created:** [March 26, 2020, 10:30pm UTC](https://discourse.processing.org/t/embed-a-py-processing-sketch-to-the-web-for-easy-sharing/19060 "2020-03-26T22:30:50Z")\
**Posts on this page:** 1\
**Showing post:** 6

<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 29, 2020, 4:12pm UTC](https://discourse.processing.org/t/embed-a-py-processing-sketch-to-the-web-for-easy-sharing/19060/6 "2020-03-29T16:12:08Z")

</div>

> [@abouffard](#):
>
> ( `circle` and `square` → `ellipse` and `rect`,

B/c Trinket’s _processing_ module relies on Pjs, and Pjs doesn’t match Processing’s Java Mode fully, not all Processing’s API will be available for it:

Pjs’ API: [ProcessingJS.org/reference/](http://ProcessingJS.org/reference/)

> [@abouffard](#):
>
> - incl. shebang -,

In most cases the shebang isn’t needed at all. More about it:  
[Trinket.io/faq#what-version-of-python-do-you-use](http://Trinket.io/faq#what-version-of-python-do-you-use)

> [@abouffard](#):
>
> [hhike\_game](https://trinket.io/python/973a0f7ae5?runOption=run)

This forum is now allowing embedded `<iframe>` tags from some selected hosting sites:

> [@Processing web sketch embeds on this forum](https://discourse.processing.org/t/test-processing-web-sketch-embeds-on-this-forum/19097):
>
> 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): \<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](http://openprocessing.org) \<iframe…

So you can post your sketch here like this:

```auto
<iframe src="https://trinket.io/embed/python/973a0f7ae5?toggleCode=true&runOption=run&start=result" width="100%" height="260" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>

```

Which would output this:

https://trinket.io/embed/python/973a0f7ae5?toggleCode=true&runOption=run&start=result

> [@abouffard](#):
>
> `loop()` (enables car speed modification) does not seem to work…

I guess both **loop()** & **noLoop()** are bugged on Trinket. I get the following:

> `Exception: noLoop() should be called after run() at <unknown>`

> [@abouffard](#):
>
> I couldn’t find any documentation about **run()**, I assume it’s a Trinket specific method 🤔

Under Processing’s Python Mode, everything needed to run our sketches happen behind the scenes.

But Trinket isn’t Processing. Processing is merely another module among others there.

And in order to kickstart our Processing’s callbacks, such as **setup()**, **draw()**, **mousePressed()**, etc., we have to invoke **run()** there.

> [@abouffard](#):
>
> Vocabulary question: what do you mean by “target/ing”?

Processing got 2 JS flavors: the old Pjs & the not-so-new p5.js.

Therefore when we write a sketch, we need to choose which 1 of those 2 libraries as API “target”.

B/c even though they’re similar, there are considerable API differences:

> **[reference | p5.js](https://p5js.org/reference/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

_[View the full topic](https://discourse.processing.org/t/embed-a-py-processing-sketch-to-the-web-for-easy-sharing/19060)._