schets met de constructor functie "Sphere"

 

 

 

schets met de class "Sphere"

 

 

animatie met primitieven

met plane(); , box(); en torus();
 

 

 

  

OOP schetsen die gebruik maakt van de superclass "Vormen 

letterspel

 

 

mappenstructuur

 de mappenstructuur

 

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

animatie met 12 rechthoeken

De schets met ruitjespapier als achtergrond,

rechth[i].dpAan ingeschakeld, zie superclass "vormen" regel 11

inleiding p5.js.                  terug naar de startpagina
 
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

dansende ballen in een array       schets met de class "ballen"  
custom made box class   boxen met de class "Boxen" met een hoek als draaipunt  
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  
bewegende camera   en het gebruik van perspective() als tweede voorbeeld  
lachspiegel   animatie met de webcam  
       
       

 

Nature of Code      
OOP schetsen   die gebruik maken van de superclass "Vormen"  
OOP Bezier curven schetsen   die gebruik maken van de superclass "Curven"  
machine learning met ml5.js en p5.js      
       

  

 
 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.
              In deze mode wordt ook gebruik gemaakt van de GPU.
              In een trage computer zal daardoor de framerate lager zijn waardoor de lijnen gekarteld zijn.
              vergelijk de animatie met 12 rechthoeken met de 3d animatie met 12 parallellogrammen
              Het verschil zie je alleen als je ,net als ik, ook een trage computer heb.
 
         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.
De functie blijkt niet altijd goed te werken.
Met de curve animaties en de animaties die geen gebruik maken van een superclass werkt de functie goed,
Met de animaties die gebruik maken van de superclass "Vormen" werkt de functie niet goed.

 

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" . met bijv de Atom editor, de  bestanden: "ruitjes.js" , "rechthoek.js" en "vormen.js"  aan,

    dit zijn dus de namen van de classes

4) plak de ruitjesrechthoek en de superclass vormen code, in deze bestanden. en sla alles op

5) 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 Atom editor
 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)
 
 

   

lichtbronnen en camera

pointLight(); , directionalLight(); en ambientLight();

 

 

custom box schets met class

boxen met een hoek als draaipunt

 

 

lachspiegel animatie met de webcam

animatie met de webcam
 
 

stelling van pythagoras

 
OOP vormen schetsen
 
 
vliegers die een vijfhoek vormen
OOP vormen schetsen
 
 

zes Bezier cubic curven vormen een zeshoek

 
OOP Bezier curven

zes Bezier cubic curven vormen een zeshoek