p5.js-web-editor/doc/cheatsheet.md at dev/prod

3.9 KiB

Raw Permalink 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.
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