De map() functie is in het Nederlands een soort misvertaling. Wij denken al gauw aan een kaart. Een schatkaart! Maar nee.
Met de map() functie wissel je van schaal. De ene schaal wordt afgebeeld (gemapped) op de andere.
Stel dat je een thermometer hebt, voor je koorts. Die kan van 35 tot 45 graden Celsius. Die 10 graden stop je weg in 200 pixels. Map() doet dat voor je.
doctor eloq arch
Wat andere voorbeelden.
| Toepassing | Invoer Gegevens | Invoer data range | UItvoer data | Uitvoer data range |
| Cijfer beoordeling. Er zijn cijfers 1-10 maar ik wil visualiseren: voldoende, onvoldoende, goed | cijfers | 1-10 | cijfers, Hue van HSB kleur | 0-359 (graden) -> dit zijn eigenlijk kleuren |
| Weersverwachting. Het is warm of koud maar ik wil dat met een kleur aan kunnen geven. | cijfers | -20 tot + 40 | Uitvoer data blauw, groen, rood, ook Hue | 0-359 |
| Zomer/winter/herfst versie van Weersverwachting | cijfers | zomer: 12 tot 36 winter: -20 tot 12 | Als boven | |
| Muispositie op scherm gaan we aangeven met Rood. | cijfers | 0-399 | Kleur, R-waarde in RGB | 0-255 |
Goed, de voorbeelden zijn vergezocht. Maar het gaat erom: je begint met de ene schaal(verdeling) en je wilt toe naar een andere schaal. De map() functie doet het in 1x voor je.
De video
De Opdracht. Bouw deze map() functie
Begin met deze voorbeeld code.
// Code by cmorgantywls. CC-BY-SA NC.
function setup() {
createCanvas(500, 500);
}
function draw() {
//CODE ALONG!
//Map a variable to change the background color from black to white - it should be black on the far left and white ONLY when you reach the far right edge.
background(220);
//YOUR TASK!
//1. Map a variable to control the strokeWeight of the rectangle based on mouse position, but only allow the strokeWeight to change between 5 and 20.
//2. Map a variable to control the width AND height of the rectangle (use the same variable for both) but only allow the size to change between 75 and 175.
//3. Map a variable to control one color in a fill based on mouse position, but only allow it to change between 0 and 255.
strokeWeight(5)
fill(255,0,255)
rect(210,210,75,75)
}
Je mag deze 3 deelopdrachten verwerken in dezelfde sketch.
Opdracht 1. StrokeWeight()
Map() een variabele om strokeWeight te besturen met de muispositie. Gebruik deze voor de rechthoek. Strokeweight mag varieren tussen 5 en 20.
Opdracht 2. Width en Height
Map() een variabele om de width en height van de rechthoek te besturen, met 75 en 175 als minimum en maximum.
Opdracht 3. Kleur
Bestuur de fill() van een kleur op basis van de muispositie met een map-functie die de muispositie afbeeldt op een schaal van 0 tot 255 (RGB)