ZuoTi.Pro
Question

Given a starting sphere code, modify the Java and HTML code to create multiple spheres that...

Given a starting sphere code, modify the Java and HTML code to create multiple spheres that will rotate in different positions at different speeds.

basicSphere.js:

"use strict";

var canvas;

var gl;

var numTimesToSubdivide = 3;

var index = 0;

var pointsArray = [];

var va = vec4(0.0, 0.0, -1.0,1);

var vb = vec4(0.0, 0.942809, 0.333333, 1);

var vc = vec4(-0.816497, -0.471405, 0.333333, 1);

var vd = vec4(0.816497, -0.471405, 0.333333,1);

var program;

var program1;

function triangle(a, b, c) {

   pointsArray.push(a);

   pointsArray.push(b);

   pointsArray.push(c);

   index += 3;

}

function divideTriangle(a, b, c, count) {

if ( count > 0 ) {

var ab = mix( a, b, 0.5);

var ac = mix( a, c, 0.5);

var bc = mix( b, c, 0.5);

ab = normalize(ab, true);

ac = normalize(ac, true);

bc = normalize(bc, true);

divideTriangle( a, ab, ac, count - 1 );

divideTriangle( ab, b, bc, count - 1 );

divideTriangle( bc, c, ac, count - 1 );

divideTriangle( ab, bc, ac, count - 1 );

}

else {

triangle( a, b, c );

}

}

function tetrahedron(a, b, c, d, n) {

divideTriangle(a, b, c, n);

divideTriangle(d, c, b, n);

divideTriangle(a, d, b, n);

divideTriangle(a, c, d, n);

}

window.onload = function init() {

canvas = document.getElementById( "gl-canvas" );

gl = WebGLUtils.setupWebGL( canvas );

if ( !gl ) { alert( "WebGL isn't available" ); }

gl.viewport( 0, 0, canvas.width, canvas.height );

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

gl.enable(gl.DEPTH_TEST);

// Load shaders and initialize attribute buffers

program = initShaders( gl, "vertex-shader", "fragment-shader" );

program1 = initShaders( gl, "vertex-shader1", "fragment-shader1" );

gl.useProgram( program );

tetrahedron(va, vb, vc, vd, numTimesToSubdivide);

tetrahedron(va, vb, vc, vd, numTimesToSubdivide);

var vBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);

gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);

var vPosition = gl.getAttribLocation( program, "vPosition");

gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(vPosition);

thetaLoc = gl.getUniformLocation( program, "theta" );

var vPosition1 = gl.getAttribLocation( program1, "vPosition");

gl.vertexAttribPointer(vPosition1, 4, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(vPosition1);

document.getElementById("Button0").onclick = function(){

numTimesToSubdivide++;

index = 0;

pointsArray = [];

init();

};

document.getElementById("Button1").onclick = function(){

if(numTimesToSubdivide) numTimesToSubdivide--;

index = 0;

pointsArray = [];

init();

};

render();

}

function render() {

gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram( program );

for( var i=0; i<index/2; i+=3)

gl.drawArrays( gl.TRIANGLES, i, 3 );

gl.useProgram( program1 );

for( var i=index/2; i<index; i+=3)

gl.drawArrays( gl.TRIANGLES, i, 3 );

window.requestAnimFrame(render);

}

basicSphere.html:

<!DOCTYPE html>

<html>

<script id="vertex-shader" type="x-shader/x-vertex">

// assume both position and normal are in homogeneous form

attribute vec4 vPosition;

void

main()

{

mat4 s = mat4( 0.5, 0.0, 0.0, 0.0,

0.0, 0.5, 0.0, 0.0,

0.0, 0.0, 0.5, 0.0,

0.0, 0.0, 0.0, 1.0 );  

gl_Position = s*vPosition;

}

</script>

<script id="vertex-shader1" type="x-shader/x-vertex">

// assume both position and normal are in homogeneous form

attribute vec4 vPosition;

void

main()

