adding map() example #154

shiffman · shiffman · commit 758e12672d91 · 2016-02-24T12:51:08.000-05:00
diff --git a/content/examples_basics.xml b/content/examples_basics.xml
@@ -72,7 +72,7 @@
 		<ex p5="true" file="OperatorPrecedence.html">Operator Precedence</ex>
 		<ex p5="true" file="Distance1D.html">Distance 1D</ex>
 		<ex p5="true" file="Distance2D.html">Distance 2D</ex>
-		<ex file="Map.html">Map</ex>
+		<ex p5="true" file="Map.html">Map</ex>
 		<ex p5="true" file="Sine.html">Sine</ex>
 		<ex p5="true" file="SineCosine.html">Sine and Cosine</ex>
 		<ex p5="true" file="SineWave.html">Sine Wave</ex>
diff --git a/content/examples_p5/Basics/Math/Map/Map.js b/content/examples_p5/Basics/Math/Map/Map.js
@@ -0,0 +1,25 @@
+/**
+ * Map.
+ * 
+ * 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.
+ */
+
+function setup() {
+  var canvas = createCanvas(640, 360);
+  canvas.parent("p5container"); 
+  noStroke();
+}
+
+function draw() {
+  background(0);
+  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
+  var c = map(mouseX, 0, width, 0, 175);
+  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
+  var d = map(mouseX, 0, width, 40, 300);
+  fill(255, c, 0);
+  ellipse(width/2, height/2, d, d);   
+}
