From 1583ee457522996093b9201bc2654002bfed54e9 Mon Sep 17 00:00:00 2001 From: AbigailHua Date: Sat, 22 Jan 2022 18:36:32 -0500 Subject: [PATCH] Fix typo and redraw functions --- 12-shading.html | 4 ++-- 12-shading.js | 2 +- 3Dcube.html | 4 ++-- 3Dcube.js | 2 +- 8-transform-ortho2D.html | 2 +- Mtransforms.html | 2 +- color-triangles.js | 2 +- cubeMappedTeapot.html | 4 ++-- element-array.js | 2 +- hierarchicalXform.html | 2 +- shading.html | 2 +- shading.js | 2 +- simple-transform.html | 2 +- teapot.html | 2 +- teapotFBO.html | 4 ++-- texture.html | 4 ++-- texture.js | 2 +- textureTeapot.html | 2 +- uniform-color-xform.html | 2 +- xform.html | 2 +- xform.js | 3 ++- xform2.html | 2 +- xform2.js | 3 +++ xform3.html | 2 +- xform3.js | 5 +++++ xform4.html | 2 +- xform4.js | 5 +++++ xform5.html | 2 +- xform5.js | 5 +++++ 29 files changed, 49 insertions(+), 30 deletions(-) diff --git a/12-shading.html b/12-shading.html index 34d1b1f..a3c7356 100644 --- a/12-shading.html +++ b/12-shading.html @@ -145,7 +145,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

@@ -155,7 +155,7 @@

code09.html COMMENTS

- A simple 3D rendering of cube using gl elemenntary array + A simple 3D rendering of cube using gl element array
diff --git a/12-shading.js b/12-shading.js index 200f22f..9197f10 100644 --- a/12-shading.js +++ b/12-shading.js @@ -263,7 +263,7 @@ function initSQBuffers() { gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,cylinderVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); - // draw elementary arrays - triangle indices + // draw element arrays - triangle indices // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareVertexIndexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cylinderVertexIndexBuffer); diff --git a/3Dcube.html b/3Dcube.html index 3d4bbe2..11db61d 100644 --- a/3Dcube.html +++ b/3Dcube.html @@ -64,7 +64,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

@@ -74,7 +74,7 @@

3Dcube.html COMMENTS

- A simple 3D rendering of cube using gl elemenntary array. Left click mouse button and drag to rotate. + A simple 3D rendering of cube using gl element array. Left click mouse button and drag to rotate.
diff --git a/3Dcube.js b/3Dcube.js index 9edfada..f84bde6 100644 --- a/3Dcube.js +++ b/3Dcube.js @@ -119,7 +119,7 @@ var draw_type=2; gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); - // draw elementary arrays - triangle indices + // draw element arrays - triangle indices gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareVertexIndexBuffer); setMatrixUniforms(); // pass the modelview mattrix and projection matrix to the shader diff --git a/8-transform-ortho2D.html b/8-transform-ortho2D.html index c16b7f4..012a17a 100644 --- a/8-transform-ortho2D.html +++ b/8-transform-ortho2D.html @@ -64,7 +64,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/Mtransforms.html b/Mtransforms.html index 91d593b..226cec9 100644 --- a/Mtransforms.html +++ b/Mtransforms.html @@ -67,7 +67,7 @@

Background:

- - Click on the left mouse button and move the coursor to rotate; select the squre and apply 'X', 'x', 'Y','y' + - Click on the left mouse button and move the cursor to rotate; select the squre and apply 'X', 'x', 'Y','y'

diff --git a/color-triangles.js b/color-triangles.js index d933089..e3d116d 100644 --- a/color-triangles.js +++ b/color-triangles.js @@ -68,7 +68,7 @@ gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, stride, offset); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); - gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, offset, stride); + gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, stride, offset); gl.drawArrays(gl.TRIANGLE_STRIP, offset, squareVertexPositionBuffer.numItems); diff --git a/cubeMappedTeapot.html b/cubeMappedTeapot.html index dfe4a75..9991be1 100644 --- a/cubeMappedTeapot.html +++ b/cubeMappedTeapot.html @@ -183,7 +183,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

@@ -193,7 +193,7 @@

cubeMappedTeapot.html

- An exmple of rendering Utah teapot using Environment Cube Map + An example of rendering Utah teapot using Environment Cube Map
diff --git a/element-array.js b/element-array.js index e92bd22..34b8650 100644 --- a/element-array.js +++ b/element-array.js @@ -75,7 +75,7 @@ gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexBuffer.numFloats, gl.FLOAT, false,stride, offset); // 6*4 is the stride size, 3*4 is the offset offset = 0; - // draw elementary arrays - triangle indices + // draw element arrays - triangle indices gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareVertexIndexBuffer); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); diff --git a/hierarchicalXform.html b/hierarchicalXform.html index 416eb5e..906b9b5 100644 --- a/hierarchicalXform.html +++ b/hierarchicalXform.html @@ -67,7 +67,7 @@

Background:

- - Click on the left mouse button and move the coursor to rotate. select square 1, 2, 3 and apply 'X, 'x', 'Y', 'y' + - Click on the left mouse button and move the cursor to rotate. select square 1, 2, 3 and apply 'X, 'x', 'Y', 'y'

