Embed not loading in place

Report Bugs
1

I am trying to embed a sketch from P5.js onto a website. Although the sketch loads onto the site, it is somehow displayed at the bottom of the website (below the footer), even though I positioned the “Embed” element within a Hero section at the top of the page. I wish for the sketch to be displayed in the position of the Embed element (within the Hero section).

Here are my steps:

  1. Site Settings > Custom Code > Head Start - then input: <script src="https://cdn.jsdelivr.net/npm/p5@1.8.0/lib/p5.js"></script>

  2. Go to Builder > Embed > Settings (embed) > Content - then input the following:

<script>
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(color(255,255,255));
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(500, 100, 200);
  }
  ellipse(mouseX, mouseY, 80, 80);
}
</script>

Website link demonstrating issue.
Here is the link to the P5.js page I am following instructions from.

Please resolve. Thanks

2

Hi,

You are using only basic functionality from their documentation, which calls function createCanvas, but doesn’t tell it where, so by default, it creates canvas as the last child of body, which is after footer.
Here’s something from their documentation that can help you.

Idea is: create a div with ID where you want to position your canvas, set that div to be a parent of canvas.

2 Likes
3

Your responses are always swift and comprehensive! Thank you, it worked :+1:

4

I’ve noticed that the P5.js canvas appears perfectly fine on a Chrome browser, but doesn’t appear at all on a Firefox browser. Can you provide any explanation as to why this is?

5

Hey, I fixed it for you.
This p5 script requires CDN to be loaded after functions you wrote inside of embed code.
And if CDN is loaded in head start, that loads faster than scripts inside of embed code, and it doesnt work.

I created a workaround with JS files, I created JS file which is adding CDN link to your page only when everything else is rendered.

I am not sure why it worked in chrome and not in firefox, I guess chrome is smarter sometimes :smiley:

1 Like
6

Thank you for doing that. It works! :grin:

7

Hey @Pakic ,

P5.js scripts are not running on any of my websites. P5.js was working perfectly fine on this website that you helped me troubleshoot last time, but now its not.

This issue seems to have occurred around the same time the Divhunt Builder UI changed.

Please resolve. Thanks.

1 Like