{

mat4 s = mat4( 0.5, 0.0, 0.0, 0.0,

0.0, 0.5, 0.0, 0.0,

0.0, 0.0, 0.5, 0.0,

0.0, 0.0, 0.0, 1.0 );

mat4 t = mat4( 1.0, 0.0, 0.0, 0.0,

0.0, 1.0, 0.0, 0.0,

0.0, 0.0, 1.0, 0.0,

0.5, 0.0, 0.0, 1.0 );

   gl_Position = t*s*vPosition;

</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

void

main()

{

gl_FragColor = vec4(1,0,0,1);

}

</script>

<script id="fragment-shader1" type="x-shader/x-fragment">

precision mediump float;

void

main()

{

gl_FragColor = vec4(0,0,1,1);

}

</script>

<p> </p>

<p> </p>

<button id = "Button0">Increase Subdivisions</button>

<button id = "Button1">Decrease Subdivisions</button>

<p></p>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>

<script type="text/javascript" src="../Common/initShaders.js"></script>

<script type="text/javascript" src="../Common/MV.js"></script>

<script type="text/javascript" src="basicSphere.js"></script>

<body>

<canvas id="gl-canvas" width="512" height="512">

Oops ... your browser doesn't support the HTML5 canvas element

</canvas>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

use strict";

var canvas

var gl;

var numTimesToSubdivide = 3;

var index = 0;

var pointsArray = [];

var va = vec4(0.0, 0.0, -1.0,1);

var vb = vec4(0.0, 0.942809, 0.333333, 1);

var vc = vec4(-0.816497, -0.471405, 0.333333, 1);

var vd = vec4(0.816497, -0.471405, 0.333333,1);

var program;

var program1;

function triangle(a, b, c) {

   pointsArray.push(a);

   pointsArray.push(b);

   pointsArray.push(c);

   index += 3;

}

function divideTriangle(a, b, c, count) {

if ( count > 0 ) {

var ab = mix( a, b, 0.5);

var ac = mix( a, c, 0.5);

var bc = mix( b, c, 0.5);

ab = normalize(ab, true);

ac = normalize(ac, true);

bc = normalize(bc, true);

divideTriangle( a, ab, ac, count - 1 );

divideTriangle( ab, b, bc, count - 1 );

divideTriangle( bc, c, ac, count - 1 );

divideTriangle( ab, bc, ac, count - 1 );

}

else {

triangle( a, b, c );

}

}

function tetrahedron(a, b, c, d, n) {

divideTriangle(a, b, c, n);

divideTriangle(d, c, b, n);

divideTriangle(a, d, b, n);

divideTriangle(a, c, d, n);

}

window.onload = function init() {

canvas = document.getElementById( "gl-canvas" );

gl = WebGLUtils.setupWebGL( canvas );

if ( !gl ) { alert( "WebGL isn't available" ); }

gl.viewport( 0, 0, canvas.width, canvas.height );

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

gl.enable(gl.DEPTH_TEST);

// Load shaders and initialize attribute buffers

program = initShaders( gl, "vertex-shader", "fragment-shader" );

program1 = initShaders( gl, "vertex-shader1", "fragment-shader1" );

gl.useProgram( program );

tetrahedron(va, vb, vc, vd, numTimesToSubdivide);

tetrahedron(va, vb, vc, vd, numTimesToSubdivide);

var vBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);

gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);

var vPosition = gl.getAttribLocation( program, "vPosition");

gl.vertexAttribPointer(vPosition, 4, gl.FLOAT,false, 0, 0);

gl.enableVertexAttribArray(vPosition);

thetaLoc = gl.getUniformLocation( program, "theta" );

var vPosition1 = gl.getAttribLocation( program1, "vPosition");

gl.vertexAttribPointer(vPosition1, 4, gl.FLOAT,false, 0, 0);

gl.enableVertexAttribArray(vPosition1);

document.getElementById("Button0").onclick = function(){

numTimesToSubdivide++;

index = 0;

pointsArray = [];

init();

};

document.getElementById("Button1").onclick = function(){

if(numTimesToSubdivide) numTimesToSubdivide--;

index = 0;

pointsArray = [];

init();

};

render();

}

function render() {

gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram( program );

for( var i=0; i<index/2; i+=3)

gl.drawArrays( gl.TRIANGLES, i, 3 );

gl.useProgram( program1 );

for( var i=index/2; i<index; i+=3)

gl.drawArrays( gl.TRIANGLES, i, 3 );

window.requestAnimFrame(render);

}

basicSphere.html:

<!DOCTYPE html>

<html>

<script id="vertex-shader" type="x-shader/x-vertex">

// assume both position and normal are in homogeneous form

attribute vec4 vPosition;

void

main()

