Rotation and zoom speed setters

README.md

@@ -14,6 +14,7 @@ ObJS
 * Choose to draw (or not) vertizes, edges or faces.
 * Change colors of background, vertizes, edges, and faces during runtime.
 * Change face transparency during runtime, so hidden elements are visible.
+* Change zoom and rotation speed during runtime.
 
 
 
@@ -49,17 +50,19 @@ The model can be rotated and zoomed in and out with the mouse, but it can also b
 
 To rotate the object, just call
 ```javascript
-myObJS.rotateX(ang); //Rotate along the X edge
-myObJS.rotateY(ang); //Rotate along the Y edge
+myObJS.rotateX(-1); //Rotate along the X edge to the left
+myObJS.rotateX(1);  //Rotate along the X edge to the right
+myObJS.rotateY(-1); //Rotate along the Y edge to the left
+myObJS.rotateY(1);  //Rotate along the Y edge to the right
 ```
-Where
-* *ang* (integer) is not the exact angles to rotate, just a internal measure.
+Note that the rotation speed can be set (see *Seting rotation speed*).
 
 To zoom in or out the object, call the method
 ```javascript
 myObJS.zoom("+"); //Zoom in
 myObJS.zoom("-"); //Zoom out
 ```
+Note that the zoom speed can be set (see *Seting zoom speed*).
 
 
 
@@ -69,7 +72,7 @@ You can change parameters such as the elements to draw, their color, transparenc
 
 ##### Select which elements to draw #####
 ```javascript
-drawElement(keyword, on);
+myObJS.drawElement(keyword, on);
 ```
 Where
 * *keyword* is a character string indicating witch element you want or don't want to be drawn. Possible values are
@@ -81,7 +84,7 @@ Where
 
 ##### Select color for elements #####
 ```javascript
-colorElement(keyword, color);
+myObJS.colorElement(keyword, color);
 ```
 Where
 * *keyword* is a character string indicating witch element you want to colorize. Possible values are
@@ -93,7 +96,21 @@ Where
 
 ##### Select face transparency #####
 ```javascript
-setAlpha(percent);
+myObJS.setAlpha(percent);
+```
+Where
+* *percent* is an integer, between 0 and 100, indicating the level of transparency you want to apply to the faces.
+
+##### Set rotation speed #####
+```javascript
+myObJS.setRotationSpeed(value);
+```
+Where
+* *value* is an integer, between 0 and 10. The greater it is, the greater the rotation speed.
+
+##### Set zoom speed #####
+```javascript
+myObJS.setZoomSpeed(value);
 ```
 Where
-* *percent* is an integer, between 0 and 100, indicating the level of transparency you want to apply to the faces.
+* *value* is an integer, between 0 and 10. The greater it is, the greater the zoom speed.

index.html

@@ -32,7 +32,12 @@
 					<pre><input type="checkbox" name="drawElement" value="edges" checked onChange="objs.drawElement('edges', this.checked);"/>Edges		<input type="color" id="colorEdges" value="#644646" onChange="objs.colorElement('edges', this.value);"/></pre>
 					<br/>
 					<pre><input type="checkbox" name="drawElement" value="faces" checked onChange="objs.drawElement('faces', this.checked);"/>Faces		<input type="color" id="colorFaces" value="#B4B4FF" onChange="objs.colorElement('faces', this.value);"/></pre>
-					<pre>		Alpha:<br/>		0% <input id="slide" type="range" min="0" max="100" step="1" value="60" onInput="objs.setAlpha(this.value);" onChange="objs.setAlpha(this.value);"/>100%</pre>
+					<pre>		Alpha:<br/>		0% <input type="range" min="0" max="100" step="1" value="60" onInput="objs.setAlpha(this.value);" onChange="objs.setAlpha(this.value);"/>100%</pre>
+					<br/>
+					Rotation speed:<br/>
+					0% <input type="range" min="0" max="10" step="1" value="3" onInput="objs.setRotationSpeed(this.value);" onChange="objs.setRotationSpeed(this.value);"/>100%
+					<br/>Zoom speed:<br/>
+					0% <input type="range" min="0" max="10" step="1" value="2" onInput="objs.setZoomSpeed(this.value);" onChange="objs.setZoomSpeed(this.value);"/>100%
 				</td>
 			</tr>
 		</table>

script/ObJS.js

@@ -16,8 +16,8 @@ function ObJS(file, canv){
 	var faceAlpha = .6;
 	var textColor = "rgba(0, 0, 0, 1)";
 	var vertSize = 4; //Make it even: at small scales will look better
-	var rotationSpeed = 100; //Smaller = faster. 100 is a good speed
-	var zoomSpeed = 0.2; //0-1. 0.2 or 0.3 are good speeds
+	var rotationSpeed = 90; //Smaller = faster. 100 is a good speed
+	var zoomSpeed = 0.161; //0-1. 0.2 or 0.3 are good speeds
 	
 	/********************************************************************
 	 * Variable containing this object, to be refered from nested       *
@@ -86,7 +86,6 @@ function ObJS(file, canv){
 	 * #scope: public                                                   *
 	 ********************************************************************/	
 	this.initCanvas = function(canv){
-		console.log(canvasInitialized);
 		if (!canvasInitialized){
 			if (canv!= null)
 				canvas = canv;
@@ -231,11 +230,32 @@ function ObJS(file, canv){
 	 * #scope: public                                                   *
 	 ********************************************************************/ 
 	this.setAlpha = function(percent){
-		faceAlpha = percent / 100;
-		faceColor = faceColor.substring(0, faceColor.lastIndexOf(",") + 2) + faceAlpha + ")";
-		draw();
+		if (percent >= 0 && percent <= 100){
+			faceAlpha = percent / 100;
+			faceColor = faceColor.substring(0, faceColor.lastIndexOf(",") + 2) + faceAlpha + ")";
+			draw();
+		}
+		else
+			console.log("setAlpha(" + percent + "); ERROR: Only values between 0 and 100 are allowed");
 	};
 	
+	/********************************************************************
+	 * Function switching the rotation speed.                           *
+	 * #parameters:                                                     *
+	 *   percent (int): Value (0-10) of speed.                          *
+	 * #return: nothing                                                 *
+	 * #scope: public                                                   *
+	 ********************************************************************/ 
+	this.setRotationSpeed = function(percent){
+		if (percent >= 0 && percent <= 10){
+			rotationSpeed = Math.round((10 - percent) * 30);
+			if (rotationSpeed == 0)
+				rotationSpeed = 1;
+		}
+		else
+			console.log("setRotationSpeed(" + percent + "); ERROR: Only values between 0 and 10 are allowed");
+	}
+	
 	/********************************************************************
 	 * Function that rotates elements in the canvas along the Y axis,   *
 	 * calculating the new position for each vertex in the vert array.  *
@@ -270,6 +290,20 @@ function ObJS(file, canv){
 		}
 	};
 	
+	/********************************************************************
+	 * Function switching the zoom speede of the faces.                 *
+	 * #parameters:                                                     *
+	 *   percent (int): Value (0-100) of speed.                         *
+	 * #return: nothing                                                 *
+	 * #scope: public                                                   *
+	 ********************************************************************/ 
+	this.setZoomSpeed = function(percent){
+		if (percent >= 0 && percent <= 10)
+			zoomSpeed = ((percent * 0.8) / 10) + 0.01;
+		else
+			console.log("setZoomSpeed(" + percent + "); ERROR: Only values between 0 and 10 are allowed");
+	}
+	
 	/********************************************************************
 	 * Function that changes the scale variable, witch results in a     *
 	 * zoom in or zoom out effect.                                      *