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

This video covers the map() function in p5.js — how to take a value from a given range and map it to a new range.

Next video:

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:


For More p5.js Videos:

Help us caption & translate this video!






42 responses to “2.4: The map() Function – p5.js Tutorial”

  1. Natasha R Avatar

    In class they tell us to aspire to explain code like our favourite programmer on YouTube. I seriously aspire to code,think, and explain like you.

  2. Trxter Avatar

    The Coding Train is now one of my favourite channels. it is way better the buying an online course. Thank You!

  3. Eddie Amaya Avatar

    i wish he would have shown this graphically , how it really is a two point slope formula , ive been looking for a video that explained it like that and stumbled on to this . but this isnt it lol

  4. Raiden Woolery Avatar

    fun thing to do: use this as your color : col = [map(mouseX,0,400,0,255),0,0]; what it does is let you use rgb scale by making the normal 0-255 scale a vector.

  5. I am positive Avatar

    mouaex is a variable how I can make it in brackets . Cause there is no variable like that

  6. Djz Aamir Avatar

    Great video Dan , can someone pls give me some idea about the MATHS map() function uses 🙂

  7. Adrien gignoux Avatar

    Couldn't we just create a math function like col =(255/600) * mouseX ? I mean is the map function just a simpler way to express this?

  8. GraysonErhard Avatar

    Whenever you draw the bottom line of a square (The canvas) it's slanted. Drives my OCD fucking nuts!!!

  9. Shai Lahmish Avatar

    Why don't you just do something like this: col = (mouseX / width) * 255;
    It should work as well….

  10. Programming kitten Avatar

    You are the best teacher. I cant believe this videos are FREE !!!

  11. Engineer Passion Avatar

    hi you are the best dude
    I have one question
    can we define a line or any other shape using polar coordinates system

  12. Kent Huang PAGY Avatar

    Holy moly you're insane

  13. Levi van es Avatar

    Kind of funny. i happen to have made a map kind of function recently and now I'm stumbling across this video.

  14. Frederic L. Avatar

    Technicality, with no difference seen in that case, but shouldn't it be "0 to 599" rather than "0 to 600" through the video?

  15. purplemockingjayeyes Avatar

    thank you so much! I've been so confused with the map function but your explanation really cleared it up for me ^-^

  16. Justin G Avatar

    I just love your videos and your way to explain, thank you !!

  17. Lakloth Avatar

    So white is right

  18. Carlos Bispo Avatar

    hi shiffman. first of All, love your videos. i have a question, though. if you were to use fixed ranges in map function (ex: i want to map my world coordinates to screen resolution) is OK to use it in draw function? do we lose performance? or there is a better aproach? best regards!

  19. docdur2299 Avatar

    this may sound dumb but why don't you have to declare col with var col =… Why do you not need var

  20. Nadim shakya Avatar

    very very entertaining as well as informative ..
    fun to learn from Shiffman. !!

  21. Alexander Køpke Avatar

    I freaking love programming explained by Shiffman!! I go from huh to aha!! Awesome!

  22. Abhay Singh Avatar

    i enjoy your vids so much thats why is suscribedyou in 3 diff phone

  23. omar hedaya Avatar

    Before this video, I would have ( mouseX/600)*255. But it is cool to know about this 🙂

  24. anisometropie Benihime Avatar

    //Sun setting in a weird fashion.

    var r;
    var b;

    function setup()

    function draw()

    r = map(mouseX,0,width,0,255);
    b = map(mouseY,0,width,0,255);

  25. Cosbot Avatar

    you could do like 600/255 and work perfectly

  26. Abel Gonzalez Avatar

    Dude, your channel is taking off like a rocket since the last time i checked.

  27. The WD Animation Station Avatar

    Thank you so much it is hard to learn p5js with only there there website's tutorials

  28. Orgil Vlogs Avatar

    I learned far more from you than what I learnt at my university

  29. Never Stop Learning Avatar

    I was searching a lot about map( ) and didn't find as I expected, luckily I found your video 🙂

  30. william lee Avatar

    I tried the Y function but it only goes black to white! This is some fun shit! You are awesome Daniel =)

  31. duy le Avatar

    very clear explaination. Many thank

  32. Emmory Schroder Avatar

    Hi, i have a question. I'm trying to understand mapping. But i cant figure this out..

    float a;

    void setup(){

    Void draw(){
    a= 50;

    How big wil A be after the mapping, and why?

  33. J Maelstrm Avatar

    could you do a video about exporting p5.js animations as video?

  34. J Maelstrm Avatar

    Once again thanks man. Ive been reading Lauren McCarthy's book and i got a little stuck on the concept. Then i remembered you have all these great videos to explain things!

  35. Nancy Avatar

    Thank you so much super helpful !! Makes a lot more sense now!!

  36. endofmysteries Avatar

    map() is a wonderful function! I like your explanation and example of it.

  37. Toby Dann Avatar

    One question – the functionality you've covered so far would appear to be available in other libraries – have you reinvented the wheel? I suspect, given the aim is to cover what Processing does, there's a lot more to it than the functions you're teaching us here. For what it's worth – I'm sticking around as I'm learning so much from your excellent tutorials 🙂

  38. Toby Dann Avatar

    These videos are sooooo helpful – what a great teacher and excellent explainer – many thanks 🙂

  39. deepank verma Avatar

    Map function is pretty cool, Last time when I searched for it in web, it took around one hour to properly understand it from various references. You compiled it well.

Leave a Reply

Your email address will not be published. Required fields are marked *