Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Processing P5.js — Java Script Mode

    General Discussion
    3
    8
    887
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      melo_lenosier last edited by

      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

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • M
          melo_lenosier last edited by

          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...

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            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

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • M
              melo_lenosier last edited by

              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! :)

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Hi Melo,

                I will ask Armin about this.

                Will let you know asap.

                All the best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • M
                  melo_lenosier last edited by

                  Thank you for your help!
                  Let me know :)

                  1 Reply Last reply Reply Quote 0
                  • arminunruh
                    arminunruh Global Moderator last edited by

                    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/

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post

                    I don't answer or check forum DMs, please just post on the forum.

                    Try this to fix issues before you post:

                    Use the Search Feature. Maybe there is already a solution to your issue.

                    1. Update Lay Theme and all Lay Theme Addons
                    2. Disable all Plugins
                    3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                    4. Now see if your problem solved itself
                    5. Go here, see if your problem is listed here:
                    Troubleshooting

                    When you post:
                    1. Post a link to where the problem is
                    2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                    Thanks!

                    Online Users

                    Recent Topics

                    • M

                      Tag filter / Maximum width

                    • open all links in a thumbnail grid in a new tab

                    • text underline

                    • centred Carousel fixed width and proportions

                    laytheme.com