How does the map() function in Processing work?

Question

I'm taking a class which uses Processing.

I having a problem understanding the map() function.

According to it's documentation(http://www.processing.org/reference/map_.html):

Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge(width).

As shown in the second example, numbers outside of the range are not clamped to the minimum and maximum parameters values, because out-of-range values are often intentional and useful.

Is is similar to a random function but the range is set by the user? Also, i cant understand the explanation for the first example: it says the number is converted to a value of 0 to 100 into a value that ranges from edge to edge of the screen. im thinking why not just convert directly, the number 25 to the range of value pertaining to the screen?

May be unrelated: some references of the implementations in different frameworks/languages: gist.github.com/nkint/077b6deccdf61351f016dee5b83a2021 — nkint, Oct 28 '22 at 08:40

score 33 · Accepted Answer · edited Jun 28 '17 at 21:03

33

The map() function is a useful shortcut and you won't regret the time spent at understanding it.
This is its syntax:

variable2 = map(variable1, min1, max1, min2, max2);

The function establishes a proportion between two ranges of values:

min1 : min2 = max1 : max2

you can read it as: min1 is to min2 as max1 is to max2.
variable1 stores a value between the first range min1~max1.
variable2 gets a value between the second range min2~max2.

This is the equation the function solves for the programmer:

variable2 = min2+(max2-min2)*((variable1-min1)/(max1-min1))

This is the Java code behind the Processing map() function:

static public final float map(float value, 
                              float istart, 
                              float istop, 
                              float ostart, 
                              float ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

edited Jun 28 '17 at 21:03

ROMANIA_engineer

54,432
29
203
199

answered Jun 16 '13 at 16:34

user2468700

964
7
10

1

Imagine a potential use case of your program receiving normalized (ie 0.0 - 1.0) values from something, and then wanting to use that to change the colour of the background in Processing. You could go background(map(receivedValue, 0.0, 1.0, 0.0, 255.0)); – jesses.co.tt Jun 17 '13 at 16:38
@jesses.co.tt: I know this isn't the point of your comment, but in this case wouldn't it be much simpler to just do `background(receivedValue * 255.0)`? – flarn2006 Oct 13 '13 at 08:38
@flarn2006 yes, map() is just a convenience function, and sometimes its a lot easier to do as you said... but i guess that map() is good to have around for more complicated cases... – jesses.co.tt Oct 15 '13 at 17:07
The syntax `v' = map(v, x_1, x_2, y_1, y_2)` converts a value `v` in scale `[x_1, x_2]` to its corresponding value `v'` in scale `[y_1, y_2]`. Equivalently, `v'` is the unique value so that the three points `(x_1, y_1)`, `(v,v')` and `(x_2, y_2)` are co-linear. – Tom LaGatta Nov 26 '13 at 01:48
Where in the source code is this (and other) function implemented? – Jens Jun 11 '15 at 14:15
Where exactly in the Processing repo did you find this? I was looking to port another couple of functions to Swift and can't find them in the sea of files that repo is. – Julian Aug 27 '16 at 02:11

score 2 · Answer 2 · answered Feb 04 '14 at 23:25

think of it this way: divide a range of 0 to 10 into 100 equal parts. (you will get 0.1 per part) now divide the range 0 to 100 into 100 equal parts (you will get 1 per part) so 0.1 in the range of 0 to 10 is equal to 1 in the range 0 to 100. if you want to find where 5 in the range of 0 to 10 belongs in the range of 0 to 100, divide 5 by the size of a 0 to 10 part and multiply that number by the size of a 0 to 100 part and you will have your answer! (50)

P.S. I know this isn't how it actually works, but I just thought I would give an example to clarify things.

Manish Kumar · Answer 3 · 2019-09-15T15:27:31.400

If you think it a bit more carefully,

Its nothing more than just calculating the percentage,

in percentage you have final range is 0-100 and initial range as 0 - max(example like you have maximum marks in all subjects is 500, then initial range is 0 - 500),

Now for the solution what you can do:

for step by step to understand

n - your number

(initialMin - initialMax) your initial range

(finalMin - finalMax) your final range

then,

n

________________________ X (finalMax - finalMin) = say N

(initialMax - initialMin)

now N is exactly like percentage,, instead 0 to 100 as range, you have 0 to (finalMax-finalMin) as range

so for converting it into finalMin to finalMax range that map() function do in processing,

just do N = N + finalMin

Now you get the answer that is N

Hope you guys understand the solution>>>

How does the map() function in Processing work?

3 Answers3