header

Om processing pde schetsen op het internet te zetten moet de schets gebruik maken van een of meerdere javascripts

Er zijn 2 methoden (beide worden ondersteund door open processing)

    waarbij de pde code direct daait. Zie github voor het script met voorbeelden.
    De code is wat verouderd en werkt niet altijd in versie 3 van de processing ide.
    Processing.js wordt niet ondersteund door de processing foundation.
    De ontwikkeling van processing.js is gestart door John Resig maar hij is er mee gestopt .

    Resig houdt zich nu oa bezig met de ontwikkeling van een live javascript editor tbv Khan Academy.

    Nu moet de pde code wel omgezet worden omdat de code moet voldoen aan de javascript ES6 afspraken.
    Er is ook een p5.js live webeditor. tbv p5.js is een fors aantal libraries beschikbaar.
    Je kan hier het p5.js script als zip bestand downloaden
 
 
 pde    p5.js
 void setup();    function setup();
 void draw();    function draw();
 size();    ceateCanvas();
 fullScreen();    createCanvas(windoWidth, windowHeight);
 P3D of P2D    WEBGL
 pushMatrix();    push();
 popMatrix();    pop();

 

opm: 1)  In de WEBGL mode staat het 0,0 punt in het midden van het canvas.
 
         2) Variabelen in p5.js hebben geen type.
             Je gebruik voor float, int, double, long, char, String, Array etc in p5.js var let of const
             var, let en const zijn global als ze in het declaratie deel staan. Var heeft een functie scope.
             Let en const hebben een block scope.
 
Voorbeelden
 

Hier nog even het index.html script

 

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <script language="javascript" type="text/javascript" src="/../lib/p5.js"></script> 
    <script language="javascript" type="text/javascript" src="/sketch.js"></script> 
    <style> body {padding: 0; margin: 0;} </style> 
  </head> 
  <body> 
 
  </body>
</html>