loadImages in preload of basic images

dist/static/assets/images.json

@@ -0,0 +1,44 @@
+{
+    "game1": "/assets/images/game1.png",
+    "game10": "/assets/images/game10.png",
+    "game11": "/assets/images/game11.png",
+    "game12": "/assets/images/game12.png",
+    "game2": "/assets/images/game2.png",
+    "game3": "/assets/images/game3.png",
+    "game4": "/assets/images/game4.png",
+    "game5": "/assets/images/game5.png",
+    "game6": "/assets/images/game6.png",
+    "game7": "/assets/images/game7.png",
+    "game8": "/assets/images/game8.png",
+    "game9": "/assets/images/game9.png",
+    "glasses1": "/assets/images/glasses1.png",
+    "glasses2": "/assets/images/glasses2.png",
+    "glasses3": "/assets/images/glasses3.png",
+    "glasses4": "/assets/images/glasses4.png",
+    "hat1": "/assets/images/hat1.png",
+    "hat2": "/assets/images/hat2.png",
+    "hat3": "/assets/images/hat3.png",
+    "hat4": "/assets/images/hat4.png",
+    "hat5": "/assets/images/hat5.png",
+    "hat6": "/assets/images/hat6.png",
+    "mustache1": "/assets/images/mustache1.png",
+    "mustache10": "/assets/images/mustache10.png",
+    "mustache11": "/assets/images/mustache11.png",
+    "mustache12": "/assets/images/mustache12.png",
+    "mustache13": "/assets/images/mustache13.png",
+    "mustache14": "/assets/images/mustache14.png",
+    "mustache15": "/assets/images/mustache15.png",
+    "mustache16": "/assets/images/mustache16.png",
+    "mustache17": "/assets/images/mustache17.png",
+    "mustache18": "/assets/images/mustache18.png",
+    "mustache19": "/assets/images/mustache19.png",
+    "mustache2": "/assets/images/mustache2.png",
+    "mustache20": "/assets/images/mustache20.png",
+    "mustache3": "/assets/images/mustache3.png",
+    "mustache4": "/assets/images/mustache4.png",
+    "mustache5": "/assets/images/mustache5.png",
+    "mustache6": "/assets/images/mustache6.png",
+    "mustache7": "/assets/images/mustache7.png",
+    "mustache8": "/assets/images/mustache8.png",
+    "mustache9": "/assets/images/mustache9.png"
+}

dist/static/assets/webcam.js

@@ -126,6 +126,20 @@ function setupAssets(){
     // placeholder. Override in patch...
 }
 
