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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2D Boids</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script type="text/javascript" src="Boids-2D.js"></script>
</head>
<body></body>
</html>
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:
<body>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2D Boids</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script>
// HERE I PASTED MY SUPER LONG SCRIPT
</script>
</body>
gmo got a reaction from Beyondspace in Embedding a javascript simulation that uses the p5 library and a custom script
