How to Embed p5.js Sketches – 60212: INTERACTIVITY & COMPUTATION

Courtesy of Prof. Luca Damasco, here are some instructions on embedding p5.js sketches into your WordPress posts.

1. Go to editor.p5js.org and log in to your account.

2. Save your sketch.

3. Go to file > share.

4. You should see a pop-up with multiple embed options. Copy and paste the line of code for the "Embed" option.

5. Go to your post. Change your editor from "Visual" to "Text".

6. You're now looking at the HTML code for your post. Find the spot in your post that you'd like to embed your project. Paste the line of code we just copied here.

Note: The line should be by itself ON ITS OWN LINE.

7. Preview your post. You'll notice that your embed is not the right size, and it might even have scroll bars. Like this embedded project below.

Yuck!

To change this go back to edit mode and, WHILE IN TEXT MODE, add this line of code within your embed. style="width: 640px; height: 360px; overflow: hidden;" scrolling="no" frameborder="0"

Note: Your embed should have gone from looking like this

to this

8. Preview your post. You should see a properly embedded p5.js project like the one below!

Note: If your project is still not sized correctly, you can change the size of your embed by changing the width and height parameters. For instance, if your sketch should be 400x400 pixels, you can change this

to this

And that should do it!