Hi. So this video that I'm
making is about a function in p5.js called map. So there's a very
common scenario that comes up over and
over and over again in programming graphics,
programming interaction, working with data. There's so many places that
this scenario comes up. And so this particular
function, map, is a nice resolution
to this problem. And let me give you a simple
version of this problem. So let's say we have a canvas. And the canvas has
a background color. And what you want is for
that background color to sometimes be black
and sometimes be white. So when it's black,
the color that you should put in the
background function is 0. When it is white, the color you
should put in the background function is 255. So we can say, together,
the range for the background function that I want in
this particular program is a number between 0 and 255. So really, a variable
might go here. We'll call it COL.
And COL should have a range between 0 and 255. Now, how do I want that
value to be chosen? When should it be black and
when should it be white? What I would like is
when the mouse pointer is at this side of the screen,
I want the background to be black. And when the mouse pointer is
at this side of the screen, I want the background
to be white. So I would like to
create a scenario where I move the mouse left and
right, left and right, and I see the background
shift from black all the way to white, down to gray,
darker gray, down to black, et cetera, et cetera. This is what we want to program. Now, let's say this canvas
has dimensions of 600 by 400. So mouse x is a variable. If you've been watching these
videos in sequence, which you don't need to have been to
watch this particular video, mouse x is a sort of
recent new phenomenon that I just talked about
in a previous video. So if these are the
dimensions of the canvas, we know that mouse x has a range
that goes between 0 and 600. So we now want the
background color to have a rate-- oh, sorry. I lost my train
of thought there. The mouse has a range
between 0 and 600 and the background
color we want to have a range between 0 and 255. So we need to take this
value with this range and what do we want to do? Map it to this range. When mouse x equals 0,
background color equals 0. When mouse x equals 600,
background color equals 255. Let's kind of like start
doing that a little bit for a moment without
the map function at all. OK, so here's the program. I'm going to actually
simplify this for a second. Var color equals 0. I'm going to say
background color. And you can see this. So we can see here, here
I'm running this program. This ellipse is being
drawn where the mouse is, so we can see. And the background
is being colored according to that variable. But the background
color is not changing because I set it equal to
0 and I never changed it. So now I could try
to do some math. Like I could just say
color equals mouse x. Why not? That's pretty good. Whatever the value
of mouse x is, set the background
color to that. So let's see what happens. I'm going to run this. Look, it's working,
it's changing. But it's already white. Why? Because as soon
as I get to pixel 255, that's the full whiteness. So I'm not getting
this perfect mapping. It's kind of working, but
it's not exactly right. So I can be approximate
and I can say, OK, the canvas is
600 pixels wide. Why don't I divide by 2? That's pretty good. Whatever the mouse
x is divided by 2. That's getting me pretty close. It actually kind of
looks like it's working and, you know, we kind
of solved the problem. But here's the thing. This problem that we have
just sort of barely solved over there, this is a very
simplistic view of it. But there's lots of times where
you have a sensor, like data coming in from some
sensor and the range is between 321 and 1057. And then you want
to map that range to some other set of values. And actually, that
other set of values has a range between 20 and 35. And the math is a
little bit trickier. Or perhaps you want
to take a value that goes between 0 and
200 and invert that and map that between
200 down to 0. So there's lots of
more complex scenarios. The map function is
a general function that will take any range and
map a value inside that range to a new value in
any other range. So let's take a look at how
that works in this context. So first of all, what
do I mean by function? So already, hopefully you know
about calling functions in p5. Right? You might have done this. Line is a function that
takes four arguments. One, two, three, four. And what does it do? It draws a line from
point 100, 100 to 50, 50. Done. So map is the same thing. It's a function that takes
some amount of arguments. It's actually going
to be five arguments. I better give myself
more room here. I can see that you're not
going to be able to see this. Map, it takes five arguments. One, two, three, four, five. Can you see all those? Yes. OK, so this seems like,
oh, boy, five arguments. That's terrifying. But actually, it's not so bad. So remember, I have a range
that goes between 0 and 600. This is the range we
know that mouse x is. And I want to map this range
to a range between 0 and 255, which is what I want to
assign to my variable color. So the arguments that map
requires are the following. What is the minimum and
maximum of my current range? 0 to 600. What is the minimum and
maximum of my new range? 0 to 255. And what is the value
that has this range which I want to map to the new range? Well, in this
case, it's mouse x. So I want to map
mouse x, which I know has this range,
that's the x values. And I want to map it to
this range between 0 and 255 for the purpose of color. And then when I map it,
what do I do with it? I want to take the result of
that mapping and set it equal. Assign the result to
my variable color. So this is actually
something quite new about this map function. The line function doesn't do-- it performs a task. Line. It draws a line in the canvas. Well, whatever. The computer draws a
line on the canvas. The map function actually
performs a calculation and answers a question. It resolves to a single number. So I can use that number
and assign it back to this variable. OK? So this is kind
of a new concept. Let's go try to do
it in this program. So instead of my
goofy math here, mouse x divided by 2,
what I want to do now is use that map function. So I'm going to go over
here, I'm going to say map, mouse x, which has a
range between 0 and 600. Oops, I guess I
better zoom back out. And give me a new value within
a new range between 0 and 255. So here, mouse x
between 0 and 600 give me a range from 0
and 255 and assign that to this variable
color, which I'm then going to use in background. And watch this. You can see all the way
perfectly white at pixel 600, perfectly black at pixel 0. Let's have a little
more fun with this. Fun is all relative, of course. Let's give ourselves
two more variables. So I'm going to make a variable
r and b, r for red, b for blue. And what I'm going
to do is I'm going to set the red value
equal to that mapping. So you can see now blue
is at 255, red is at 0. And red, r, is getting
that mapping with mouse x. So as I move to the right,
I get more pink and purple, all the way back more blue. And here's something
interesting I could do with map. Let's also map the blue value. But instead of saying
when the mouse is at 0, the blue is at 0. When the mouse is at
600, the blue is at 255. Let's do the reverse. Let's say when the mouse
is at 0, we have 255 blue, and when the mouse is all
the way on the other side, we have 0 blue. So we can also invert
that range, which is great that map will do that for us. And all the way, we can
see I get all the way red, all the way blue,
and in the middle, I've got red and blue together. And also, by the way,
if you're thinking of-- so you might
take this exercise, maybe add mouse y to
it, try to map mouse y. There's all sorts of possible
things you can do with this. So hopefully that gives you
a bit of a sense of the map function and that you found
that useful, possibly. OK, I'm going to stop this. Oops.
