Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
**Transcription and Explanation for Educational Website** --- **Title: Rotating Colored Cube** **URL:** `File: C:/Users/haile/hello/cube%201/index.html` **Content Description:** This webpage appears to be a local HTML file aimed at displaying a rotating colored cube. The title suggests an interactive 3D graphic element. **Visual Content:** - There is a large rectangular space outlined within the browser window. Although it is currently empty or not displaying content, this area is likely intended for the visual representation of the cube. **Functional Overview:** The webpage, when functioning correctly, is intended to demonstrate: 1. **3D Animation**: The rotating action implies the use of 3D graphics, giving viewers insights into basic animations using HTML/CSS or JavaScript. 2. **Color Dynamics**: The mention of a "Colored Cube" implies that the cube is likely to exhibit various colors, possibly changing or transitioning during rotation. **Educational Objective:** This demonstration aims to teach foundational concepts of web-based 3D graphics and interactivity, providing a practical understanding of how to implement and visualize rotating 3D objects on a webpage. --- **Note**: If you're not seeing the rotating cube in action, ensure the HTML file is correctly coded and all necessary scripts or assets are properly linked.

**Transcription and Explanation for Educational Website** --- **Title: Rotating Colored Cube** **URL:** `File: C:/Users/haile/hello/cube%201/index.html` **Content Description:** This webpage appears to be a local HTML file aimed at displaying a rotating colored cube. The title suggests an interactive 3D graphic element. **Visual Content:** - There is a large rectangular space outlined within the browser window. Although it is currently empty or not displaying content, this area is likely intended for the visual representation of the cube. **Functional Overview:** The webpage, when functioning correctly, is intended to demonstrate: 1. **3D Animation**: The rotating action implies the use of 3D graphics, giving viewers insights into basic animations using HTML/CSS or JavaScript. 2. **Color Dynamics**: The mention of a "Colored Cube" implies that the cube is likely to exhibit various colors, possibly changing or transitioning during rotation. **Educational Objective:** This demonstration aims to teach foundational concepts of web-based 3D graphics and interactivity, providing a practical understanding of how to implement and visualize rotating 3D objects on a webpage. --- **Note**: If you're not seeing the rotating cube in action, ensure the HTML file is correctly coded and all necessary scripts or assets are properly linked.

Database System Concepts
Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
See similar textbooks
icon
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();
};
 
**Transcription and Explanation for Educational Website** --- **Title: Rotating Colored Cube** **URL:** `File: C:/Users/haile/hello/cube%201/index.html` **Content Description:** This webpage appears to be a local HTML file aimed at displaying a rotating colored cube. The title suggests an interactive 3D graphic element. **Visual Content:** - There is a large rectangular space outlined within the browser window. Although it is currently empty or not displaying content, this area is likely intended for the visual representation of the cube. **Functional Overview:** The webpage, when functioning correctly, is intended to demonstrate: 1. **3D Animation**: The rotating action implies the use of 3D graphics, giving viewers insights into basic animations using HTML/CSS or JavaScript. 2. **Color Dynamics**: The mention of a "Colored Cube" implies that the cube is likely to exhibit various colors, possibly changing or transitioning during rotation. **Educational Objective:** This demonstration aims to teach foundational concepts of web-based 3D graphics and interactivity, providing a practical understanding of how to implement and visualize rotating 3D objects on a webpage. --- **Note**: If you're not seeing the rotating cube in action, ensure the HTML file is correctly coded and all necessary scripts or assets are properly linked.
Transcribed Image Text:**Transcription and Explanation for Educational Website** --- **Title: Rotating Colored Cube** **URL:** `File: C:/Users/haile/hello/cube%201/index.html` **Content Description:** This webpage appears to be a local HTML file aimed at displaying a rotating colored cube. The title suggests an interactive 3D graphic element. **Visual Content:** - There is a large rectangular space outlined within the browser window. Although it is currently empty or not displaying content, this area is likely intended for the visual representation of the cube. **Functional Overview:** The webpage, when functioning correctly, is intended to demonstrate: 1. **3D Animation**: The rotating action implies the use of 3D graphics, giving viewers insights into basic animations using HTML/CSS or JavaScript. 2. **Color Dynamics**: The mention of a "Colored Cube" implies that the cube is likely to exhibit various colors, possibly changing or transitioning during rotation. **Educational Objective:** This demonstration aims to teach foundational concepts of web-based 3D graphics and interactivity, providing a practical understanding of how to implement and visualize rotating 3D objects on a webpage. --- **Note**: If you're not seeing the rotating cube in action, ensure the HTML file is correctly coded and all necessary scripts or assets are properly linked.
AI-Generated Solution
AI-generated content may present inaccurate or offensive content that does not represent bartleby’s views.
steps

Unlock instant AI solutions

Tap the button
to generate a solution

SEE SOLUTION
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education
SEE MORE TEXTBOOKS