CrowlKit - Processing/P5

P5.js en Processingzijn beide creatieve programmeertalen ontworpen voor visuele kunstenaars, ontwerpers en beginners om op een gemakkelijke manier interactieve grafische toepassingen te maken, zoals animaties, visualisaties en games. Processing is een op Java-gebaseerde taal en ontwikkelomgeving die werd gemaakt voor visuele kunstenaars om snel prototypes te maken. Het heeft een eigen editor en is speciaal ontworpen voor eenvoudig grafisch programmeren, met veel ingebouwde functies om tekeningen, animaties en interactieve projecten te maken.

P5.js is een JavaScript-bibliotheek die is gebaseerd op Processing, maar bedoeld is voor gebruik op het web. Het werkt in de browser en maakt gebruik van HTML5 Canvas om grafische elementen te tekenen. Hierdoor kan het gemakkelijk worden gedeeld en bekeken op webpagina's, zonder dat een aparte editor of installatie nodig is.

Het grootste verschilis dat Processing op Java draait en meestal als een standalone toepassing wordt gebruikt, terwijl P5.js in de browser draait en direct werkt met webtechnologieën zoals HTML en CSS.

Met P5.js kan je interactieve visualisaties toevoegen aan je webpagina. Het is echter moeilijk om meerdere P5/Processing-sketches aan één app toe te voegen. Met CrowlKit is het eenvoudig om meerdere Processing-sketches aan één pagina toe te voegen. Het vraagt echter hier en daar een kleine aanpassing aan de code. 

Libraries toevoegen

Voeg de volgende libraries toe aan de head van je document als die nog niet aanwezig zijn:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.processing.js"></script>
<script src="https://cdn.publihub.media/lib/app.js"></script>
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">

draw() en setup()

Een processing/P5-sketch vraagt om een draw()- en een setup()-functie. Wil je meerdere sketches aan één pagina toevoegen, dan lukt dit vaak niet omdat je maar één keer een functie met eenzelfde naam kan toevoegen aan één pagina.  Vermits elke P5-sketch een draw()- en setup()-functie nodig heeft, kan je slechts één keer in één en dezelfde pagina/app die functie oproepen.

CrowlKit lost dit eenvoudig op. Bovendien kunnen meerdere sketches met elkaar communiceren én ook data uitwisselen met andere CrowlKit-elementen. 

Neem de onderstaande P5-code als voorbeeld: 

function setup() {
    resizeCanvas(900, 500);
    background(150, 200, 250);
}

function draw() {
    var k = kleur.value;
    fill(k);
    noStroke();
    if(mouseIsPressed){
        ellipse(mouseX, mouseY, 50, 50);
    }
}

In CrowlKit kan je dit oplossen door de functies te herbenoemen:

function setup1(p) {
    p.resizeCanvas(900, 500);
    p.background(150, 200, 250);
}

function draw1(p) {
    var k = kleur.value;
    p.fill(k);
    p.noStroke();
    if(p.mouseIsPressed){
        p.ellipse(p.mouseX, p.mouseY, 50, 50);
    }
}

Je merkt ook dat je voor typische processing-functies "p." moet plaatsen. Bij de functienaam setup() en draw() voeg je nu de parameter "p" toe in deze vorm: setup(p) en draw(p).

Nu kan je deze zelf benoemde functies toevoegen aan een echte Processing-sketch.

new Processing("p5-container", {
    setup: setup1,
    draw: draw1
});

Wil je nog een andere sketch toevoegen, dan kan je de volgende draw()- en setup()-functie eenvoudigweg een nieuwe naam geven vb. draw2() of mijnTekenFunctie().

Let wel op! De eerste parameter die je meegeeft is de plaats in je pagina waar je de sketch wil tonen. In het bovenstaande voorbeeld is dat p5-container. Dit betekent dat er in je app/pagina een element met id "p5-container" moet staan.

<app-part id="p5-container"></app-part>

Andere functies doorgeven

P5 kent ook andere functies die je eveneens kan doorgeven:

  • setup
  • draw
  • keyPressed 
  • keyReleased
  • mousePressed
  • mouseReleased
  • mouseMoved
  • mouseDragged 
  • windowResized
  • touchStarted
  • touchEnded

In dat geval geef je de functies op een gelijkaardige manier door:

new Processing("p5-container", {
    setup: setup1,
    draw: draw1,
    keyPressed: keypressed1
});

Voorbeeld

Demo:  https://cdn.publihub.media/demos/app/p5.html
Of open de broncode:  https://cdn.publihub.media/viewsource/?url=https%3A%2F%2Fcdn.publihub.media%2Fdemos%2Fapp%2Fp5.html 

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P5.js Sketch met Configuratie-object</title>
    <!-- P5.js CDN link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdn.publihub.media/lib/crowl.processing.js"></script>
    <script src="https://cdn.publihub.media/lib/app.js"></script>
    <link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">
</head>
<body>
    <app-part id="p5-container"></app-part>
    <input type="color" id="kleur" value="black"/>
    <script>
        
        // Voorbeeld callbacks
        function setup1(p) {
            p.resizeCanvas(900, 500);
            p.background(150, 200, 250);
        }

        function draw1(p) {
            var k = kleur.value;
            p.fill(k);
            p.noStroke();
            if(p.mouseIsPressed){
                p.ellipse(p.mouseX, p.mouseY, 50, 50);
            }
        }

        function keypressed1(p) {
            if(p.key === ' ') {
                p.background(255);
            }
        }

        new Processing("p5-container", {
            setup: setup1,
            draw: draw1,
            keyPressed: keypressed1
        });
    </script>
</body>
</html>
Volgende pagina