Embedding a javascript simulation that uses the p5 library and a custom script

Hi, 

I am trying to add a simulation to my website. I have everything running with javascript and an index.html on my local workspace, but am wondering how to place it in an online page. I have tried using code injection, but have failed miserably.

I am using the p5.js library for visualization and a local script called Boids-2D .

Does anyone know where and how to put this? Sorry if it is super easy, but I am very new to web development. 

Thanks!

This is my local index.html code

Ok, so I have figured it mostly out. But I am still getting some issues.

The remaining issue is that my window is in the wrong place and it is just above the footer, while it should be sandwiched between two texts, where the code block is.

I have injected into a code block this as html:

Hi, did you have to reference the p5js library somehow? I want to use a sketch that I made in p5js web editor and put it on the home screen of my SquareSpace website. Do I just use a code block? 

Howdy. 

I found an excellent reference that helps resolve this. (I'm working on a member's area I'll update with a live example soon).

Steps

1. insert a HTML block with a <div id="some-label">  where you want your canvas to appear

2. augment your p5.js code (presumably in another nearby block) per the link below. e.g. add a .parent("some-label"); attribute to whatever you called your canvas.

Specifically go to the section on "Relocating the canvas"

https://github.com/processing/p5.js/wiki/Positioning-your-canvas

Live example to come. Good luck!

Sean

On 2/22/2022 at 1:52 PM, TheLatentSpace said:

Hi, did you have to reference the p5js library somehow? I want to use a sketch that I made in p5js web editor and put it on the home screen of my SquareSpace website. Do I just use a code block? 

Yeah. Two steps.

Step 1. You need to copy his block and insert it in the header "injection" area. You can do that with that particle page's "Settings > Advanced > Page header code injection".

Copy the <script src="library-url-reference-here"></script> tags into that area.

Step 2. Insert the "<script> // code </script>" directly in an HTML code block on your page.  I know it's Java script but keep it as an HTML block in this fashion. Also make sure you turn off "Display source code".

Optional Step 3. see my comment viz. positioning.