diff --git a/index.html b/index.html index 9e0bef1fb212d34573264a00eec737a42dc3d641..43d0898b3164e3bcbae3ed7cfaf0d22ec91be422 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,17 @@ -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> - <code>var angle = 0;</code></br> + These are the codes that should be removed. </br></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> - <code>Upward</code> do nothing except changing the <code>drag</code> value to false. </br></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 <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> - - But, when you don't dragging and just moving your mouse cursor, + 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> + + + + <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>