Issues with P5.js not working in certain browsers
-
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 :--) -
-
Hi, i ran into the same problem. I want to run a sketch.js in the background of my frontpage. It should be responsive to the mouse. All of this works in Chrome. But in every other browser it is not visible. Since other people also ran into this problem I wanted to ask if anyone came across the solution or can help me. Cheers, Benno
Here is my code:
Sketch.js:
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 } function draw() { background(255); // Refresh the background on each frame // Pass mouse coordinates to drawDot function drawDot(mouseX, mouseY); } function drawDot(x, y) { noStroke(); fill(255, 0, 0); // Red color for the dot ellipse(x, y, 10, 10); // Draw a dot at mouse position with diameter 10 pixels }
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 (jQuery(window).width() > 600) { jQuery.getScript( "https://bennobrucksch.com/wp-content/assets/libraries/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." ); jQuery.ajaxSetup({cache:true}); }); } </script> <script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ if(obj.slug == "test"){ jQuery('#sketch-holder').show(); } else { jQuery('#sketch-holder').hide(); console.log( "Hide"); } }); </script>
Custom HTML at top:
<div id="sketch-holder"></div>
-
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
idkwhat is inside sketch.js
i cant really inspect this further without a link
-
Hey @arminunruh first of all, thank you very much for your quick reply. I tried everything you suggested without getting it to work. The sketch.js file is a simple p5.js sketch, which I later wnat to replace with a more complex one.
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 } function draw() { background(255); // Refresh the background on each frame // Pass mouse coordinates to drawDot function drawDot(mouseX, mouseY); } function drawDot(x, y) { noStroke(); fill(255, 0, 0); // Red color for the dot ellipse(x, y, 10, 10); // Draw a dot at mouse position with diameter 10 pixels }
I want to run the script only on one specific page ("test"). Here is the link to the website: https://bennobrucksch.com/test/
In Chrome it works perfectly. In Firefox and Safari it does not. The console shows no error, instead it prints "Load was performed."
-
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 dojQuery.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 bottomdoes 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:
can u try to make this work without using lay theme
-
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; }
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it