+let images = {};
+function preload() {
+    const req = new Request('/assets/images.json');
+    fetch(req).then(
+        response => response.json()
+    ).then(data => {
+        for(let id in data) {
+            images[id] = loadImage(data[id]);
+        }
+        console.log('images', data, images);
+    });
+    console.log(images);
+}
+
 function setup() {
     // createCanvas(1280,720, WEBGL);
     createCanvas(540,420);

doc/cheatsheet.md

@@ -0,0 +1,247 @@
+---
+title: Cheatsheet
+documentclass: scrartcl
+classoption:
+- twocolumn
+# - landscape
+---
+
+## Punten op het gezicht
+
+![](dlib_face_points.png)
+
+
+detection.points
+: Alle bovenstaande punten. Ieder punt bestaat uit `x` en `y`. Bijvoorbeeld `detection.points[33].x` is het x-coördinaat van het puntje van de neus.
+
+detection.parts.nose
+: punten 27--35
+
+detection.parts.leftEye
+: punten 36--41
+
+detection.parts.rightEye
+: punten 42--47
+
+detection.parts.rightEyeBrow
+: punten 22--26
+
+detection.parts.leftEyeBrow
+: punten 17--21
+
+detection.parts.jawOutline
+: punten 0--16
+
+detection.box
+: de 'bounding box' van het gezicht.
+
+detection.box.x
+: x coordinaat van de bounding box.
+
+detection.box.y
+: y coordinaat van de bounding box.
+
+detection.box.width
+: Breedte van de bounding box
+
+detection.box.height
+: Hoogte van de bounding box
+
+detection.center.x  & detection.center.y
+: Het midden van de bounding box
+
+
+
+
+## Tekenen
+
+drawPoints(punten)
+: Teken punten
+
+strokePoints(punten)
+: Teken lijnen tussen een set punten
+
+rect(x, y, breedte, hoogte)
+: teken een rechthoek. _x_ en _y_ bepalen de linker bovenhoek.
+
+circle(cx, cy, radius)
+: Teken een cirkel. _cx_ en _cy_ bepalen het midden. Radius is de straal.
+
+<!-- let img = loadImage('bestandsnaam.jpg')
+: Upload een afbeelding, waarna je hem kunt inladen met loadImage(...) -->
+
+image(naam, x, y, breedte, hoogte)
+: Toon een ingeladen afbeelding. _x_ en _y_ bepalen de linker bovenhoek.
+: Zie hieronder voor alle beschikbare afbeeldingen
+
+getBoundingBox(punten)
+:  Bepaald het rechthoek waarbinnen de punten vallen.
+
+mergePoints(punten, anderePunten)
+: Voeg meerdere sets van punten samen. Bijvoorbeeld `mergePoints( detection.parts.rightEyeBrow, detection.parts.leftEyeBrow )`
+
+## Opmaak
+
+fill(kleur)
+: de kleur van de vulling
+
+noFill()
+: geen vulling
+
+stroke(kleur)
+: de omlijning
+
+strokeWeight(dikte)
+: de dikte van de omlijning
+
+noStroke()
+: geen omlijning
+
+### Kleuren
+
+Kleuren kunnen op verschillende manieren worden opgeven:
+
+* als engelse naam. Bijvoorbeeld `fill('orange')`, `fill('darkblue')`.
+* Op basis van drie getallen tussen 0 en 255. Dit zijn de rood, groen, en blauwe componenten van de kleur. Bijvoorbeeld `fill(0, 0, 255)` geeft een blauwe vulling. `fill(100,100,100)` is grijs.
+* Op basis van _vier_ getallen. Dit werkt hetzelfde als met drie. Het vierde getal bepaald transparantie. 0 is volledig tranparant, 255 helemaal geen transparantie. Dus `fill(0, 0, 255, 130)` geeft een half transparante blauwe vulling.
+
+
+https://genekogan.com/code/p5js-transformations/
+
+
+
+<!-- 
+<a href="https://www.freepik.com/vectors/man">Man vector created by studiogstock - www.freepik.com</a> -->
+
+
+
+
+## afbeeldingen
+
+
+images.game1 
+![](../dist/static/assets/images/game1.png)
+
+images.game10 
+![](../dist/static/assets/images/game10.png)
+
+images.game11 
+![](../dist/static/assets/images/game11.png)
+
+images.game12 
+![](../dist/static/assets/images/game12.png)
+
+images.game2 
+![](../dist/static/assets/images/game2.png)
+
+images.game3 
+![](../dist/static/assets/images/game3.png)
+
+images.game4 
+![](../dist/static/assets/images/game4.png)
+
+images.game5 
+![](../dist/static/assets/images/game5.png)
+
+images.game6 
+![](../dist/static/assets/images/game6.png)
+
+images.game7 
+![](../dist/static/assets/images/game7.png)
+
+images.game8 
+![](../dist/static/assets/images/game8.png)
+
+images.game9 
+![](../dist/static/assets/images/game9.png)
+
+images.glasses1 
+![](../dist/static/assets/images/glasses1.png)
+
+images.glasses2 
+![](../dist/static/assets/images/glasses2.png)
+
+images.glasses3 
+![](../dist/static/assets/images/glasses3.png)
+
+images.glasses4 
+![](../dist/static/assets/images/glasses4.png)
+
+images.hat1 
+![](../dist/static/assets/images/hat1.png)
+
+images.hat2 
+![](../dist/static/assets/images/hat2.png)
+
+images.hat3 
+![](../dist/static/assets/images/hat3.png)
+
+images.hat4 
+![](../dist/static/assets/images/hat4.png)
+
+images.hat5 
+![](../dist/static/assets/images/hat5.png)
+
+images.hat6 
+![](../dist/static/assets/images/hat6.png)
+
+images.mustache1 
+![](../dist/static/assets/images/mustache1.png)
+
+images.mustache10 
+![](../dist/static/assets/images/mustache10.png)
+
+images.mustache11 
+![](../dist/static/assets/images/mustache11.png)
+
+images.mustache12 
+![](../dist/static/assets/images/mustache12.png)
+
+images.mustache13 
+![](../dist/static/assets/images/mustache13.png)
+
+images.mustache14 
+![](../dist/static/assets/images/mustache14.png)
+
+images.mustache15 
+![](../dist/static/assets/images/mustache15.png)
+
+images.mustache16 
+![](../dist/static/assets/images/mustache16.png)
+
+images.mustache17 
+![](../dist/static/assets/images/mustache17.png)
+
+images.mustache18 
+![](../dist/static/assets/images/mustache18.png)
+
+images.mustache19 
+![](../dist/static/assets/images/mustache19.png)
+
+images.mustache2 
+![](../dist/static/assets/images/mustache2.png)
+
+images.mustache20 
+![](../dist/static/assets/images/mustache20.png)
+
+images.mustache3 
+![](../dist/static/assets/images/mustache3.png)
+
+images.mustache4 
+![](../dist/static/assets/images/mustache4.png)
+
+images.mustache5 
+![](../dist/static/assets/images/mustache5.png)
+
+images.mustache6 
+![](../dist/static/assets/images/mustache6.png)
+
+images.mustache7 
+![](../dist/static/assets/images/mustache7.png)
+
+images.mustache8 
+![](../dist/static/assets/images/mustache8.png)
+
+images.mustache9 
+![](../dist/static/assets/images/mustache9.png)
+