Update index.html

b2d225a6 · Jiyoung Moon · b56500db · b2d225a6
Commit b2d225a6 authored 5 years ago by Jiyoung Moon
--- a/index.html
+++ b/index.html
-MIT License
-Copyright (c) 2020 Jiyoung Moon
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
 <!DOCTYPE html>
 	<head>
 		<title>How to make mouse transform camera_201721097_Jiyoung_Moon
 		</title>
+		<h3></h3>
 		<h1>Transforming Camera Using Mouse Dragging Tutorial</h1>
 		<h2>written by 201721097 Jiyoung Moon</h2>
 		<p>
 			</br></br>Hi. Today, we'll learn how to transform camera using mouse dragging in WebGL.
 		</p>
 		<p>
-			The output of this tutorial will be like this. Try it!
+			The output of this tutorial will be like this. See it!!!</br>
+			<img src="final.gif"></br>
 		</p>
 		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
@@ -44,7 +24,7 @@ SOFTWARE.
 				font-family: Consolas,"courier new";
 				color: crimson;
 				background-color: #f1f1f1;
-				padding: 2px;
+				padding: 3px;
 				font-size: 105%;
 			}
 		</style>
@@ -58,7 +38,7 @@ SOFTWARE.
 	</head>
 	<body onload="main()">
-	    <canvas id="canvas" width="600" height="400"></canvas>
 	<h2></br></br>Before we start! You have to prepare...</h2>
 	<p>
 		Our tutorial doesn't teach you the basic things of WebGL.</br>
@@ -75,16 +55,20 @@ SOFTWARE.
 		In this step, we will modify some codes. </br>
 		Our tutorial is to make a mouse dragging transformation camera. </br>
 		So we'll remove some unneeded codes. </br>
-		These are the codes that should be removed. </br>
+		These are the codes that should be removed. </br></br>
-		<code>var angle = 0;</code></br>
+		<code>var angle = 0;</code></br></br>
 		<code>var rotx = new Float32Array(16);</code> </br>
 		<code>var roty = new Float32Array(16);</code> </br>
-		<code>var rotz = new Float32Array(16);</code> </br>
+		<code>var rotz = new Float32Array(16);</code> </br></br>
 		<code>mat4.rotate(rotx, idtmat, angle, [-5,5,-5]);</code> </br>
 		<code>mat4.rotate(roty, idtmat, angle, [0,5,0]);</code> </br>
-		<code>mat4.rotate(rotz, idtmat, angle, [0,0,5]);</code> </br>
+		<code>mat4.rotate(rotz, idtmat, angle, [0,0,5]);</code> </br></br>
 		<code>mat4.mul(wldmatrix, rotx, roty);</code> </br>
-		<code>mat4.mul(wldmatrix, wldmatrix, rotz);</code> </br>	
+		<code>mat4.mul(wldmatrix, wldmatrix, rotz);</code> </br></br>
 		These codes were for self rotation of the cube. </br>
 		So these don't be needed! </br>
 		This is the final code and the result of the step 1. </br>
@@ -95,7 +79,7 @@ SOFTWARE.
 	<h3></br></br>Step2. Use new variables.</h3>
 	<p>
-		As you know, our model camera should be move around the cube by the dragging. </br>
+		As you know, our model camera should move around the cube by the dragging. </br>
 		In our screen, we can move the mouse "Up-Down", and "Left-Right". </br>
 		See the below. </br></br>
@@ -110,7 +94,8 @@ SOFTWARE.
 		Also, using <code>y_rad</code>, <code>wldmatrix</code> will be rotated by y axis. </br>
 		These two variables, <code>x_rad</code> and <code>y_rad</code> will be also used in the other function, so they will be a global variables. </br>
 		This is the final code and the result of the step 2. </br>
-		<object data = "script_step2.txt", width="600", height="400"></object></br>
+		<object data = "script_step2.txt", width="600", height="400"></object>
+		<img src="script_step2_output.png", width="600", height="400"></img></br>
 		Still, we don't add any codes for mouse dragging, so the cube's just showing the front face. </br>
 	</p>
