Stripped-down embedded p5.js sketches

[tugrulsalci]

Hello,

We are a platform that features student works from Creative Coding classes in Özyeğin University. You can reach the works at randomseed.cargo.site . Withing the latest update, in all of the artworks we have the white p5.js navigation bar. Of course would like to promote p5.js as we use and host our artworks. But the bar is very wide and at top. Do you think of an update which allows the usage of navigation bar at the bottom? And without the sketch/artist information. Just the logo and code button maybe. Because we already giving the artist info.

Thank you in advance,
Tuğrul

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Hi @tugrulsalci! Thank you for the suggestion. For context, the reason behind adding the top navigation was to prevent phishing.

I think we could think about having an embed view for a sketch that is a stripped down version of the editor, like what other similar sites do (e.g. CodePen), that just let you see the code and the sketch, and nothing else. It would also be a smaller app so it would load faster.

[burnedsap]

I agree, the new bar breaks previous embeds and it would be nice to have an option to embed without the window.

[erikDillaman]

I was using the P5 embedding within Canvas to host example challenges and assignments for students -- with this new top bar, it allows them an easy way to find the source and simply copy the code. I want them to be able to interact and visualize the challenge without being able to just scan through my code (at least at first...) Can there be a toggle in the editor that allows us to remove the top bar and/or such an easy link to the source code?

[stungeye]

I would also like a way to embed only the sketch itself. I created interactive sketches for an applied math course, but the embeds are now all broken. The following screenshot shows how a 50x50px sketch now looks embedded in my notes. :)

[alptugan]

Hi there,

Is there any workaround for the top bar visibility issue.
I tried many css tricks to remove the top banner. I could not make it work cause of iframe structure I guess.
@catarak, I got your point. But it would be good to have an option to enable/disable top bar as @erikDillaman suggested.

[CaseyJNova]

Any solution on this topic? Would also like to be able to adjust how the embed looks.

Or, is this easier to change if self-hosted?

[burnedsap]

I've been self hosting to get around the issue. Download the zip file and host it on Github Pages or Glitch.

[CaseyJNova]

Agree, self-hosted is the way to go. Took me a minute but was able to get it all figured out. I'll try and do a write up on it an link it here later. Thanks!