loadImages in preload of basic images
Ruben van de Ven
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"game1": "/assets/images/game1.png",
|
||||
"game10": "/assets/images/game10.png",
|
||||
"game11": "/assets/images/game11.png",
|
||||
"game12": "/assets/images/game12.png",
|
||||
"game2": "/assets/images/game2.png",
|
||||
"game3": "/assets/images/game3.png",
|
||||
"game4": "/assets/images/game4.png",
|
||||
"game5": "/assets/images/game5.png",
|
||||
"game6": "/assets/images/game6.png",
|
||||
"game7": "/assets/images/game7.png",
|
||||
"game8": "/assets/images/game8.png",
|
||||
"game9": "/assets/images/game9.png",
|
||||
"glasses1": "/assets/images/glasses1.png",
|
||||
"glasses2": "/assets/images/glasses2.png",
|
||||
"glasses3": "/assets/images/glasses3.png",
|
||||
"glasses4": "/assets/images/glasses4.png",
|
||||
"hat1": "/assets/images/hat1.png",
|
||||
"hat2": "/assets/images/hat2.png",
|
||||
"hat3": "/assets/images/hat3.png",
|
||||
"hat4": "/assets/images/hat4.png",
|
||||
"hat5": "/assets/images/hat5.png",
|
||||
"hat6": "/assets/images/hat6.png",
|
||||
"mustache1": "/assets/images/mustache1.png",
|
||||
"mustache10": "/assets/images/mustache10.png",
|
||||
"mustache11": "/assets/images/mustache11.png",
|
||||
"mustache12": "/assets/images/mustache12.png",
|
||||
"mustache13": "/assets/images/mustache13.png",
|
||||
"mustache14": "/assets/images/mustache14.png",
|
||||
"mustache15": "/assets/images/mustache15.png",
|
||||
"mustache16": "/assets/images/mustache16.png",
|
||||
"mustache17": "/assets/images/mustache17.png",
|
||||
"mustache18": "/assets/images/mustache18.png",
|
||||
"mustache19": "/assets/images/mustache19.png",
|
||||
"mustache2": "/assets/images/mustache2.png",
|
||||
"mustache20": "/assets/images/mustache20.png",
|
||||
"mustache3": "/assets/images/mustache3.png",
|
||||
"mustache4": "/assets/images/mustache4.png",
|
||||
"mustache5": "/assets/images/mustache5.png",
|
||||
"mustache6": "/assets/images/mustache6.png",
|
||||
"mustache7": "/assets/images/mustache7.png",
|
||||
"mustache8": "/assets/images/mustache8.png",
|
||||
"mustache9": "/assets/images/mustache9.png"
|
||||
}
|
||||
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -126,6 +126,20 @@ function setupAssets(){
|
|||
// placeholder. Override in patch...
|
||||
}
|
||||
|
||||
let images = {};
|
||||
function preload() {
|
||||
const req = new Request('/assets/images.json');
|
||||
fetch(req).then(
|
||||
response => response.json()
|
||||
).then(data => {
|
||||
for(let id in data) {
|
||||
images[id] = loadImage(data[id]);
|
||||
}
|
||||
console.log('images', data, images);
|
||||
});
|
||||
console.log(images);
|
||||
}
|
||||
|
||||
function setup() {
|
||||
// createCanvas(1280,720, WEBGL);
|
||||
createCanvas(540,420);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,247 @@
|
|||
---
|
||||
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
|
||||
|
||||
|
||||