P5js in Laytheme

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