2020-10-09 18:20:01 +02:00
---
title: Cheatsheet
documentclass: scrartcl
classoption:
- twocolumn
# - landscape
---
## Punten op het gezicht
![](dlib_face_points.png)
detection.points
2020-10-25 12:18:13 +01:00
: Alle bovenstaande punten. Ieder punt bestaat uit een `x` en een `y` coördinaat. Bijvoorbeeld `detection.points[33].x` is het x-coördinaat van het puntje van de neus.
: `x` is de afstand vanaf links. De horizontale positie.
: `y` is de afstand vanaf boven. De verticale positie.
2020-10-09 18:20:01 +02:00
2020-10-25 12:18:13 +01:00
detection.x
: x coordinaat van de bounding box van het gezicht. Dit is het punt linkboven.
2020-10-09 18:20:01 +02:00
2020-10-25 12:18:13 +01:00
detection.y
: y coordinaat van de bounding box van het gezicht. Dit is het punt linkboven.
2020-10-09 18:20:01 +02:00
2020-10-25 12:18:13 +01:00
detection.width
: Breedte van de bounding box van het gezicht.
2020-10-09 18:20:01 +02:00
2020-10-25 12:18:13 +01:00
detection.height
: Hoogte van de bounding box van het gezicht.
2020-10-09 18:20:01 +02:00
2020-10-25 15:26:11 +01:00
detection.angle
: Hoeveel het gezicht gedraaid is (oftewel de 'roll').
2020-10-09 18:20:01 +02:00
## Tekenen
2020-10-27 21:45:41 +01:00
drawPoints(\[punt1, punt2, ...])
2020-10-09 18:20:01 +02:00
: Teken punten
2020-10-27 21:45:41 +01:00
strokePoints(\[punt1, punt2, ...])
2020-10-09 18:20:01 +02:00
: Teken lijnen tussen een set punten
2020-10-27 21:45:41 +01:00
strokePoints(\[punt1, punt2, ...], OPEN)
: Teken lijnen tussen een set punten, maar de eindpunten worden _niet_ met elkaar verbonden.
2020-10-09 18:20:01 +02:00
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.
image(naam, x, y, breedte, hoogte)
2020-10-25 12:18:13 +01:00
: Toon een ingeladen afbeelding. _x_ en _y_ bepalen waar de linker bovenhoek wordt geplaatst.
2020-10-09 18:20:01 +02:00
: Zie hieronder voor alle beschikbare afbeeldingen
2020-10-27 21:45:41 +01:00
let box = getBoundingBox(punten)
2020-10-09 18:20:01 +02:00
: Bepaald het rechthoek waarbinnen de punten vallen.
2020-10-27 21:45:41 +01:00
: Te gebruiken als `box.x` , `box.y` , `box.width` , `box.height` .
2020-10-09 18:20:01 +02:00
## Opmaak
fill(kleur)
2020-10-25 12:18:13 +01:00
: de kleur van de vulling van wat je gaat tekenen.
2020-10-09 18:20:01 +02:00
noFill()
: geen vulling
stroke(kleur)
2020-10-25 12:18:13 +01:00
: de kleur van de omlijning.
2020-10-09 18:20:01 +02:00
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/
2020-10-25 12:18:13 +01:00
## Afbeeldingen
Deze afbeeldingen kun je gebruiken met `image()` .
2020-10-09 18:20:01 +02:00
2020-10-25 12:18:13 +01:00
Bijvoorbeeld: `image(images.game1, 10, 10, 50, 50)` tekent het plaatje `images.game1` , waarbij de linker bovenhoek 10 pixels van links en 10 pixels vanaf rechts wordt geplaatst. En het plaatje 50 bij 50 pixels is.
2020-10-09 18:20:01 +02:00
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.hat1
![](../dist/static/assets/images/hat1.png)
images.hat2
![](../dist/static/assets/images/hat2.png)
images.mustache1
![](../dist/static/assets/images/mustache1.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)