p5.js-web-editor/doc/cheatsheet.md

4.1 KiB

title documentclass classoption
Cheatsheet scrartcl
twocolumn

Punten op het gezicht

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.

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 waar de linker bovenhoek wordt geplaatst.
Zie hieronder voor alle beschikbare afbeeldingen
getBoundingBox(punten)
Bepaald het rechthoek waarbinnen de punten vallen.

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

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

images.hat2

images.mustache1

images.mustache3

images.mustache4

images.mustache5