Issues with P5.js not working in certain browsers

agaukst

Hi! I've already asked for help in a previous post, but realized it was six months old so thought it best to maybe make a new post as well.

I am playing with P5.js and would love to have this on my website. I found another forum post on here with a guide on how to get P5.js sketches to work with Lay Theme, and the tutorial worked great - for Chrome. All other browsers I try wont show the sketch/JS at all, just a blank page. The guide was made by a user named Debutdebut, and he linked his website that had a P5.js sketch on the frontpage: ja-kob.ch. This website loads the sketch in Firefox, Edge and Safari.

Here is the link to the tutorial, and I'll provide all my code and troubleshooting as well from my previous post:

Sketch.js:

let radi;
let ang;
let bgc, bleck;
let eyclr;
let eydist;
let blinkbool;
var cnv;

function setup() {
	let browser = false;

	if(browser){
		cnv = createCanvas(windowWidth, windowHeight);
		cnv.position(0, 0);
		cnv.parent('sketch-holder');
	}
	else{
		createCanvas(windowWidth, windowHeight);
	}



	angleMode(DEGREES);
	colorMode(HSB);

	eyclr = random(1, 360);
	bgc = 100;
	bleck = 10;
	radi = height/8;
	eydist = width/16;
	blinkbool = false;




}

function draw() {
	background(bgc);
	rightEye = new Eye(width/2 + eydist, height/2, radi);
	leftEye = new Eye(width/2 - eydist, height/2, radi);
	push();
	fill(0, 0, bleck);
	noStroke();
	ellipse(width/2, height/2, radi*5, radi*3);
	pop();

	if(mouseIsPressed){
		rightEye.blink();
		leftEye.blink();
	}
	else{
		rightEye.draw();
		leftEye.draw();
	}
}

function Eye(x, y){
	this.x = x;
	this.y = y;
	this.d = radi;
	this.distance = 0;
	this.angle = 0;

	this.blink = function(){
		push();
		strokeWeight(3);
		stroke(0, 0, bleck);
		fill(bgc);
		ellipse(this.x, this.y, this.d);
		pop();
		push();
		noFill();
		stroke(0, 0, bleck);

		//line(this.x-radi/2, this.y, this.x + radi/2, this.y);
		arc(this.x, this.y-radi/4, radi*1.3, radi*0.8, 0, 180);
		pop();
	}

	this.draw = function(){
		stroke(0, 0, bleck);
		strokeWeight(3);
		fill(bgc);
		ellipse(this.x, this.y, this.d);
		push();
		noStroke();
		fill(eyclr, 50, 50);
		this.distance = constrain(int(dist(this.x, this.y, mouseX, mouseY)), 0, height);
		this.eyePos = map(this.d / 3, 0, 2000, 0, this.distance);
		this.angle = atan2(mouseY - this.y, mouseX - this.x);
		translate(this.x, this.y);
		rotate(this.angle);
		ellipse(this.eyePos, 0, this.d/2);
		pop();
		push();
		noStroke();
		fill(0, 0, bleck);
		this.distance = constrain(int(dist(this.x, this.y, mouseX, mouseY)), 0, height);
		this.eyePos = map(this.d, 0, 10000, 0, this.distance);
		this.angle = atan2(mouseY - this.y, mouseX - this.x);
		translate(this.x, this.y);
		rotate(this.angle);
		ellipse(this.eyePos/0.4, 0, this.d/5);
		pop();

	}
}

function windowResized(){
	resizeCanvas(windowWidth, windowHeight);

	radi = height/8;
	eydist = width/12;


	rightEye = new Eye(width/2 - radi, height/2, radi);
	leftEye = new Eye(width/2 + radi, height/2, radi);
}

function mouseClicked(){
	eyclr = random(1, 360);
}

Index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eyes</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

Lay Theme Custom CSS & HTML:

Custom CSS for Desktop Version:

#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://myurl/wp-content/assets/libraries/p5.js"></script>
<script src="https://myurl/wp-content/assets/libraries/p5.dom.js"></script>
<script src="https://myurl/wp-content/assets/libraries/p5.sound.js"></script>

<script>
    if (jQuery(window).width() > 600) {
  jQuery.getScript( "https://myurl/wp-content/assets/sketch.js", function( data, textStatus, jqxhr ) {
    console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.log( "Load was performed." );
  }); 
}
</script>

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  if(obj.slug == "home"){
    jQuery('#sketch-holder').show();
    } else {
     jQuery('#sketch-holder').hide();
     console.log( "Hide");
  }
});
</script>

Custom HTML at top:

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

Cheers,
August :--)

mariusjopen

Dear @agaukst
ah sweet! Very kind!!

Best!

Marius

bennno

This post is deleted!

arminunruh

do u have a link?

try just using a normal script tag instead of using
jQuery.getScript(

then maybe try doing

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  if(jQuery("body").hasClass("slug-test")){
    jQuery('#sketch-holder').show();
    } else {
     jQuery('#sketch-holder').hide();
     console.log( "Hide");
  }
});

instead

do u see any errors in the console?

or maybe try to insert your code inside sketch.js inside a a <script></script> tag
idk

what is inside sketch.js

i cant really inspect this further without a link

bennno

This post is deleted!

arminunruh

try this.

put all of the code u have in "custom <head> content"
into "custom html at bottom" instead!

if (jQuery(window).width() > 600) {

replace this code with this:

if (window.innerWidth > 600) {

also realize that whenever some of your js code doesn't work without showing any errors, you need to use console.log("hi") and put console logs into different parts of the code just to see if that code is even called or reached. its just simple debugging u know

if that wont work:

or maybe try to insert your code inside sketch.js inside a a <script></script> tag

did you do this?
dont do


  jQuery.getScript( "https://bennobrucksch.com/wp-content/assets/libraries/sketch.js", function( data, textStatus, jqxhr ) {

but instead use a normal html <script tag to include the script
inside html at bottom

does the sketch work on a website that is not a lay theme website?
does that work on safari?

the sketch holder div doesn't contain any canvas element in safari:

Screenshot 2024-03-23 at 07.30.58.png

can u try to make this work without using lay theme

arminunruh

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  if(jQuery("body").hasClass("slug-test")){
    jQuery('#sketch-holder').show();
    } else {
     jQuery('#sketch-holder').hide();
     console.log( "Hide");
  }
});

also u dont need to use this code, instead show/hide ur div using css

#sketch-holder{
display: none;
}
body.slug-test #sketch-holder{
display: block!important;
}

bennno

@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
}

arminunruh

very good! i think you did it very well

Lay Theme Forum

Issues with P5.js not working in certain browsers

Before you post:

When you post:

Online Users