SabrinaMarkon/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script> -->
<meta name="description" content="Three.js Bouncing Ball Changing Colors" />
  	<meta charset="utf-8" />
	<style>
		#container {
			background: #000000;
			width: 100%;
			height: 100%;
		}
  </style>
<meta charset=utf-8 />
<title>Three.js Bouncing Ball Changing Colors</title>

<style id="jsbin-css">

</style>
</head>
<body>
<div id="container">
</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
  <script type="text/javascript">


    // set the scene size.
    const WIDTH = 600, HEIGHT = 600, RADIUS = 20;

    let durrwidth = document.getElementById('container').offsetWidth;
    let durrheight = document.getElementById('container').offsetHeight;

    // set some camera attributes. VIEW_ANGLE is the field-of-view. The lower this angle is, the
    // closer the model appears to the front of the viewport.
    var VIEW_ANGLE = 65, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 1000;

    // assign function to variable for checking WebGLRenderer compatibility.
    var supportsWebGL = ( function ()
                         { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' )
                           .getContext( 'experimental-webgl' );
                               } catch( e ) { return false; } } )();

    // create a WebGLRenderer if it is supported, otherwise create a CanvaRenderer.
    if ( supportsWebGL )
      var renderer = new THREE.WebGLRenderer();
    else
      var renderer = new THREE.CanvasRenderer();

    // create a clock object to time refresh the scene for the transformations.
    var clock = new THREE.Clock();

    // create our scene, the 3D world we will place our model into.
    var scene = new THREE.Scene();

    // create a camera (eye) so we can look into our scene.
    var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);

    // the camera starts at 0,0,0 so pull it back, otherwise the model
    // will be right up against the front plane of the viewport.
    camera.position.z = 200;

    // add the camera to the scene.
    scene.add(camera)

    // start the renderer
    renderer.setSize(WIDTH, HEIGHT);

    // attach the render-supplied DOM element to the container div.
    document.getElementById('container').appendChild(renderer.domElement);

    // ----------------------------------------------------------------------------------------
    //  END OF THE STANDARD CODE FOR THE ASSIGNMENT
    //  Following this is where you must place your own custom code to complete the assignment
    // ----------------------------------------------------------------------------------------

    // define our basic geometry.
    var sphereGeometry = new THREE.SphereGeometry(RADIUS, 40, 15);

    //
    var material = new THREE.MeshPhongMaterial(
    {
      color: 0xDDA0DD
    });

    // Make the mesh for our sphere, passing in our defined geometry and material specifications.
    var sphere = new THREE.Mesh( sphereGeometry, material );

    // Add our sphere to the scene so we can see it!
    scene.add(sphere);


    // create a point light
    const pointLight = new THREE.PointLight(0xffffff);

    // set its position
    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 130;

    // add to the scene
    scene.add(pointLight);


    // for position computation.
    let time = 0;
    let delta = 0;

    // light purple
    let bouncecolor1 = '0xDDA0DD';
    // light green
    let bouncecolor2 = '0x98FB98';
    // light blue
    let bouncecolor3 = '0x87CEFA';

    var animate = function () {

      delta = clock.getDelta();
      time += delta;

      sphere.rotation.x = time * 4;
      sphere.position.x = 0.5 + Math.sin(time * 3) * 107;
      sphere.position.y = 0.5 + Math.abs(Math.sin(time * 3)) * 107;

      // if sphere is hitting the top left corner, turn blue.
      if (sphere.position.y < 5) {

        sphere.material.color.setHex(bouncecolor2);
      }
      // if sphere is hitting the top right corner, turn purple.
      if (sphere.position.y > 105 && sphere.position.x > 105) {
        sphere.material.color.setHex(bouncecolor1);
      }
      // if sphere is hitting the floor, turn green.
      if (sphere.position.y > 105 && sphere.position.x < 5) {
        sphere.material.color.setHex(bouncecolor3);
      }

      // render the scene.
      renderer.render( scene, camera );

      requestAnimationFrame( animate );
    };
    // Start the animation.
    animate();

