Place a P5.js sketch within an Adobe Muse website

CharlesDesign

Hi All,

Despite having had a look around it seems this question remains unanswered. Which is a shame as this would make for a great combination for designers to make useful and interactive websites.

Ideally, the sketch would be made fully responsive by being placed inside a window created in Adobe Muse. I assume this process would involve exporting the website as HTML and then calling the sketch in the index.html.

If anyone has a better idea on how this can be done, please feel free to share. All my attempts have been unsuccessful.

Thanks :) Charles

Ps: I've also asked this question on the Muse forum with no luck.

blindfish

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

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

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

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

CharlesDesign

@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

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

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