P5js in Laytheme

debutdebut

Hi everyone!

I've seen a few people asking about P5js sketches in Laytheme. We recently did a project like that and wanted to share our findings on this with you.

Here is the project: https://ja-kob.ch/

I had two goals:

Show the sketch only on one specific site
Make the sketch responive (full width / auto height)

Here is my current solution:

I stored the library files in a folder assets in wp-content (probably theres a better place for this?) and implemented them in Lay Options -> Custom CSS & HTML -> Custom <head> content like this:

<script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.js"></script>
<script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.dom.js"></script>
<script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.sound.js"></script>

I created an empty div with an ID of sketch-holder in Lay Options -> Custom CSS & HTML -> Custom HTML at top. I later place the sketch canvas inside it to have better control.

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

To place the sketch canvas into this div I gave the canvas a parent element in sketch.js like so:

function setup() {
	var cnv = createCanvas(1998, 1080); 
	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
}

To make the sketch responsive I added the following code to Lay Options -> Custom CSS & HTML -> Custom CSS for Desktop Version

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

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

Ok, now comes the fun part. Somehow the sketch.js broke all the functions of the mobile navigation. I haven't found a solution for this and decided to only use the sketch on desktop sizes and instead using a static image for the mobile version. I used the following code to load the sketch.js file only when the window width was greater than the breakpoint for mobile:

if (jQuery(window).width() > 600) {
  jQuery.getScript( "https://yoururl/wordpress/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." );
  }); 
}

Last but not least I only wanted to show the sketch on a single page. I used a piece of code from the Laytheme docs to determine the page (since Laytheme isn't really realoading from page to page as far as I understood):

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  if(obj.slug == "ja-kob"){
    jQuery('#sketch-holder').show();
    } else {
     jQuery('#sketch-holder').hide();
  }
});

It's very important to hide the #sketch-holder (meaning your sketch) if you don't want to show it. Because the sketch.js file creates a default canvas element on every page no matter what. Even if you placed the actual sketch inside a parent element. This default element remains empty but still takes up space at the bottom of every page, underneath the footer. This is because it's using visibility: hidden (instead of display: none.) I didn't managed to trigger a css class with JQuery so I ended up using it's built in function hide/show.

Probably there is a way better way to achive this. But I wanted to share it anyway for the public discussion. If you see some bugs of the site, let me know. Also if you have found other ways to use P5js inside Laytheme. :-)

Cheers'
Max

kanouu1

Hi @debutdebut ,

Thank you for this tutorial, it work pretty well to me.

There is one thing I don't understand, how do you call precisely a page? Cause the sketch it appears on all my website pages. And also, is it possible to call the sketch as an image (or text) element? I mean to be able to place it on the grid as a regular object.

Thank you!
Nina

edgrbnz

@debutdebut that site is 🔥

mariusjopen

Dear @debutdebut
wow! Thank you so much for sharing this! I am sure many people will learn from it!
I keep it in my notes, in case someone has a question of how to use processing with LayTheme!

Best!

Marius

debutdebut

hey @kanouu1

Glad to hear that it worked out for you. In order to only use the sketch on a particular "site" you have to show & hide it. This is because Laytheme is built as a "Single Page" Javascript applications (see here).

Therefore I used the following code to determine my "current page":

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  if(obj.slug == "ja-kob"){
    jQuery('#sketch-holder').show();
    } else {
     jQuery('#sketch-holder').hide();
  }
});

What you have to replace is obj.slug == "ja-kob" to meet your specific website. Meaning ja-kob becomes your specific slug. The slug is the last part of the url, like so: www.mywebsite.com/myslug.

I hope this helps!

Cheers

mariusjopen

Dear @debutdebut
very good answer!

Thank you!

Marius

agaukst

Sorry for necroing, but thought it'd be better to ask here since I've been following this exact tutorial.

Hey @debutdebut - thanks for the great tutorial! I love interactive websites and I'm looking to spice my portfolio site up a bit with P5.js.

By following this guide I have been able to get my sketches to show up and working well in Google Chrome, but none of them work in either Firefox or Edge, and I can't for the life of me figure out why. I see that your site ja-kob.ch works fine in all three of these browsers.

