Lineaire functies¶

Een zeer veel voorkomende situatie bij het programmeren van games is het omzetten van het ene lineaire relatie naar het andere.

Voorbeelden¶

Voorbeeld: Health-bar

De health van de player loopt van 0 tot 100 HP. De health van de player wordt weergegeven als een groene balk met een breedte van 0 bij 0 health en een breedte van 700 bij 100 health.

Wat is de breedte van de health-bar als functie van de health van de Player?

Voorbeeld: Objecten plaatsen

Teken een rij van 10 invaders over de gehele breedte van het scherm van 500 pixels breed.

Wat is de x-positie van iedere invader als functie van het volgnummer?

Voorbeeld: Tint faden

Een Shield om de player heen word in 400 frames steeds een beetje transparanter. De maximale transparantiewaarde (geheel ondoorzichtig) is 255. De waarde voor geheel transparant is 0.

Wat is de waarde van de transparantie als functie van het aantal verstreken frames?

Voorbeeld: Tijdsindicatie

Een bepaald level in je spel gaat op tijd. De tijd die nog rest wordt weergegeven als een verticale streep op een tijdlijn. De tijdlijn loopt van 100 tot 600 pixels in de breedte van het scherm. De positie van de tijdsindicator loopt terug, van 7600 naar 100. De tijd die je over het level mag doen is 60 seconden.

Wat is de de positie van de tijdsindicator als functie van de tijd?

Generieke methode¶

Bovenstaande voorbeelden lijken op elkaar. In elk voorbeeld is er sprake van een input waarde waarvan de minimum en maximum waarden bekend zijn. Tevens is er een output waarde met eveneens een minimale en een maximale waarde Bij bovenstaande voorbeelden zijn deze:

Voorbeeld	Input	input minimaal	input maximaal	output	output minimaal	output maximaal
HealthBar	Player health	0 HP	100 HP	Breedte health-bar	0 pixels	700 pixels
Objecten plaatsen	Object volgnummer	0	9	x-positie	0 pixels	500 pixels
Tint faden	verstreken tijd	0 frames	400 frames	Transparantie	255	0
Tijdsindicatie	Verstreken tijd	0 seconden	x-positie	60 seconden	600 pixels	100 pixels

Formule¶

\[ output = \frac{input}{max_{in}-min_{in}}\cdot(max_{out}-min_{out})+min_{out} \]

Kan worden iomgeschreven naar:

\[ output = \frac{max_{out}-min_{out}}{max_{in}-min_{in}}\cdot{input}+min_{out} \]

In p5.js¶

Deze functie wordt zo veel gebruikt dat deze in p5.js is ingebouwd als de functie map():

let output = map(input, inputMin, inputMax, outputMin, outputMax);

Ingevuld in de voorbeelden¶

Healthbar¶

Formule¶

\[ {healthbarWidth} = \frac{700-0}{100 - 0}\cdot{playerHealth}+0 \]

Voorbeeld¶


De health wordt omgezet naar de breedte van de healthbar

Code¶

healthbarWidth = map(health, 0, 100, 0, 700);

Objecten plaatsen¶

Formule¶

\[ x_{object} = \frac{600-0}{10 - 0}\cdot{i_{object}}+0 \]

Voorbeeld¶


Het object volgnummer wordt omgezet naar een x-positie van een object.

code¶

xPosition = map(iObject, 0, 9, 0, 500);

Fade-out¶

Formule¶

\[ tint = \frac{400-0}{0 - 255}\cdot{i_{frame}}+255 \]

Voorbeeld¶


De tijd in frames wordt omgezet naar de transparantiewaarde van de cirkel

Code¶

transparancy = map(iFrame, 0, 400, 255, 0);

Tijdsindicator¶

Formule¶

\[ x_{time} = \frac{60-0}{100 - 600}\cdot{time}+600 \]

Voorbeeld¶


De tijd in seconden wordt omgezet naar de x positie van de blauwe indicator

Code¶

xPosition=map(secondsElapsed, 0, 60, 600, 100)

Last update: December 9, 2022