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

Lay Theme Forum

Issues with P5.js not working in certain browsers

Before you post:

Online Users