I'll provide the code for my sketch, index.html and screenshots of my setup in Custom CSS & HTML in Lay Theme, let me know if I have done anything wrong that would break my sketch in other browsers than Chrome.

Sketch.js:

var cnv;
var ey;

function setup() {
	cnv = createCanvas(windowWidth, windowHeight);
	//createCanvas(windowWidth, windowHeight);
	colorMode(HSB, 360, 100, 100, 100);
	angleMode(DEGREES);
	cnv.position(0, 0);
	cnv.parent('sketch-holder');

	ey = {
		x: width/2,
		y: height,
		rad: width/3,
	};


}

function draw() {
	background(0, 0, 15);

	var ang = atan2(mouseY - ey.x, mouseX - ey.x);

	noStroke();
	fill(0, 0, 100);
	ellipse(ey.x, ey.y, ey.rad);
	fill(340, 50, 90);
	ellipse(ey.x + (ey.x / 4) * cos(ang), ey.y + (ey.y / 4.5) * sin(ang), ey.rad / 3.3);
	sin(ang), ey.rad;
	fill(0, 0, 15);
	ellipse(ey.x + (ey.x / 3.8) * cos(ang), ey.y + (ey.y / 4) * sin(ang), ey.rad / 6);
	sin(ang), ey.rad;
	fill(0, 0, 100);
	ellipse(ey.x + (ey.x / 3.2) * cos(ang), ey.y + (ey.y / 3.6) * sin(ang), ey.rad / 16);
	sin(ang), ey.rad/2;

}

function windowResized(){
	resizeCanvas(windowWidth, windowHeight);
	ey.x = width/2;
	ey.y = height;
	ey.rad = width/3;
}

Index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BigEye</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="libraries/p5.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>
    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="bigeye.js" type="text/javascript"></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/bigeye.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 :--)

arminunruh

good luck!

lena...weber

This post is deleted!

lena...weber

Hello everybody,
I have also been following the tutorial @debutdebut
My Libraries and sketch.js load fine but the .ttf font file (stored in assets also) called by sketch.js can't be found. (console says "Load was performed." )

The sketch isn't displayed at all, even when I comment out everything in my sketch related to my specific font (i thought there would be a standard font displayed instead like in the p5.js editor)
I also tried choosing a path of a font i had already installed as a Webfont in Laytheme, but the problem remained the same.
All I see is "Loading..." at the bottom of my sketch
I can't figure out the problem.
Does somebody know what could be the issue here?
Beginners-Greetings :)
Lena

mariusjopen

Dear @lena-weber
yes. I hope someone can help!

Best!

Marius

cgvdv_bk

Hey There,
i'm sorry if this is a stupid question – my Programming Skills are very basic...

With the code provided by the p5.js Web-Editor, I embedded a sketch via <iframe> on my Website http://homeoffice.kroenker.com

<iframe src="https://editor.p5js.org/cgvdv_bk/embed/-zDedzX57" style="position: fixed; width: 100%; height: 100%; border: none"></iframe>

Naturally i can't place anything onto the <iframe> Element... But is there any "easy" possibility (especially in Laytheme) to nest the <iframe> element into the Background?

Best,
Bernd

arminunruh

yea you can put the iframe in lay options -> custom css & html -> custom html in footer
for example

and then make the background transparent so your background iframe is shown (put this in some css field)

#grid, .cover-region-desktop .cover-inner{ background!transparent!important; }

cgvdv_bk

@arminunruh Thanks, i'll give it a try!

debutdebut

dear @lena-weber, from your description I suppose that the path to your font is wrong. I good place to start is by opening the developer console of your browser. Usually, p5js tells you there if something is wrong with your path.

Hope this helps! ✌️

mariusjopen

Dear @debutdebut
Thank you for helping!
We appreciate the time people take to make the LayTheme community stronger.
Best!
Marius

wrongstudio

i followed this but seems like if i come back i need to do a hard refresh or else nothing shows up.

wrongstudio

@wrongstudio I just added:

jQuery.ajaxSetup({cache:true});

and that seemed to do it.

Lay Theme Forum

P5js in Laytheme

Before you post:

When you post:

Online Users