Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Processing P5.js — Java Script Mode

Processing P5.js — Java Script Mode

Scheduled Pinned Locked Moved General Discussion
8 Posts 3 Posters 1.1k Views
  • 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 Offline
    M Offline
    melo_lenosier
    wrote on last edited by
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • M Offline
        M Offline
        melo_lenosier
        wrote on last edited by
        #3

        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
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          • M Offline
            M Offline
            melo_lenosier
            wrote on last edited by
            #5

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Hi Melo,

              I will ask Armin about this.

              Will let you know asap.

              All the best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • M Offline
                M Offline
                melo_lenosier
                wrote on last edited by
                #7

                Thank you for your help!
                Let me know :)

                1 Reply Last reply
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  💿 Email me here: 💿
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. 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:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                  laytheme.com
                  • Login

                  • Don't have an account? Register

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search