P5 Canvas in markdown¶

Om p5 sketches te integreren in mkdocs gegenereerde pagina’s zal eerst de p5 library moeten worden geladen. Deze kan worden gedownload via de download pagina op de p5js.org site. Plaats deze files in een folder in de docs folder, bijvoorbeeld /docs/js. In de mkdocs.yml file zoren de volgende regels ervoor dat deze library nu voor iedere pagina wordt geladen:

extra_javascript:
  - js/p5.min.js
  - js/p5.sound.js

Om het resultaat van p5 code in het juiste deel van je pagina te laten verschijnen, moet deze in code verbonden worden met het juiste html element. Hier is een voorbeeld waarin ik het programma helix.js draai in een <div> element. Het element kan worden teruggevinden in de code door deze een herkenbaar id te geven, bijvoorbeeld <div id="helix">.

Aan je markdown voeg je toe:

<div id="helix"><script src="../helix.js"></script></div>

Tijdens het builden maakt mkdocs van een markdown bestand een folder, vandaar dat het p5 bestand zich één niveau onder de huidige markdown pagina bevindt. Dus src="../helix.js" in plaats van src="../helix.js".

In de p5-code moet je er voor zorgen dat het p5-canvas in deze <div> verschijnt:

function setup() {
    canvas = createCanvas(400, 300);
    canvas.parent('helix');
    // ...
    // ...
}

UI elementen¶

P5 programmas kunnen in andere delen van de pagina UI elementen tonen die gekoppeld zijn aan het programma. Met een <div> kan je aangeven waar de ui elementen moeten staan. Bijvoorbeeld <div id="ui"></div>.

De volgende code voegt bijvoorbeeld een slider toe:

ui = select('#ui');
createSpan('r0:').parent('ui'); //(1)
r0Slider = createSlider(0, 255, 50).parent(ui);

1. de <span> zorgt ervoor dat de slider en de tekst horizontaal zijn uitgelijnd

Meerdere canvassen¶

Meerdere canvassen lijkt mogelijk met instance mode. Dit vereist uitgebreidere javascript kennis (closures). Zie uitleg en voorbeeld hier.