To link the <iframe/> of your p5 or openprocessing sketch in your glitch Portfolio, you can follow these steps:

If you’re using openprocessing

1. Save your sketch first, then go to the top right of your sketch and hit this button

   

2. It will pop up this sidebar, copy the code underneath </> EMBED using the copy button or directly copying it.

1. The code should look like something like this

   <iframe src="<https://openprocessing.org/sketch/2093910/embed/>" width="400" height="400"></iframe>
   

2. Open your glitch Portfolio project. Go to one of the HTMLs for the week, and paste your <iframe/> that you just copied in between two <main> like in the picture.

   

If you’re using p5 Editor

1. Go to p5 Editor > File > Share. (You need to save it first)

   

2. Locate the <iframe/> code snippet that embeds your sketch. It should look something like this:

   

3. Copy the entire <iframe/> code snippet by clicking on it. It should look like something like this.

   <iframe src="<https://editor.p5js.org/allison.parrish/full/_OVObj6oE>"></iframe>
   

4. Open your glitch Portfolio project. Go to one of the HTMLs for the week, and paste your <iframe/> that you just copied in between two <main> like in the picture.

   

How to link <iframe/> and give access to camera

If this project uses the camera or microphone, you will need to add more codes there so the website can ask for permission to access your camera and microphone. It should look something like this.

It will only work with the right syntax. For instance, make sure after allow it’s a equal sign (=), and you’re using double quotation (“”) here. Between camera and microphone it should be a semicolon (;) and not anything else.

<iframe allow="camera; microphone" src="(your own unique link)"></iframe>

Now, when someone visits your glitch Portfolio, they will be able to see and interact with your p5 or openprocessing sketch through the embedded <iframe/>.