p5.js demo af indlejring kode

Hvad sker der her?

Denne fil viser hvordan man kan indlejre en p5.js fil i html.

Link til p5 (se forneden for linket).

Lav en container box (fx en div eller section).

Denne box kan du layoute som du plejer med flex eller float osv.

Indlejring

Indeni denne box, skal der være en ny div med en ID - i dette eksempel id="c1". Det er her p5 spillet skal være.

Link til p5.js filen i bunden af <body> - i dette eksempel "sketch5.js".

I p5.js filen skriver du canvas.parent('#c1');

Se forneden for kode eksempler

Demo:

NB: ikke responsive

html fil kode:


<body>
...
<div id="c1"> </div>   <--den div p5 filen skal bo i
...
LINK TIL P5:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"> </script>
<script src="sketch.js"> </script>   <--JERES P5 FIL
</body>

p5 fil kode:


function setup() {
  var canvas=createCanvas(1200, 900);
  canvas.parent('#c1');     <--DEN AFGØRENDE LINK!
} 
...
//kode for p5 projektet ..