Porting p5js code to another program

p5.js Beginners
9

Hi,

It shows the “loading…” indicator in the upper left corner of the page but it doesn’t seem to actually load anything.

In such cases, be sure to check your browser’s console to find any error messages it might be quietly reporting there about the problems it is having with your code. The intention of those messages is to help you troubleshoot.

For example, to open the console in Chrome:

  • On Windows: Ctrl + Shift + J
  • On Mac: Cmd + Option + J

An easy alternative - iframes

one alternative quick approach that might work for you is to have your sketch hosted separately - for example, on the p5 web editor or openprocessing - and embed it into your existing web site using an iframe.

Here are two example embedded sketches

I’ve kept these small but you can alter their size easily when working with your own html.

One from openprocessing.org:

One from the p5.js web editor

How to embed your own p5 sketch using an iframe

On p5 web editor

  1. Save your sketch, making sure it is “public” (the default) then
  2. From the menu, choose File then Share
  3. Copy the entirety of the text in the “embed sketch” box
  4. Paste it into your html page and save

On OpenProcessing

There’s an official tutorial here with full detail, but essentially, once you save your sketch, you can get the embed code from the share panel on your sketch (icon is normally on the top right).

Quick try

You can try embedding anyone’s sketch this way into your html as a quick experiment. E.g. here’s the html to embed the three-squares example above:

<iframe src="https://editor.p5js.org/neill0/full/4U0XJrsH6"></iframe>
2 Likes