IN WebGL code(HTML Ready), you will render three rotating triangles wrapped with

Question

IN WebGL code(HTML Ready), you will render three rotating triangles wrapped with a drive belt, with animation
and user interactions.

Draw a big equilateral triangle in blue color. Draw three small equilateral triangles in red color, aligned to the corners with the big triangle (the three corners of the big blue triangle are covered on top by the three red triangles in the initial positions in the figure).

The three red triangles can rotate around their centers. The three red triangles are wrapped with a
drive belt (in yellow).
The following picture is a snapshot of the machine animation after rotating a small angle

You need to animate the rotation of three red triangles and the drive belt.
You should also design your GUI input controls so the user can
? Change the color of the small rotating triangles to Red, Green and Blue;
? Increase the rotation speed;
? Decrease the rotation speed;
? Select

IN WebGL code(HTML Ready), you will render three rotating triangles wrapped with a drive belt, with animation and user interactions. Draw a big equilateral triangle in blue color. Draw three small equilateral triangles in red color, aligned to the corners with the big triangle (the three corners of the big blue triangle are covered on top by the three red triangles in the initial positions in the figure). IN WebGL code(HTML Ready), you will render three rotating triangles wrapped with a drive belt, with animation and user interactions. Draw a big equilateral triangle in blue color. Draw three small equilateral triangles in red color, aligned to the corners with the big triangle (the three corners of the big blue triangle are covered on top by the three red triangles in the initial positions in the figure). You need to animate the rotation of three red triangles and the drive belt. You should also design your GUI input controls so the user can ? Change the color of the small rotating triangles to Red, Green and Blue; ? Increase the rotation speed; ? Decrease the rotation speed; ? Select ??1??, ??2??, ??3??, ??4??, ??5?? five standard gears; ? Toggle Rotate/Stop; ? Reverse the direction of rotation. You can use buttons, dropdown boxes, or other controls of your choice. You can use Edward Angel??s code samples for reference. A Hint Use theta for the rotation angle of the rotating triangles. Three rotating triangles have the same theta since they rotate at the same speed. The angle theta has a period of 360 degrees. After that it will just repeat. Name the three vertices of the first triangle A1, B1, C1. The vertices of the second triangle A2, B2, C2. The vertices of the third triangle A3, B3, C3. The drive belt is a hexagon (LINE_LOOP) connecting six vertices out of nine vertices of three triangle. Which six? The answer is different in three different cases within one period. If 0

Explanation / Answer

// Define points for equilateral triangles.

trianglePositions = new Float32Array([

        // X, Y, Z,

        -0.5, -0.25, 0.0,

        0.5, -0.25, 0.0,

        0.0, 0.559016994, 0.0]);

// This triangle is red, green, and blue.

triangle1Colors = new Float32Array([

        // R, G, B, A

        1.0, 0.0, 0.0, 1.0,

        0.0, 0.0, 1.0, 1.0,

        0.0, 1.0, 0.0, 1.0]);

// Set the OpenGL viewport to the same size as the canvas.

gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);

// Create a new perspective projection matrix. The height will stay the same

// while the width will vary as per aspect ratio.

var ratio = canvas.clientWidth / canvas.clientHeight;

var left = -ratio;

var right = ratio;

var bottom = -1.0;

var top = 1.0;

var near = 1.0;

var far = 10.0;

    

mat4.frustum(left, right, bottom, top, near, far, projectionMatrix);

// Set the background clear color to gray.

gl.clearColor(0.5, 0.5, 0.5, 1.0);    

/* Configure camera */

// Position the eye behind the origin.

var eyeX = 0.0;

var eyeY = 0.0;

var eyeZ = 1.5;

// We are looking toward the distance

var lookX = 0.0;

var lookY = 0.0;

var lookZ = -5.0;

// Set our up vector. This is where our head would be pointing were we holding the camera.

var upX = 0.0;

var upY = 1.0;

var upZ = 0.0;

// Set the view matrix. This matrix can be said to represent the camera position.     

var eye = vec3.create();

eye[0] = eyeX; eye[1] = eyeY; eye[2] = eyeZ;

var center = vec3.create();

center[0] = lookX; center[1] = lookY; center[2] = lookZ;

var up = vec3.create();

up[0] = upX; up[1] = upY; up[2] = upZ;

mat4.lookAt(eye, center, up, viewMatrix);

// Read the embedded shader from the document.

var shaderSource = document.getElementById(sourceScriptId);

if (!shaderSource)

{

    throw("Error: shader script '" + sourceScriptId + "' not found");

}

// Pass in the shader source.

gl.shaderSource(shaderHandle, shaderSource.text);

// Create buffers in OpenGL's working memory.

trianglePositionBufferObject = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, trianglePositionBufferObject);

gl.bufferData(gl.ARRAY_BUFFER, trianglePositions, gl.STATIC_DRAW);

triangleColorBufferObject1 = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, triangleColorBufferObject1);

gl.bufferData(gl.ARRAY_BUFFER, triangle1Colors, gl.STATIC_DRAW);

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

---