added color gradient feature for arrow colors

www/WebDevPlayground/three.js/examples/ARforCIFT.js

@@ -4,20 +4,24 @@
 	var vectFieldDat = "http://localhost:8081/arrows" //URL of the vectorfile in json-format
 	
 
-	// =====Offset Parameters=====
-	var offsetXmin = -1.0
-	var offsetXmax = 1.0
-	var offsetYmin = -1.0
-	var offsetYmax = 1.0
-	var offsetZmin = -1.0
-	var offsetZmax = 1.0
+	// =====Offset parameters=====
+	var offsetXmin = -1.0;
+	var offsetXmax = 1.0;
+	var offsetYmin = -1.0;
+	var offsetYmax = 1.0;
+	var offsetZmin = -1.0;
+	var offsetZmax = 1.0;
 	
-	var oldVecArrayLength = 0
-	
-	var vectorlist = []
+	// =====Arrow depiction parameters=====
+	var arrowMaxLength = 1.0;
+	var arrowMinLength = 0.25;
+
+	var oldVecArrayLength = 0;
 	
+	var vectorlist = [];
 
-	// =================================Timefunction==================================
+	
+	// =================================Time function==================================
 	/**
 	 * Returns the JavaScript-Date in a more readable format (hh:mm:ss,ms)
 	 * @param dateObject
@@ -35,14 +39,38 @@
         };
         
 
-    // ==============================Colorgradientfunction============================
+    // ==============================Color gradient function============================
     /**
-     * Returns a THREE.color object for the color of the arrows
+	 * Methode that calculates the hex color for the arrows based on percentile of the
+	 * maximum and minimum Length for arrow depiction
+     * Returns an arra object for the RGB values of the arrows
      * @param vectorLength The length of the THREE.Vecotr3 directon object
-     * @returns {THREE.Color}
+     * @returns {Array}
      */
     function colorgradient(vectorLength) {
-        //TODO: make color dependent on lenght
+
+		// the color variables
+		var r, g, b = 0;
+
+		var fullrange = (arrowMaxLength - arrowMinLength);
+
+		if(fullrange==0){ percentile = 100}
+		else{
+			percentile = (vectorLength/fullrange)*100;
+		}
+
+		if(percentile < 50){
+			r = 255;
+			g = Math.round(5.1 * percentile);
+		}
+		else{
+			g = 255;
+			r = Math.round(510 -5.10 * percentile);
+		}
+		var rgbArray= [r, g, b];
+
+		return rgbArray;
+
     };
 		
 	//////////////////////////////////////////////////////////////////////////////////
@@ -177,18 +205,23 @@
 						var ZDir = vecArr.arrows[i].direction.z;
 						var dir2 = new THREE.Vector3(XDir, YDir, ZDir);
 
+						var vecLength = dir2.length();
+
+						var colorArray = colorgradient(vecLength);
+
 						// Normalize Vector Direction
-						//dir2.normalize();
+						dir2.normalize();
 
 						// set Vector Origin, Length
 						var YBase = vecArr.arrows[i].base.y;
 						var XBase = vecArr.arrows[i].base.x;
 						var ZBase = vecArr.arrows[i].base.z;
 						var origin2 = new THREE.Vector3(XBase, YBase, ZBase);
+
 						
 						// Set color of vectors
 						var hex2 = new THREE.Color(0xffff00);
-						// hex2.setRGB(1, 1-i/800 , 0.1); // Value with gradient;
+						hex2.setRGB(colorArray[0], colorArray[1], colorArray[2]); // Value with gradient;
 			
 						// check if arrows are needed to be added and push new arrows in array
 						if (oldVecArrayLength < vecArr.arrows.length) {