p5.js-widget

Utilizzando il widget puoi includere nella stessa pagina web sia il codice p5.js che il risultato dell’esecuzione

https://toolness.github.io/p5.js-widget/

Sintassi

1. Includi il modulo Javascript nella pagina

   <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>

2. Scrivi il codice da eseguire nella stessa pagina all’interno di un altro tag script con l’attributo type="text/p5"

   <script type="text/p5"> ... </script>

3. L’altezza automatica della finestra è 300px; per adattarla alla dimensione dell’applicazione si usa l’attributo data-height="..." (aggiungi 100px per la cornice: 400+100=500)

   <script type="text/p5" data-height="500"> ... </script>

4. La larghezza automatica dell’applicazione è 150px; per adattarla alla dimensione dell’applicazione si usa l’attributo data-preview-width="..." (aggiungi 20px per la cornice: 400+20=420)

   <script type="text/p5" data-preview-width="420"> ... </script>
   

5. Il codice viene eseguito automaticamente se è presente l’attributo data-autoplay

   <script type="text/p5" data-autoplay> ... </script>

WordPress

1. Includi tutto nel tag pre per evitare conflitti con il codice

   <pre><script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
   <script type="text/p5" ... > ... </script></pre>

2. L’operatore && nel codice viene trasformato in &&
   Soluzione provvisoria: aggiungi all’inizio e alla fine del codice le sequenze per i commenti HTML <!-- e //-->.