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.

ToepassingInvoer GegevensInvoer data rangeUItvoer dataUitvoer data range
Cijfer beoordeling. Er zijn cijfers 1-10 maar ik wil visualiseren: voldoende, onvoldoende, goed cijfers1-10cijfers, Hue van HSB kleur0-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 + 40Uitvoer data blauw, groen, rood, ook Hue0-359
Zomer/winter/herfst versie van Weersverwachtingcijferszomer: 12 tot 36
winter: -20 tot 12
Als boven
Muispositie op scherm gaan we aangeven met Rood.cijfers0-399Kleur, R-waarde in RGB0-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)