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

Ruben van de Ven 14a4425dc2 Changes for usability: less images, detection.box is deprecated, controls to show points and grid on all detections. Button to take screenshot.

2020-10-25 12:18:13 +01:00

4.1 KiB

Raw Blame History

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