---
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)