![De schets met ruitjespapier als achtergrond, rechth[i].dpAan ingeschakeld](/images/processing/p5.js/rechthoeken/rechthoeken_ruitjespap.jpg)
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
toevoeging op de knoppen
(t) Een afbeelding van de animatie wordt, als deels transparante png afbeelding, gedownload.
Diverse schetsen gemaakt met p5.js deze schetsen maken geen gebruik van de classes
| 1 | dansende ballen in een array | schets met de class "ballen" | ||
| 2 | custom made box class (t) | WEBGL class "Boxen" met een hoek als draaipunt met voorbeeld | ||
| 3 | planeet en roterende maan | WEBGL schets met de constructor functie "Sphere" | ||
| 4 | sterren en draaiende planeten | WEBGL schets met de class "Sphere" | ||
| 5 | animatie met 3d primitieven | WEBGL met plane(); , box(); en torus(); | ||
| 6 | lichtbronnen en camera | WEBGL pointLight, directionalLight, ambientMaterial en camera | ||
| 7 | bewegende camera | WEBGL en het gebruik van perspective() als tweede voorbeeld | ||
| 8 | lachspiegel | animatie met de webcam | ||
| 9 | aliens invasie | met een blauwe zon gemaakt mbv de p5.js pixelarray | ||
| 1 | fontfun | animaties met letterfonts en dingbats | ||
| 2 | Nature of Code | |||
| 3 | OOP schetsen | die gebruik maken van de superclass "Vormen" | ||
| 4 | classes | die gebruik maken van de superclass "Vormen" en "Curven" | ||
| 5 | OOP Bezier curven schetsen | die gebruik maken van de superclass "Curven" | ||
| 6 | machine learning met ml5.js en p5.js | |||
| 7 | live coding | met hydra-synth.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.min.js script (bij gebruik van p5.js worden de buttons niet herkend!)
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.min.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.min.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 ruitjes, rechthoek 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)