@@ -118,7 +103,7 @@ SOFTWARE.
 	<p>
 		It's almost done!</br>
 		In this step, we will use <code>EventListener</code> of JS and HTML DOM event.</br></br>
-		We need 3 functions, <code>Downward</code>, <code>upward</code>, <code>Moving</code>, and 1 variable <code>drag</code>.</br></br>
+		We need 3 functions, <code>Downward</code>, <code>upward</code>, <code>Moving</code>, and 1 variable, <code>drag</code>.</br></br>
 		When you clicked the canvas, the <code>Downward</code> function will be run. </br>
 		<code>Downward</code> stores the dragging point's coordinate values. </br>
@@ -127,16 +112,49 @@ SOFTWARE.
 		Each coordinate values will be stored to <code>original_x</code> and <code>original_y</code>.</br>
 		And make the <code>drag</code> value to <code>true</code>.</br></br>
-		When you don't click the canvas, the <code>Upward</code> function will be run. </br>
+		When you don't click the canvas or when your mouse cursor is getting out of the canvas, the <code>Upward</code> function will be run. </br>
-		<code>Upward</code> do nothing except changing the <code>drag</code> value to false. </br></br>
+		<code>Upward</code> do nothing except changing the <code>drag</code> value to <code>false</code>. </br></br>
 		When you move your mouse, the <code>Moving</code> function will be run. </br>
 		<code>Moving</code> gets the mouse's new coordinates. </br>
 		Then, using the <code>original_x</code>, <code>original_y</code>, <code>pageX</code> and <code>pageY</code>, we will get <code>gap_x</code> and <code>gap_y</code>. </br>
 		These two values, <code>gap_x</code> and <code>gap_y</code>, is the difference between original coordinates and new coordinates(present coordinates). </br>
 		Using <code>gap_x</code> and <code>gap_y</code>, we will change the <code>x_rad</code> and <code>y_rad</code>. </br>
+		And finally, the <code>original_x</code> and <code>original_y</code> should be changed to present coordinate values for next movement. </br></br>
+		But, when you aren't dragging and just moving your mouse cursor, the <code>Moving</code> function should not be run. </br>
+		So, in the <code>Moving</code> function, we have to add some <code>if</code> statement that only when the <code>drag</code> is <code>true</code>, <code>Moving</code> function can be run.</br></br>
+		This is the final code of step3. </br>
+		<object data = "script_step3.txt", width="600", height="400"></object></br></br>
+		When you see the final code, there's something strange. </br></br>
+		<code>y_rad += gap_x*3/canvas.width; </br>
+        x_rad += gap_y*3/canvas.height;</code> </br></br>
+        Why <code>y_rad</code> is changed using the <code>gap_x</code>, not the <code>gap_y</code>? </br>
+        Also, why <code>x_rad</code> is changed using the <code>gap_y</code>, not the <code>gap_x</code>? </br></br>
+        See this.</br>
+        <img src="description.gif"></img></br>
+	    I think you can understand the gif file's description.</br>
+	    Also, you can change some codes. </br>
+	    For example,</br> 
+	    <code>y_rad += gap_x*3/canvas.width; </br>
+        x_rad += gap_y*3/canvas.height;</code></br>
+	    to</br>
+	    <code>y_rad += gap_x/canvas.width; </br>
+        x_rad += gap_y/canvas.height;</code>.</br></br>
-		But, when you don't dragging and just moving your mouse cursor, 
+        <h3>Step4. It's done!!! Try it!!!</h3>
+        This is the final code and result.</br>
+    	Try this!! Drag the cube!!</br>
+    	<object data="script_final.txt", width="600", height="400"></object>
+        <canvas id="canvas" width="600" height="400"></canvas></br>
+    	Thanks!!</br></br></br>
 	</p>
 	</body>