implemented color gradient and shape change on out of range values for length of vectors

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

@@ -13,12 +13,27 @@
 	var offsetZmax = 1.0;
 	
 	// =====Arrow depiction parameters=====
-	var arrowMaxLength = 5.0;
-	var arrowMinLength = 1.5;
+	var arrowMaxLength = 2.0;
+	var arrowMinLength = 0.5;
 
-	var maxRange = 5.0;
+	var maxRange = 4.0;
 	var minRange = 0.0;
 
+	// ====Default sizes for non depictable arrows ======
+	var nonArrowLength = 0.1;
+	var nonArrowHeadLength = 0.05;
+	var nonArrowHeadWidth = 0.05;
+
+	// ========Default GUI values=========
+	var controls = new function () {
+		this.offsetX = 0.00;
+		this.offsetY = 0.00;
+		this.offsetZ = 0.00;
+		this.arrowMaxLength = 2.0;
+		this.arrowMinLength = 0.5;
+	};
+
+
 	var oldVecArrayLength = 0;
 	
 	var vectorlist = [];
@@ -59,9 +74,8 @@
 
 		if(fullrange==0){ percentile = 100}
 		else{
-			percentile = (vectorLength/fullrange)*100;
+			var percentile = (vectorLength/fullrange)*100;
 		}
-
 		if(percentile < 50){
 			r = 255;
 			g = Math.round(5.1 * percentile);
@@ -71,7 +85,6 @@
 			r = Math.round(510 -5.10 * percentile);
 		}
 		var rgbArray= [r, g, b];
-
 		return rgbArray;
 
     };
@@ -223,7 +236,7 @@
 
 						
 						// Set color of vectors
-						var hex2 = new THREE.Color(0xffff00);
+						var hex2 = new THREE.Color();
 						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
@@ -239,8 +252,21 @@
 							vectorlist[i].arrow.visible = true;
 							vectorlist[i].arrow.position.set(XBase, YBase, ZBase);
 							vectorlist[i].arrow.setDirection(dir2);
+							vectorlist[i].arrow.setLength(dir2.length());
+							vectorlist[i].arrow.setColor(hex2);
+							
 							console.log("Updating")
 						};
+						// look up if the length is exceedes the set limits and set arrow to specific color and shape
+						if (vecLength > arrowMaxLength){
+							vectorlist[i].arrow.setLength(nonArrowLength, nonArrowHeadLength, nonArrowHeadWidth)
+							vectorlist[i].arrow.setColor( new THREE.Color(0,0,1));
+
+						}; 
+						if (vecLength < arrowMinLength){
+							vectorlist[i].arrow.setLength(nonArrowLength, nonArrowHeadLength, nonArrowHeadWidth)
+							vectorlist[i].arrow.setColor( new THREE.Color(1,0,0));
+						}
 					};
 					// set not needed arrowHelper objects invisible
 					if (oldVecArrayLength > vecArr.arrows.length){
@@ -278,13 +304,6 @@
 	scene.add(vectorfield)
 	
 	//==================================GUI=============================================
-	var controls = new function () {
-		this.offsetX = 0.00;
-		this.offsetY = 0.00;
-		this.offsetZ = 0.00;
-		this.arrowMaxLength = 2.5;
-		this.arrowMinLength = 0.5;
-	};
 	
 	var gui = new dat.GUI();
 	gui.add(controls, 'offsetX', offsetXmin, offsetXmax);
@@ -309,9 +328,11 @@
 	var lastTimeMsec= null
 	requestAnimationFrame(function animate(nowMsec){
 		// offset for the vectorfield
-		vectorfield.position.x = controls.offsetX
-		vectorfield.position.y = controls.offsetY
-		vectorfield.position.z = controls.offsetZ
+		vectorfield.position.x = controls.offsetX;
+		vectorfield.position.y = controls.offsetY;
+		vectorfield.position.z = controls.offsetZ;
+		arrowMaxLength = controls.arrowMaxLength;
+		arrowMinLength = controls.arrowMinLength;
 		//loopingMagic()
 		// keep looping
 		requestAnimationFrame( animate );