K Rotating Colored Cube → C ✪ File X + File C:/Users/haile/hello/cube%201/index.html
K Rotating Colored Cube → C ✪ File X + File C:/Users/haile/hello/cube%201/index.html
Chapter18: Maintaining And Querying A Database
Section: Chapter Questions
Problem 5QY
Related questions
Question
The below code is suppose to make a rotating colored 3d cube using html (canvas) and JavaScript but I cannot get it to work properly. What am I doing wrong? What is the problem? This is a WebGL project if that helps. All that is rendered is what is seen in the attatched image. Thank you for your help.
Source code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Colored Cube</title>
<script type="text/javascript" src="glMatrix-1.0.1.min.js">
</script>
<script type="text/javascript" src="WebGL.js">
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250"
style="border:1px solid black;">
</canvas>
</body>
</html>
JavaScript source code:
function initBuffers(gl){
var cubeBuffers = {}
cubeBuffers.positionBuffer = gl.createArrayBuffer([
// Front face
-1, -1, 1,
1, -1, 1,
1, 1, 1,
-1, 1, 1,
// Back face
-1, -1, -1,
-1, 1, -1,
1, 1, -1,
1, -1, -1,
// Top face
-1, 1, -1,
-1, 1, 1,
1, 1, 1,
1, 1, -1,
// Bottom face
-1, -1, -1,
1, -1, -1,
1, -1, 1,
-1, -1, 1,
// Right face
1, -1, -1,
1, 1, -1,
1, 1, 1,
1, -1, 1,
// Left face
-1, -1, -1,
-1, -1, 1,
-1, 1, 1,
-1, 1, -1
]);
// build color Vertices
var colors = [
[1, 0, 1, 1], // Front face - Pink
[0, 1, 0, 1], // Back face - Green
[0, 0, 1, 1], // Top face - Blue
[0, 1, 1, 1], // Bottom face - Turquoise
[1, 1, 0, 1], // Right face - Yellow
[1, 0, 0, 1] // Left face - Red
];
var colorVertices = [];
for (var n in colors) {
var color = colors[n];
for (var i=0; i < 4; i++) {
colorVertices = colorVertices.concat(color);
}
}
cubeBuffers.colorBuffer = gl.createArrayBuffer(colorVertices);
cubeBuffers.indexBuffer = gl.createElementArrayBuffer([
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
16, 17, 18, 16, 18, 19, // Right face
20, 21, 22, 20, 22, 23 // Left face
]);
return cubeBuffers;
}
function stage(gl, cubeBuffers, angle){
// set field of view at 45 degrees
// set viewing range between 0.1 and 100.0 units away.
gl.perspective(45, 0.1, 100);
gl.identity();
// translate model-view matrix
gl.translate(0, 0, -5);
// rotate model-view matrix about x-axis (tilt box downwards)
gl.rotate(Math.PI * 0.15, 1, 0, 0);
// rotate model-view matrix about y-axis
gl.rotate(angle, 0, 1, 0);
gl.pushPositionBuffer(cubeBuffers);
gl.pushColorBuffer(cubeBuffers);
gl.pushIndexBuffer(cubeBuffers);
gl.drawElements(cubeBuffers);
}
window.onload = function(){
var gl = new WebGL("myCanvas", "experimental-webgl");
gl.setShaderProgram("VARYING_COLOR");
var cubeBuffers = initBuffers(gl);
var angle = 0;
gl.setStage(function(){
// update angle
var angularVelocity = Math.PI / 4; // radians / second
var angleEachFrame = angularVelocity * this.getTimeInterval() / 1000;
angle += angleEachFrame;
this.clear();
stage(this, cubeBuffers, angle);
});
gl.start();
};
Transcribed Image Text:K
Rotating Colored Cube
→ C ✪ File
X
+
File C:/Users/haile/hello/cube%201/index.html
AI-Generated Solution
AI-generated content may present inaccurate or offensive content that does not represent bartleby’s views.
Unlock instant AI solutions
Tap the button
to generate a solution
Recommended textbooks for you
Microsoft Visual C#
Computer Science
ISBN:
9781337102100
Author:
Joyce, Farrell.
Publisher:
Cengage Learning,
Enhanced Discovering Computers 2017 (Shelly Cashm…
Computer Science
ISBN:
9781305657458
Author:
Misty E. Vermaat, Susan L. Sebok, Steven M. Freund, Mark Frydenberg, Jennifer T. Campbell
Publisher:
Cengage Learning
Microsoft Visual C#
Computer Science
ISBN:
9781337102100
Author:
Joyce, Farrell.
Publisher:
Cengage Learning,
Enhanced Discovering Computers 2017 (Shelly Cashm…
Computer Science
ISBN:
9781305657458
Author:
Misty E. Vermaat, Susan L. Sebok, Steven M. Freund, Mark Frydenberg, Jennifer T. Campbell
Publisher:
Cengage Learning
A Guide to SQL
Computer Science
ISBN:
9781111527273
Author:
Philip J. Pratt
Publisher:
Course Technology Ptr
Programming Logic & Design Comprehensive
Computer Science
ISBN:
9781337669405
Author:
FARRELL
Publisher:
Cengage