Värdemängd map()

Funktionen map(), att ”mappa” om en värdemängd

Att mappa om en värdemängd kan ses som att stretcha ut den till att gälla över ett längre intervall eller att skjuta ihop den så att den gäller för ett kortare intervall.  Det blir alltså längre eller kortare intervall mellan värdena.

Färger kan anges som RGB, Röd Grön Blå. Varje färg har en värdemängd på 0-255 där 0 är inge färg och 255 är full färg.

VI ska skapa ett program där bakgrunden ändrar färg beroende av var på canvasen muspekaren befinner sig. Enkelt kan det göras med koden nedan

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(mouseX,0,mouseX); 
}

Röd  och blå antar då värdet 0 vid vänstra kanten och 255 efter drygt halva canvasen. Om man vill att värdet ska ändras proportionellt till hela canvasens bredd så kan en funktion som heter map() användas. Map() tar 5 parametrar

map(value, start1, stop1, start2, stop2);

Value är vilken input som ska omvandlas. Här kommer det att vara var muspekaren  befinner sig i x -led på canvasen, mouseX. Start1 och stop1 är vilka x-värden som musen kan anta, 0 – 400, när canvasen är 400 bred.
Start2 och stop2 är vilka värden som ska ”sträckas ut” till att gälla hela canvasen. Här är det 0–255.

r= map(mouseX,0,400,0,255);

 Om musen befinner sig vid x = 200, vilket värde kommer r då att ha?

För att skapa koden för att färgen på bakgrunden ska ändras beroende av muspekarens x-värde skapas först två variabler r och b. R sätts initialt till 0 och b sätts till 255.
I setup() skapas canvasen med en storlek på 400 * 400 pixlar
I draw() skapas funktionerna för att ”mappa” om värdemängden på canvasens storlek i x-led till värdemängden på respektive färg och bakgrunden sätts till de variabelvärdena.

r = map(mouseX, 0, 400, 0, 255);
b = map(mouseX, 0, 400, 255, 0);
background(r, 0, b);

Sen skapas en grön ellips som följer musen i x-led

fill(0, 255, 0);
ellipse(mouseX, 200, 50, 50);

En villkorad funktion som används för om musen trycks ner skapas och den gör att bakgrunden blir grön när musknapp hålls ner. mouseIsPressed är en av många fördefinierade funktioner som finns i p5.js. Du kan läsa om fler så kallade event under referenser på p5.js sida

if (mouseIsPressed) {
background(0, 255, 0);
}

 

 Lägg in kod i if-satsen som gör att den gröna ellipsen använder de mappade färgerna när musen trycks ner.

 Kan du skapa en kvadrat som varieras i storlek beroende av var på canvasen musens y-position är?

Nedan är en kod där funktionen map() används. Variablen mx innehåller den nya värdemängden för x-positionen på den svarta linjens slutpunkt.