inleiding p5.js.
 
p5.js is een javascript voor creatieve coders waarbij de code voldoet aan de javascript ES6 afspraken

Met p5.js en extra libs zijn zeer veel voor het internet geschikte animaties te maken. er is ook een p5.js live webeditor beschikbaar

 

Schetsen gemaakt met p5.js

  planeet en roterende maan    
  sterren en draaiende planeten    
       

 

OOP schetsen die gebruik maken van de superclass  "Vormen"

OOP Bezier curven schetsen  die gebruik maken van de superclass "Curven"

 
 
 pde    p5.js
 void setup();    function setup();
 void draw();    function draw();
 background(#E6FBFF);    background('#E6FBFF');
 size();    ceateCanvas();
 fullScreen();    createCanvas(windowWidth, 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.

         3) hexadecimal code als argument in de colorfunctie kan je niet combineren met alfa,

             dus color('#34A582',100); mag niet, wel mag color(52,165,130,100);

Met onderstaande functie past de animatie zich aan, aan de scherm afmetingen.

function windowResize() {

     resizeCanvas(windowWidth, windowHeight);

}

 

index.html script voor p5.js

belangrijk:  volgorde van de javascripts in index.html

1) het p5.js script
2) het sketch.js script
3) het superclass.js script  (hier vormen.js)
4) de subclasses.js scripts  (hier ruitjes.js en rechthoek.js)
 
 

<!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>
    <script language="javascript" type="text/javascript" src="../classes/vormen.js"></script>
    <script language="javascript" type="text/javascript" src="../classes/ruitjes.js"></script>
    <script language="javascript" type="text/javascript" src="../classes/rechthoek.js"></script> 
    <style> body {padding: 0; margin: 0;} </style> 
  </head> 
  <body> 
 
  </body>
</html>