/*
References

Cunningham, S. (2003). Computer Graphics: Programming, Problem Solving, and Visual Communication. Retrieved from https://my.uopeople.edu/pluginfile.php/389065/mod_resource/content/4/ComputerGraphics-SteveCunningham.pdf

three.js (n.d.). Manual. Retrieved from https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

*/

  </script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script> -->
	<meta name="description" content="Three.js Bouncing Ball Changing Colors" />
	<meta charset="utf-8" />
	<style>
	#container {
	background: #000000;
	width: 100%;
	height: 100%;
	}
	</style>
	<meta charset=utf-8 />
	<title>Three.js Bouncing Ball Changing Colors</title>

	<style id="jsbin-css">

	</style>
	</head>
	<body>
	<div id="container">
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
	<script type="text/javascript">


	// set the scene size.
	const WIDTH = 600, HEIGHT = 600, RADIUS = 20;

	let durrwidth = document.getElementById('container').offsetWidth;
	let durrheight = document.getElementById('container').offsetHeight;

	// set some camera attributes. VIEW_ANGLE is the field-of-view. The lower this angle is, the
	// closer the model appears to the front of the viewport.
	var VIEW_ANGLE = 65, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 1000;

	// assign function to variable for checking WebGLRenderer compatibility.
	var supportsWebGL = ( function ()
	{ try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' )
	.getContext( 'experimental-webgl' );
	} catch( e ) { return false; } } )();

	// create a WebGLRenderer if it is supported, otherwise create a CanvaRenderer.
	if ( supportsWebGL )
	var renderer = new THREE.WebGLRenderer();
	else
	var renderer = new THREE.CanvasRenderer();

	// create a clock object to time refresh the scene for the transformations.
	var clock = new THREE.Clock();

	// create our scene, the 3D world we will place our model into.
	var scene = new THREE.Scene();

	// create a camera (eye) so we can look into our scene.
	var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);

	// the camera starts at 0,0,0 so pull it back, otherwise the model
	// will be right up against the front plane of the viewport.
	camera.position.z = 200;

	// add the camera to the scene.
	scene.add(camera)

	// start the renderer
	renderer.setSize(WIDTH, HEIGHT);

	// attach the render-supplied DOM element to the container div.
	document.getElementById('container').appendChild(renderer.domElement);

	// ----------------------------------------------------------------------------------------
	// END OF THE STANDARD CODE FOR THE ASSIGNMENT
	// Following this is where you must place your own custom code to complete the assignment
	// ----------------------------------------------------------------------------------------

	// define our basic geometry.
	var sphereGeometry = new THREE.SphereGeometry(RADIUS, 40, 15);

	//
	var material = new THREE.MeshPhongMaterial(
	{
	color: 0xDDA0DD
	});

	// Make the mesh for our sphere, passing in our defined geometry and material specifications.
	var sphere = new THREE.Mesh( sphereGeometry, material );

	// Add our sphere to the scene so we can see it!
	scene.add(sphere);


	// create a point light
	const pointLight = new THREE.PointLight(0xffffff);

	// set its position
	pointLight.position.x = 10;
	pointLight.position.y = 50;
	pointLight.position.z = 130;

	// add to the scene
	scene.add(pointLight);


	// for position computation.
	let time = 0;
	let delta = 0;

	// light purple
	let bouncecolor1 = '0xDDA0DD';
	// light green
	let bouncecolor2 = '0x98FB98';
	// light blue
	let bouncecolor3 = '0x87CEFA';

	var animate = function () {

	delta = clock.getDelta();
	time += delta;

	sphere.rotation.x = time * 4;
	sphere.position.x = 0.5 + Math.sin(time * 3) * 107;
	sphere.position.y = 0.5 + Math.abs(Math.sin(time * 3)) * 107;

	// if sphere is hitting the top left corner, turn blue.
	if (sphere.position.y < 5) {

	sphere.material.color.setHex(bouncecolor2);
	}
	// if sphere is hitting the top right corner, turn purple.
	if (sphere.position.y > 105 && sphere.position.x > 105) {
	sphere.material.color.setHex(bouncecolor1);
	}
	// if sphere is hitting the floor, turn green.
	if (sphere.position.y > 105 && sphere.position.x < 5) {
	sphere.material.color.setHex(bouncecolor3);
	}

	// render the scene.
	renderer.render( scene, camera );

	requestAnimationFrame( animate );
	};
	// Start the animation.
	animate();

	/*
	References

	Cunningham, S. (2003). Computer Graphics: Programming, Problem Solving, and Visual Communication. Retrieved from https://my.uopeople.edu/pluginfile.php/389065/mod_resource/content/4/ComputerGraphics-SteveCunningham.pdf

	three.js (n.d.). Manual. Retrieved from https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

	*/

	</script>



	</body>
	</html>