Place a P5.js sketch within an Adobe Muse website

Answers

• blindfish

  December 2016

  Not being a designer Adobe Muse looks excessively restrictive to me: just another ploy to lure people into paying subscription fees :/

  Needless to say doing anything 'non-standard' - like embedding all the dependencies and code for a p5 sketch - looks far more complex than doing it via standard HTML. From what I can see in the docs the MuCow wigets might be one option; but, rather than a simple way of adding custom content, that looks very much like a mechanism to enable developers like me to make money out of non-techie designers :P

  TBH if you're willing to take the time to learn coding p5 then you're better off implementing your own website too ;)
• jeremydouglass

  December 2016

  While I have no particular experience with Adobe Muse, searching "javascript in adobe muse" suggests that you can embed javascript (such as p5.js javascript?) like this:

  1. right click on your page
  2. choose page properties
  3. choose metadata
  4. add javascript in head section ... or choose object and then insert html you can right click that object and choose edit html and (re)write code.

  http://stackoverflow.com/questions/38583017/integrating-javascript-functions-to-the-html-file-generated-from-adobe-muse

  See also this tutorial video:

  
• wasdswag

  June 2017 edited June 2017 Answer ✓

  Maybe it's not a best way to reach this, but in my own experience simplest solution was to upload sketch.js and a standart .html file from p5.js that contains links to sketch and all depended libraries on my host and then use it in Adobe Muse by inserting as custom HTML within iframe tag something like that:

  <iframe src="http://yourwebsite.com/myscript.html" width="740px" height="740px" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

  and it's works just fine.

  other way i've tryed to use is to paste links to depended libraries under page properties in metadata tab under HTML for head section:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
  

  and then paste a sketch.js code as custom HTML on page in Muse like that:

  <script>
  your code here
  </script>
  

  it's also works, but in this case you cannot freely move and arrange your sketch position on page layout without editing muse's css files and etc, so this way seems too tricky for me
• CharlesDesign

  June 2017

  Thanks for sharing this @wasdswag, I'll give it a go!
• CharlesDesign

  August 2017

  @wasdswag I'm having a hard time implementing your solution.

  How can I achieve a full-width sketch? Does the iframe dimensions override the sketch's size?
• CharlesDesign

  August 2017 edited August 2017

  Ok I seem to have found the solution:

  First insert Html: <iframe src="http://yourwebsite.com/myscript.html"></iframe>

  Then insert some css in Page>Page Properties:

  Add for full background:

  <style> iframe { position: fixed; background: #000; border: none; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } </style>

  Add this to match size of frame:

  <style iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; } </style>
• wasdswag

  August 2017

  @CharlesDesign cool! now i'll use it if sometime i'll need to embed sketch in fullsize :) thank you