planeet en roterende maan

 

 

 

sterren en draaiende planeten

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

mappenstructuur

 de mappenstructuur

 

 De schets met ruitjespapier als achtergrond, rechth[i].dpAan ingeschakeld

De schets met ruitjespapier als achtergrond, rechth[i].dpAan ingeschakeld

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.

Als hulp kan je gebruik maken van de classes  "Ruitjes en WBGLRuitjes"  , WEBGLRuitjes omdat in de WEBGL mode (0,0) het midden van het canvas is

 

Schetsen gemaakt met p5.js

planeet en roterende maan   schets met de constructor functie Sphere                                                                                                           
sterren en draaiende planeten   schets met de class Sphere  
animatie met 3d primitieven   met plane(); , box(); en torus();  
lichtbronnen en camera   pointLight, directionalLight, ambientMaterial en camera  
       
       

 

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>
 

 

stappenplan mappenstructuur p5.js schetsen

1) maak de map p5-js aan , maak in deze map de submappen "lib" , "classes" en de map met de schets in dit voorbeeld de map "rechthoeken_animatie"

    in deze submappen komen de bestanden

2) plaats in de map "lib" het script p5.js  (staat onder het kopje "Single files")

3) maak in de map "classes" de bestanden: "ruitjes.js" , "rechthoek.js" en "vormen.js"  aan en plak de ruitjesrechthoek en de superclass vormen code, in deze bestanden

4) maak in de map "rechthoeken_animatie" de bestanden: "index.html" en "sketch.js" aan, copieer bovenstaande index code naar het "index.html" bestand.
    In het bestand "sketch.js" komt de code van de schets in dit voorbeeld de  animatie met 12 rechthoeken
 
De schets draait in een browser op een (local)server. Ik maak gebruik van de Atom editor met het pakket "Atom live server" van jas-chen geinstalleerd.
Als browser kan je het beste Chromium gebruiken, deze browser heeft een overzichtelijke console, te bereiken via
Meer hulpprogramma's --> Hulpprogramma's voor ontwikkelaars (Ctrl Shift I)