p5.js-web-editor/doc/cheatsheet.md
2020-10-09 18:20:01 +02:00

5.2 KiB

title documentclass classoption
Cheatsheet scrartcl
twocolumn

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.
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/

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