diff --git a/shading.html b/shading.html index 53ad796..ecc25d1 100644 --- a/shading.html +++ b/shading.html @@ -145,7 +145,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/shading.js b/shading.js index 200f22f..9197f10 100644 --- a/shading.js +++ b/shading.js @@ -263,7 +263,7 @@ function initSQBuffers() { gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,cylinderVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); - // draw elementary arrays - triangle indices + // draw element arrays - triangle indices // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareVertexIndexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cylinderVertexIndexBuffer); diff --git a/simple-transform.html b/simple-transform.html index 0df1ef6..4cf8025 100644 --- a/simple-transform.html +++ b/simple-transform.html @@ -64,7 +64,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/teapot.html b/teapot.html index 95cd2df..d65d3b4 100644 --- a/teapot.html +++ b/teapot.html @@ -140,7 +140,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/teapotFBO.html b/teapotFBO.html index 13835ac..daba167 100644 --- a/teapotFBO.html +++ b/teapotFBO.html @@ -175,7 +175,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

@@ -185,7 +185,7 @@

teapotFBO.html

- An exmple of using Frame Buffer Object (FBO) + An example of using Frame Buffer Object (FBO)
diff --git a/texture.html b/texture.html index 30a9ebb..7b882d3 100644 --- a/texture.html +++ b/texture.html @@ -168,7 +168,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

@@ -178,7 +178,7 @@

code10.html COMMENTS

- A simple 3D rendering of cube using gl elemenntary array + A simple 3D rendering of cube using gl element array
diff --git a/texture.js b/texture.js index 9064863..e4cf0ca 100644 --- a/texture.js +++ b/texture.js @@ -198,7 +198,7 @@ function initSQBuffers() { gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); - // draw elementary arrays - triangle indices + // draw element arrays - triangle indices gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareVertexIndexBuffer); setMatrixUniforms(); // pass the modelview mattrix and projection matrix to the shader diff --git a/textureTeapot.html b/textureTeapot.html index d0e66d6..e5fe8b3 100644 --- a/textureTeapot.html +++ b/textureTeapot.html @@ -168,7 +168,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/uniform-color-xform.html b/uniform-color-xform.html index 8d583c5..b3a1529 100644 --- a/uniform-color-xform.html +++ b/uniform-color-xform.html @@ -58,7 +58,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/xform.html b/xform.html index 0334aa2..667734d 100644 --- a/xform.html +++ b/xform.html @@ -58,7 +58,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/xform.js b/xform.js index ce720cc..9d2f523 100644 --- a/xform.js +++ b/xform.js @@ -223,7 +223,8 @@ function BG(red, green, blue) { } function redraw() { - Z_angle = 0; + Z_angle = 0; + z_angle = 0; drawScene(); } diff --git a/xform2.html b/xform2.html index 71c0889..91919ed 100644 --- a/xform2.html +++ b/xform2.html @@ -58,7 +58,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/xform2.js b/xform2.js index 29073b8..ab3b8fd 100644 --- a/xform2.js +++ b/xform2.js @@ -220,6 +220,9 @@ function BG(red, green, blue) { } function redraw() { + mat4.identity(mvMatrix); + mvMatrix = mat4.translate(mvMatrix, [-0.5, 0, 0]); + mvMatrix = mat4.scale(mvMatrix, [0.2, 0.2, 0.2]); drawScene(); } diff --git a/xform3.html b/xform3.html index dd861e3..65971b2 100644 --- a/xform3.html +++ b/xform3.html @@ -59,7 +59,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/xform3.js b/xform3.js index cc064e6..a0c1748 100644 --- a/xform3.js +++ b/xform3.js @@ -245,6 +245,11 @@ function BG(red, green, blue) { } function redraw() { + degree2 = 0; + degree3 = 0; + mat4.identity(mvMatrix); + mvMatrix = mat4.translate(mvMatrix, [-0.5, 0, 0]); + mvMatrix = mat4.scale(mvMatrix, [0.2, 0.2, 0.2]); drawScene(); } diff --git a/xform4.html b/xform4.html index 9f6abbe..59d1313 100644 --- a/xform4.html +++ b/xform4.html @@ -59,7 +59,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/xform4.js b/xform4.js index 91ee752..3b58ff5 100644 --- a/xform4.js +++ b/xform4.js @@ -262,6 +262,11 @@ function BG(red, green, blue) { } function redraw() { + degree2 = 0; + degree3 = 0; + mat4.identity(mvMatrix); + mvMatrix = mat4.translate(mvMatrix, [-0.5, 0, 0]); + mvMatrix = mat4.scale(mvMatrix, [0.2, 0.2, 0.2]); drawScene(); } diff --git a/xform5.html b/xform5.html index 0bf1eb4..fb0fe6b 100644 --- a/xform5.html +++ b/xform5.html @@ -59,7 +59,7 @@

Background:

- Click on the left mouse button and move the coursor to rotate + Click on the left mouse button and move the cursor to rotate

diff --git a/xform5.js b/xform5.js index 2a22def..50e5853 100644 --- a/xform5.js +++ b/xform5.js @@ -289,6 +289,11 @@ function BG(red, green, blue) { } function redraw() { + mat4.identity(mvMatrix); + mvMatrix = mat4.translate(mvMatrix, [-0.5, 0, 0]); + mvMatrix = mat4.scale(mvMatrix, [0.2, 0.2, 0.2]); + degree2 = 0; + degree3 = 0; drawScene(); }