Use the map() function to take any number and scale it to a new number that is more useful for the project that you are working on. For example, use the numbers from the mouse position to control the size or color of a shape. In this example, the mouse’s x-coordinate (numbers between 0 and 360) are scaled to new numbers to define the color and size of a circle.

void setup() {
  size(640, 360);

void draw() {
  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
  float c = map(mouseX, 0, width, 0, 175);
  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
  float d = map(mouseX, 0, width, 40, 300);
  fill(255, c, 0);
  ellipse(width/2, height/2, d, d);   

Functions Used


Sets the color used to fill shapes

Learn More

Defines the dimension of the display window width and height in units of pixels

Learn More

Draws an ellipse (oval) to the screen

Learn More

The setup() function is run once, when the program starts

Learn More

Re-maps a number from one range to another

Learn More

Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called

Learn More

Disables drawing the stroke (outline)

Learn More

The background() function sets the color used for the background of the Processing window

Learn More