2.4: The map() Function – p5.js Tutorial

arduino map function
This is a topic that many people are looking for. thevoltreport.com is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, thevoltreport.com would like to introduce to you 2.4: The map() Function – p5.js Tutorial. Following along are instructions in the video below:


1 00:00:00,000 –> 00:00:01,920 Hi. So this video that Im making is about a function in p5.js called map. So theres a very common scenario that comes up over and over and over again in programming graphics, programming interaction, working with data. Theres 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 lets say we have a canvas. 14 00:00:35,960 –> 00:00:38,690 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 its 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. Well 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, lets say this canvas has dimensions of 600 by 400. So mouse x is a variable. If youve been watching these videos in sequence, which you dont 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. Lets kind of like start doing that a little bit for a moment without the map function at all. OK, so heres the program. Im going to actually simplify this for a second. Var color equals 0. Im going to say background color. And you can see this. So we can see here, here Im 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? Thats pretty good. Whatever the value of mouse x is, set the background color to that. So lets see what happens. Im going to run this. Look, its working, its changing. But its already white. Why? Because as soon as I get to pixel 255, thats the full whiteness. So Im not getting this perfect mapping. Its kind of working, but its not exactly right. So I can be approximate and I can say, OK, the canvas is

600 pixels wide. Why dont I divide by 2? Thats pretty good. Whatever the mouse x is divided by 2. Thats getting me pretty close. It actually kind of looks like its working and, you know, we kind of solved the problem. But heres the thing. This problem that we have just sort of barely solved over there, this is a very simplistic view of it. But theres 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 theres 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 lets take a look at how that works in this context. 116 00:05:07,725 –> 00:05:12,270 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. Its a function that takes some amount of arguments. Its actually going to be five arguments. I better give myself more room here. I can see that youre 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. Thats terrifying. But actually, its 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, its mouse x. So I want to map mouse x, which I know has this range, thats 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 doesnt 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. Lets 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 Im going to go over here, Im 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 Im 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. Lets have a little more fun with this. Fun is all relative, of course. Lets give ourselves two more variables. 190 00:08:32,520 –> 00:08:36,250 So Im going to make a variable r and b, r for red, b for blue. And what Im going to do is Im 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 heres something interesting I could do with map. Lets 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. Lets do the reverse. Lets 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, Ive got red and blue together. And also, by the way, if youre thinking of– so you might take this exercise, maybe add mouse y to it, try to map mouse y. Theres 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, Im going to stop this. Oops.

tags:
map, JavaScript (Programming Language), p5.js, variable, Tutorial, p5js, daniel shiffman map, js map, p5.js map, javascript, creative coding, p5js tutorial, …
Thank you for watching all the articles on the topic 2.4: The map() Function – p5.js Tutorial. All shares of thevoltreport.com are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.

Leave a Comment