Lay Theme Forum

@arminunruh thanks a lot for your help. To be honest, it was a combination of your posts and some back and forth with chatGPT that finally solved the problem. I'm trying to cover everything in this post to help anyone who wants to do the same. Please keep in mind, that this is only, what works for me and hopefully for everyone else. But probably there are much more beautifull ways to code this.

Aim: I wanted to use P5.js in the background of my frontpage, which is responsive to the mouse movement. Since laythem basically runs as a one-page-website I had to write a code whiche hides the script in each 'page' on the website, where I don`t want to have it. The biggest problem for a long time was, that the P5.js sccipt only worked in Google Chrome. In the end I also was able to fix this. If you are interested in the result you can find the link to my website in my profile. Her is my code:

Custom CSS

#sketch-holder {
  margin: 0;
  padding: 0;
  width: 100%;
}

#sketch-holder canvas {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

Custom Head Content

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>

<script>
if (window.innerWidth > 600) {
  var script = document.createElement('script');
  script.src = "https://yourwebsite.com/wp-content/assets/libraries/sketch01.js";
  document.head.appendChild(script);
}   else {
  var script = document.createElement('script');
  script.src = "https://yourwebsite.com/wp-content/assets/mobile/sketch02.js";
  document.head.appendChild(script);
}   

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  var sketchHolder = document.getElementById('sketch-holder');
  if (obj.slug == "frontpage") {
    sketchHolder.style.display = "block";
  } else {
    sketchHolder.style.display = "none";
    console.log("Hide");
  }
});
</script>

Here I decided, that with a sreen width less than 600px a different script is running (which works on the phone because it does not use mousemovement).

Custom HTML at Top

<div id="sketch-holder"></div>

As suggested by @debutdebut I created a folder for the P5.Js Files (wp-content/assets/libraries/sketchXY.js) You have to add the following code within your sketch.js file

function setup() {
	var cnv = createCanvas (windowWidth, windowHeight);
	cnv.parent('sketch-holder'); // this is the id of the div
	cnv.position(0, 0); // this gives the sketch an absolute position in the top left corner
}