To use the function, you provide the current value and its original range, followed by the target range you want it to move into. : The incoming number to be remapped.
(Optional): A boolean that, when set to true , constrains the result to the target range. Common Use Cases
: The lower and upper bounds of the target range. map-p5js
: Converting complex datasets, such as temperature readings or geographic coordinates, into visual properties like circle diameters or pixel positions on a canvas.
: let c = map(mouseX, 0, width, 0, 255); — This remaps the horizontal mouse position to a grayscale color range. To use the function, you provide the current
: Mapping mouseX (which ranges from 0 to width ) to background colors (ranging from 0 to 255 ) for smooth, reactive transitions.
: Using map() inside loops to translate counter variables into varying shapes, sizes, or spacing to create structured generative art. Common Use Cases : The lower and upper
The map() function in p5.js is a cornerstone of creative coding, used to translate a value from one numerical range to another. Whether you are using mouse movements to control colors or scaling data sensor values to fit a canvas, map() simplifies the math required to keep elements in proportion. The Core Syntax
