CS1335 Java and Processing
  • CS 1335 Computer Science 1
  • Getting Started
    • Processing IDE
    • Java vs Javascript
    • Review: Processing, Functions
    • HSB Color Mode
      • HSB Color Wheel
        • Example Code
      • HSB Color Palette Tool
    • Recursion
      • Recursion Call-Stack
      • Example Code
        • Example Code Feb 5 S20
        • Feb 12 Code
  • Project 1
    • Subjective Modeling of Emotions
    • Emotions represented using color, form, space
      • Kandinsky Color - Emotion
      • Emotional Intelligence
    • Project 1: PShapes
      • Example Code
      • Inspiration
    • PShape with Cutout - Inner Contour
    • VertexShape - Recursion
    • Project 1: Recursive Drawing
    • Project 1: Programmatic Variations in Color
      • Recursion with rotate, scale
      • Plan Region Size, Color
    • Map Function
    • Transforms for Mirroring
    • Project1-Steps
  • Grid Based Designs
    • Computational Design
      • Generative Design
    • Artist: Victor Vasarely
    • Grid Pattern Design
    • 1D - Array of PShapes for Grid Layout
      • Truchet Tiling
      • Example Code
    • PShapes in Grid Regions
    • Grid Region Logic
    • Pattern Preview - Transforms: Translate & Scale
  • Project 2
    • Project 2 - 2D Arrays for Gradient Logic
      • 2D Array Grid with Labels
    • Grid Patterns using 2D Array Indexes: i, j
      • Example Class Code
    • lerpColor( ) and map( ) Functions
    • Demo Lerp Colors
    • 2D Arrays with lerpColor
    • Create PShape 2D Array
    • Function: Populate2DArray( )
    • Function: DisplayShapeMatrix()
    • Transforms for Position, Rotation, Scale of ShapeMatrix Elements
    • Project 2 - Steps
    • Animation for ShapeMatrix
      • Animation w/Noise
  • Object Oriented Programming
    • Introduction to Objects
    • OOP vs Data-Flow
    • Button States
    • Buttons as Objects
      • Button Class
    • Create Object Instances
    • Button Types
    • Modeling Buttons: States and Events
    • OOP - Inheritance
    • OOP - Polymorphism
    • Child-Class: PImageButton
    • PShape - SVG Objects
    • Menu of Buttons
    • ButtonGroup - Final Version
    • Slider Controller
    • UML Class Diagram
  • Project 3
    • Project 3 - Logic, Steps
    • Example Code S20
      • Code Wed Apr 1
      • Code Wed Apr 8 v1
      • Code Wed Apr 8 v2
      • Code Mon Apr 13
      • Code Wed Apr 15
      • Code Mon Apr 20
      • Code Wed Apr 22
      • Code Mon Apr 27
      • Code Wed Apr 29
    • Project 3 - Class Definitions
      • Button
      • PImageButton
      • ButtonGroup
      • Pattern
        • PShapes - SVG, Vertex Shapes
        • Setting Colors For Patterns
        • Pattern - With Child-PShapes
      • Slider
      • Particles
  • Java Syntax
    • Java Syntax
      • Typed-Variables
      • Float - Integer Conversion Errors
      • Modulus
      • Functions
      • Object Reference Data Types
      • Arrays
        • Class Example Code
      • Switch-Case Statement
      • Ternary Operator
      • Class
      • Learning Science
    • UML Class Diagram
    • Glossary
  • Resources and References
    • Resources
    • Random Inspiration
      • Ulm School
      • Heart-Mind, Mind, Body
      • Statistical Uncertainty
Powered by GitBook
On this page
  • Map Function - Parameters
  • Example code for MapExample

Was this helpful?

  1. Project 1

Map Function

PreviousPlan Region Size, ColorNextTransforms for Mirroring

Last updated 5 years ago

Was this helpful?

The Processing map function is a very useful function which converts a value from one range into a corresponding value in a second range.

Map Function - Parameters

The map function takes 5 input parameters: the first 3 values correspond to the known value in first range, and the first range endpoints. The last 2 values are the 2 endpoints for the second range.

float Map( float value, float start1, float end1, float start2, float end2)

In the image below, we can see a visual illustration of the map function with parameter values listed below:

float value2 = map( value1, 50, 200, 10, 360);

We can see that if value1 = 157, then value2 is calculated to be 259.

We can use the Map function to create relationships between features of our programs.

In Project 1, we can use the changing value of the length parameter for drawn patterns as the known value that is changing, we can use it to give us changing values of color components, such as hue, saturation, or brightness.

Example code below shows how we can use the map function to vary size and color of a rectangle drawn at the mouse position. (Include setup() to set size() and colorMode to HSB)

void draw(){
  float lenMin = 20;
  float lenMax = 200;
  float len = map( mouseX, 0, width, lenMin, lenMax);
  float hue = map(mouseX, 0,width, 100, 250);
  float bright = map(len, lenMin, lenMax, 100,50);
  float sat = map(len, lenMin, lenMax, 100,20);

  fill( hue, sat, bright );
  rect( mouseX, mouseY, len, len);
  }

Example code for MapExample

Below is the code used in the Map Example image above

int r1y  = 50;
int r2y  = 80;
int r1Start = 50;
int r1End = 200;
int value1;
int r2Start = 10;
int r2End = 360;
int value2;

void setup(){
  size( 400,200);
  colorMode(HSB, 360,100,100);
  strokeWeight(2);

}

void draw(){
  background(255);
  fill(0);
  stroke(0);
  //range1 and endpoints
  line( r1Start, r1y, r1End, r1y);
  ellipse( r1Start, r1y, 5, 5);
  ellipse( r1End, r1y, 5,5);

   //range2 and endpoints
  line( r2Start, r2y, r2End, r2y);
  ellipse( r2Start, r2y, 5, 5);
  ellipse( r2End, r2y, 5,5);

  stroke( 150);
  line( value1, r1y, value2,r2y); //line connecting values
  fill(0,100,100);
  value1 = constrain(mouseX, r1Start, r1End); //restrict value1 to range1
  ellipse( value1, r1y, 10,10); //ellipse to mark value1
  value2 =(int) map( value1, r1Start, r1End, r2Start, r2End);
  ellipse( value2, r2y, 10, 10); //ellipse to mark value2

  ///text to display values
  fill(0);
  text( r1Start, r1Start-10, r1y-5);
  text( r1End, r1End-10, r1y-5);
  text( r2Start, r2Start-10, r2y-5);
  text( r2End, r2End-10, r2y-5);
  text( "value1 " + (int)value1, 10, 20);
  text( "value2 " + (int)value2, 10, 120); 

}
processing.org: map function