248 lines
5.2 KiB
Markdown
248 lines
5.2 KiB
Markdown
|
---
|
||
|
|
title: Cheatsheet
|
||
|
|
documentclass: scrartcl
|
||
|
|
classoption:
|
||
|
|
- twocolumn
|
||
|
|
# - landscape
|
||
|
|
---
|
||
|
|
|
||
|
|
## Punten op het gezicht
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
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
|
||
|
|
|
||
|
|
|
||
|
|
images.game10
|
||
|
|
|
||
|
|
|
||
|
|
images.game11
|
||
|
|
|
||
|
|
|
||
|
|
images.game12
|
||
|
|
|
||
|
|
|
||
|
|
images.game2
|
||
|
|
|
||
|
|
|
||
|
|
images.game3
|
||
|
|
|
||
|
|
|
||
|
|
images.game4
|
||
|
|
|
||
|
|
|
||
|
|
images.game5
|
||
|
|
|
||
|
|
|
||
|
|
images.game6
|
||
|
|
|
||
|
|
|
||
|
|
images.game7
|
||
|
|
|
||
|
|
|
||
|
|
images.game8
|
||
|
|
|
||
|
|
|
||
|
|
images.game9
|
||
|
|
|
||
|
|
|
||
|
|
images.glasses1
|
||
|
|
|
||
|
|
|
||
|
|
images.glasses2
|
||
|
|
|
||
|
|
|
||
|
|
images.glasses3
|
||
|
|
|
||
|
|
|
||
|
|
images.glasses4
|
||
|
|
|
||
|
|
|
||
|
|
images.hat1
|
||
|
|
|
||
|
|
|
||
|
|
images.hat2
|
||
|
|
|
||
|
|
|
||
|
|
images.hat3
|
||
|
|
|
||
|
|
|
||
|
|
images.hat4
|
||
|
|
|
||
|
|
|
||
|
|
images.hat5
|
||
|
|
|
||
|
|
|
||
|
|
images.hat6
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache1
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache10
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache11
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache12
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache13
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache14
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache15
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache16
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache17
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache18
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache19
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache2
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache20
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache3
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache4
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache5
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache6
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache7
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache8
|
||
|
|
|
||
|
|
|
||
|
|
images.mustache9
|
||
|
|
|
||
|
|
|