---
title: Cheatsheet
documentclass: scrartcl
classoption:
- twocolumn
# - landscape
---

## Punten op het gezicht

![](dlib_face_points.png)

detection.points
: 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.

detection.x
: x coordinaat van de bounding box van het gezicht. Dit is het punt linkboven.

detection.y
: y coordinaat van de bounding box van het gezicht. Dit is het punt linkboven.

detection.width
: Breedte van de bounding box van het gezicht.

detection.height
: Hoogte van de bounding box van het gezicht.


detection.angle
: Hoeveel het gezicht gedraaid is (oftewel de 'roll').


## Tekenen

drawPoints(\[punt1, punt2, ...])
: Teken punten

strokePoints(\[punt1, punt2, ...])
: Teken lijnen tussen een set punten

strokePoints(\[punt1, punt2, ...], OPEN)
: Teken lijnen tussen een set punten, maar de eindpunten worden _niet_ met elkaar verbonden.

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)
: Toon een ingeladen afbeelding. _x_ en _y_ bepalen waar de linker bovenhoek wordt geplaatst.
: Zie hieronder voor alle beschikbare afbeeldingen

let box = getBoundingBox(punten)
:  Bepaald het rechthoek waarbinnen de punten vallen.
: Te gebruiken als `box.x`, `box.y`, `box.width`, `box.height`.

## Opmaak

fill(kleur)
: de kleur van de vulling van wat je gaat tekenen.

noFill()
: geen vulling

stroke(kleur)
: de kleur van 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/



## Afbeeldingen

Deze afbeeldingen kun je gebruiken met `image()`.

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.

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)