diff --git a/README.md b/README.md
index cd024ca44e8e668e4e2e5896a5e1ecaf9d8c76b7..7adb5d48fd46f7fe8b3e0d3ea6c6bb8519c44410 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,129 @@
 # WebGL_Tutorial
 
+## 주제 및 선정 이유
+![image](https://user-images.githubusercontent.com/67994488/123023732-db610300-d412-11eb-9c71-9c03854ec0c1.png)
+  이 코드는 traslate와 rotate를 비교하여 공부하기 위해 제작한 프로젝트이다. 
+  매번 서로 다른 기능을 확인하기 위해 여러번 눌러서 확인하곤 했다. 화면에 한번에 여러 큐브를 띄워놓고 서로 기능을 다르게 주어 비교해보면서 차이점을 직접 비교해보면 더욱 이해가 쉬울 것 같아 2개의 큐브를 사용하였다. 또한, 컴퓨터 그래픽스를 공부하면서 tranlate와 rotate가 굉장히 자주 사용되지만 생각보다 헷갈렸던 부분이었기에 이런 어려움을 겪을 학생들에게 도움을 줄 수 있는 프로그램을 만들도록 했다.
+
+## 기능 설명
+### 1. Both Cubes (양쪽 큐브 모두 제어)
+![image](https://user-images.githubusercontent.com/67994488/123023863-211dcb80-d413-11eb-9472-c4702476ad02.png)
+ * Toggle Animation: 큐브를 모두 회전/ 정지
+ * Speed: 큐브 회전속도 제어
+ * Mode: 큐브 draw mode 선택
+### 2. Left Cube
+![image](https://user-images.githubusercontent.com/67994488/123023910-372b8c00-d413-11eb-8ad0-059e9b590cab.png)
+ * Toggle Animation: 왼쪽 큐브만 회전/ 정지
+ * FOV: 왼쪽 큐브만 FOV조절
+ * Translate: x, y, z값을 입력받아 trasnlate시행 (이때, translate후 rotate할 것인지, rotate한 후 translate할 것인지 선택 가능)
+
+### 3. Right Cube
+
+ * Toggle Animation: 오른쪽 큐브만 회전/ 정지
+ * FOV: 오른쪽 큐브만 FOV조절
+ * Translate: x, y, z값을 입력받아 trasnlate시행 (이때, translate후 rotate할 것인지, rotate한 후 translate할 것인지 선택 가능)
+ * Distance: 중심에 있는 큐브와 모서리 부근에 있는 큐브사이의 거리를 조절
+
+## 코드 설명
+ * 큐브가 원래 각도가 되도록 하는 함수- 양쪽 큐브의 x, y, z rotation값이 각각 주어졌기 때문에 처리할 때에도 각각 해주어야 한다. 함수에 전달받은 인자 a는 어느 큐브의 각도를 원상복수할 것을 알 수 있게 한다.
+```
+function defaultRotate(a) {
+
+    if(a == 0) {
+        xRot = 0.0;
+        yRot = 0.0;
+        zRot = 0.0;
+
+        xRot2 = 0.0;
+        yRot2 = 0.0;
+        zRot2 = 0.0;
+
+        left_flag = 1;
+        right_flag = 1;
+    } else if(a == 1) {
+        xRot = 0.0;
+        yRot = 0.0;
+        zRot = 0.0;
+
+        left_flag = 1;
+    } else if(a == 2) {
+        xRot2 = 0.0;
+        yRot2 = 0.0;
+        zRot2 = 0.0;
+        
+        right_flag = 1;
+    }
+}
+```
+ * 큐브가 원래 위치가 되도록 하는 함수- 양쪽 큐브의 x, y, z tranlation값이 각각 주어졌기 때문에 처리할 때에도 각각 해주어야 한다. 함수에 전달받은 인자 a는 어느 큐브의 위치를 원상복수할 것을 알 수 있게 한다.
+```
+function defaultTranslate(a) {
+
+    if(a == 0) {
+        translatex1 = 0.0; 
+        translatey1 = 0.0; 
+        translatez1 = 0.0; 
+        translatex2 = 0.0; 
+        translatey2 = 0.0; 
+        translatez2 = 0.0; 
+    } else if(a == 1) {
+        translatex1 = 0.0; 
+        translatey1 = 0.0; 
+        translatez1 = 0.0; 
+    } else if(a == 2) {
+        translatex2 = 0.0; 
+        translatey2 = 0.0; 
+        translatez2 = 0.0; 
+    }
+}
+```
+ * 큐브가 원래 상태(각도, 위치)가 되도록 하는 함수- 위의 두 함수를 불러 위치와 각도 모두를 원래 상태대로 복구시킨다.
+```
+function defaultState(a) {
+    defaultRotate(a);
+    defaultTranslate(a);
+}
+```
+ * 오른쪽 큐브 중에서 가장 자리에 있는 작은 큐브 그리기- mMat를 saveMat에 저장해두어 반복문에서 4개의 cube를 그릴 수 있게 한다. 센터에 있는 큐브와의 거리를 조절하기 위해서 dist변수를 활용하였다. 위쪽4개의 작은 큐브를 그릴 때에는 +3만큼 translate 하기 때문에 +dist만큼 더 멀어져야 하고, 반대쪽 4개의 작은 큐브를 그릴 때는 -3만큼 translate해서 그리기 때문에 -dist만큼 더 멀어져야한다.
+```
+  var saveMat = mat4.create();
+	mat4.copy(saveMat,mMat);  
+	for (var i = 0 ; i < 4 ; i++)
+	{
+		mat4.scale(mMat, mMat, [0.2, 0.2, 0.2]); 
+        mat4.rotateY (mMat, mMat, glMatrix.glMatrix.toRadian(90*(i+1)));
+		mat4.translate(mMat, mMat, [3.0 + dist, 3.0 + dist, 3.0 + dist]);
+        mat4.rotateY (mMat, mMat, yRot2 * 5.0); 
+		gl.uniformMatrix4fv(mMatLocation2, gl.FALSE, mMat);
+		gl.drawArrays(draw_mode, 0, 36); 
+		mat4.copy(mMat, saveMat);  
+	}
+    for (var i = 0 ; i < 4 ; i++)
+	{
+		mat4.scale(mMat, mMat, [0.2, 0.2, 0.2]); 
+		mat4.rotateY (mMat, mMat, glMatrix.glMatrix.toRadian(90*(i+1))); 
+		mat4.translate(mMat, mMat, [3.0 + dist, -3.0 - dist, 3.0 + dist]); 
+        mat4.rotateY (mMat, mMat, yRot2 * 5.0); 
+		gl.uniformMatrix4fv(mMatLocation2, gl.FALSE, mMat);
+		gl.drawArrays(draw_mode, 0, 36); 
+		mat4.copy(mMat, saveMat);  
+	}
+```
+ * 큐브를 translate하고 rotate하고 싶으면 order=0, rotate하고 tranlate하고 싶으면 order=1로두어 renderSence()에서 처리한다.
+```
+if(order1 == 0) {
+        mat4.translate(mMat, mMat, [translatex1, translatey1, translatez1]);
+        mat4.rotateX(mMat, mMat, xRot);
+        mat4.rotateY(mMat, mMat, yRot);
+        mat4.rotateZ(mMat, mMat, zRot);
+    } else if(order1 == 1) {
+        mat4.rotateX(mMat, mMat, xRot);
+        mat4.rotateY(mMat, mMat, yRot);
+        mat4.rotateZ(mMat, mMat, zRot);
+        mat4.translate(mMat, mMat, [translatex1, translatey1, translatez1]);
+    } else {
+        mat4.rotateX(mMat, mMat, xRot);
+        mat4.rotateY(mMat, mMat, yRot);
+        mat4.rotateZ(mMat, mMat, zRot);
+    }
+```
\ No newline at end of file