Processing P5.js — Java Script Mode

melo_lenosier

Hi everybody,
First of all I want to premise that I am not an expert in this field.
What I would like to do is inert a Processing sketch into a project of my website (which I am doing locally).
I am very confused, because there are several plugins that should help you to do it but none is working for me.
After two days of activate and deactivate plugins, I randomly(?!) managed to work one of my sketch but just for the home page. Why? Because I've put the scripts that recall the library and the one that read the sketch in the Custom <head> content; specifically these two scripts:
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
<script src="pcinque.js"></script>

If I put them in a post of a project it doesn't work. Nothing appears.
I followed this guide.
I know that I probably missing something...
Is there anybody who has already worked with p5.js?

Thanks in advance! :)
M.L.

p.s. if you need it for some test here you have my test sketch

mariusjopen

Hi Melo,

it is not that easy to embed other Javascript libraries to Laytheme.

Laytheme is a single page website. Have a look here:
http://laytheme.com/documentation.html#custom-javascript

Is there a link which displays the sketch already in a browser online and using the new library?

Best!

Marius

melo_lenosier

Hi Melo,
thanks for answering. Not sure what 'single page website' is...

Btw right now the sketch is not uploaded on a web page yet, but if you download the folder you can see that there is an index.html that recalls the library and the js contained inside.
Don't know if you meant that...

mariusjopen

Hi Melo,

a single page website means that the page does not really reload. Not even when you click on a link. Content gets just hidden and shown. But there is no real reload of the page. Many Javascripts use functions which are getting called when the page reloads. But since Laytheme never reloads a page the functions does not work.

This is why you have to call functions like here:
http://laytheme.com/documentation.html#custom-javascript

You want that program displayed only when you enter the page?

Best!

Marius

melo_lenosier

Hello Marius,
thanks for the answer, very clear.
As far I understood it's possible to insert a custom js with these 2 laytheme events called "newpage" and "newpageshown". From the examples it seems that you have to paste the js code directly, and I was wondering if is it possibile to include a url call for a js library?

Anyway yes, I would like to implement a processing sketch, as I do for texts and images in the gridder, in whatever it will be: a page, project or the home page.

Thanks again! :)

mariusjopen

Hi Melo,

I will ask Armin about this.

Will let you know asap.

All the best!

Marius

melo_lenosier

Thank you for your help!
Let me know :)

arminunruh

Hey!

Ok, so put this in "lay options" -> "custom css & html" -> "Custom <head> content"

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
console.log(obj)
});
</script>

Go to the page where you want to run your javascript and open the console:
https://developers.google.com/web/tools/chrome-devtools/console/#opening_the_console

You will see a js object like that:
0_1499868878005_Screen Shot 2017-07-12 at 16.14.05.png

So in my example I can say

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "test-2"){
//do javascript here
}
});
</script>

Ok this is just to execute javascript for specific pages. I'm really not sure if that will make it work with processing. Have you tried this processing js too? http://processingjs.org/learning/