{

mat4 s = mat4( 0.5, 0.0, 0.0, 0.0,

0.0, 0.5, 0.0, 0.0,

0.0, 0.0, 0.5, 0.0,

0.0, 0.0, 0.0, 1.0 );  

gl_Position = s*vPosition;

}

</script>

<script id="vertex-shader1" type="x-shader/x-vertex">

// assume both position and normal are in homogeneous form

attribute vec4 vPosition;

void

main()

{

mat4 s = mat4( 0.5, 0.0, 0.0, 0.0,

0.0, 0.5, 0.0, 0.0,

0.0, 0.0, 0.5, 0.0,

0.0, 0.0, 0.0, 1.0 );

mat4 t = mat4( 1.0, 0.0, 0.0, 0.0,

0.0, 1.0, 0.0, 0.0,

0.0, 0.0, 1.0, 0.0,

0.5, 0.0, 0.0, 1.0 );

   gl_Position = t*s*vPosition;

</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

void

main()

{

gl_FragColor = vec4(1,0,0,1);

}

</script>

<script id="fragment-shader1" type="x-shader/x-fragment">

precision mediump float;

void

main()

{

gl_FragColor = vec4(0,0,1,1);

}

</script>

<p> </p>

<p> </p>

<button id = "Button0">Increase Subdivisions</button>

<button id = "Button1">Decrease Subdivisions</button>

<p></p>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>

<script type="text/javascript" src="../Common/initShaders.js"></script>

<script type="text/javascript" src="../Common/MV.js"></script>

<script type="text/javascript" src="basicSphere.js"></script>

<body>

<canvas id="gl-canvas" width="512" height="512">

Oops ... your browser doesn't support the HTML5 canvas element

</canvas>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
Given a starting sphere code, modify the Java and HTML code to create multiple spheres that...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Write a WebGL program that displays a rotating pendulum. The pendulum bob is free to rotate...

    Write a WebGL program that displays a rotating pendulum. The pendulum bob is free to rotate through 360 degrees about an anchor point at the center of the canvas. The pendulum has the following three components. 1) The anchor point is a green square centered at the origin (0,0) with point size = 5 pixels. 2) The bob is a blue hexagon of radius r = 0.1. Render this with a triangle fan centered at the origin (along with a...

  • HTML Canvas: I have given my small html + js mix code below. By this program-...

    HTML Canvas: I have given my small html + js mix code below. By this program- I can just draw line, but after drawing any image I want to save the "image " on my desktop. I understand, I have to make a "button" to SAVE it and later if I want to load the picture, then I have to make a button on the webpage to "LOAD". But I am unable to understand the function I should write for...

  • Create an HTML form that takes these inputs: Number of rows, and number of columns. This...

    Create an HTML form that takes these inputs: Number of rows, and number of columns. This form will submit to a PHP page. Create that page that will accept input from the HTML form and generates the table from the user's input. I already have the portion that generates the table based on user input by using Javascript in an HTML page, I just need to know how to generate the table using a PHP page instead. Here's the code...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user...

    HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user draw a picture, then that picture(lines on Canvas) will be saved as commands, so when the user will refresh the webpage or when I will execute the code, then when I will press the "load" button, the last picture which I made will come on the canvas from localStorage. <!DOCTYPE html> <html> <head> <script> var commands = []; var start = 0; var c;...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • One example of computer-aided design (CAD) is building geometric structures inter- actively. In Chapter 4, we...

    One example of computer-aided design (CAD) is building geometric structures inter- actively. In Chapter 4, we will look at ways in which we can model geometric objects comprised of polygons. Here, we want to examine the interactive part. Let’s start by writing an application that will let the user specify a series of axis- aligned rectangles interactively. Each rectangle can be defined by two mouse positions at diagonally opposite corners. Consider the event listener canvas.addEventListener("mousedown", function() { gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); if...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 8 Hands-on Project 8-1 Author: Date:   ...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 8 Hands-on Project 8-1 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 8-1</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.65897.js"></script> </head> <body> <header> <h1> Hands-on Project 8-1 </h1> </header> <article> <h2>New Account Information</h2> <form> <fieldset id="deliveryinfo"> <label for="fnameinput">First Name</label> <input type="text" id="fnameinput" name="fname" /> <label for="lnameinput">Last Name</label> <input type="text" id="lnameinput" name="lname" /> <label for="addrinput">Street Address</label> <input type="text" id="addrinput" name="address" /> <label for="cityinput">City</label> <input type="text" id="cityinput" name="city"...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT