akibmayadav/index.html

## index.html
<!--
HOMEWORK4
AMBIKA YADAV
-->
<html>
<head>
    <title>HOME WORK 4</title>
    <style>
        body {

            margin: 0;
        }

        #info {
                 font-family:Monospace;
                font-size:20px;
                text-align:center;
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
                color: #ddd;
                rgba(0,0,0,1);
            }

        canvas {
            background:#ffffff
            width: 100%;
            height: 100%
        }
    </style>
</head>
 <div id="info">

            HOMEWORK 4 <br/>
            Ambika Yadav<br/>
</div>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>
<script>


var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var radius_max = 50 ;
var radius_min = 20
var radius_orientation = 300 ;
var detail = 0 ;
var color_object = [0xe05028, 0xe0c728 , 0xb23e70, 0xc92a3c ];
var degree = Math.PI/180 ;
var number_of_object = 20;

//Adding Lights
var overall_light = new THREE.AmbientLight( 0x404040 );
                scene.add( overall_light );

var light_front = new THREE.DirectionalLight( 0xffffff );
                light_front.position.set( 400,100,500 ).normalize();
                scene.add( light_front );


//Adding Objects
var object = new Array();
var object_position = new Array ();
for ( var a = 0 ; a <number_of_object ;a++)
{
radius = Math.random() * (radius_max - radius_min) + radius_min;
var object_geo = new THREE.IcosahedronGeometry(radius, detail);
var object_material = new THREE.MeshLambertMaterial({color : color_object[a%4]});
object[a] = new THREE.Mesh(object_geo,object_material);
scene.add(object[a]);
object_position[a] = new Object();
object_position[a].x = radius_orientation*Math.sin(degree*360/number_of_object *a);
object_position[a].y = radius_orientation*Math.cos(degree*360/number_of_object *a);
object_position[a].z = -200;
object[a].position.set(object_position[a].x,object_position[a].y,object_position[a].z);
}


var frame_counter =0 ;
var z_position_rotation =0;

var render = function() {
    requestAnimationFrame( render );
    frame_counter +=1;
    if (frame_counter%10 == 0)
    {
        z_position_rotation += degree*4;
        radius_orientation = 300*Math.sin(z_position_rotation);

        for ( var a = 0 ; a <number_of_object ;a++)
        {
            object[a].rotation.x += degree*5;
            object[a].rotation.y += degree*5;

            object[a].position.x = radius_orientation*Math.sin(degree*360/number_of_object *a +z_position_rotation);
            object[a].position.y = radius_orientation*Math.cos(degree*360/number_of_object *a +z_position_rotation);

        }
    }
    renderer.render( scene, camera );
}
render();

</script>
</body>
</html>
	<!--
	HOMEWORK4
	AMBIKA YADAV
	-->
	<html>
	<head>
	<title>HOME WORK 4</title>
	<style>
	body {

	margin: 0;
	}

	#info {
	font-family:Monospace;
	font-size:20px;
	text-align:center;
	position: absolute;
	top: 0px; width: 100%;
	padding: 5px;
	color: #ddd;
	rgba(0,0,0,1);
	}

	canvas {
	background:#ffffff
	width: 100%;
	height: 100%
	}
	</style>
	</head>
	<div id="info">

	HOMEWORK 4 <br/>
	Ambika Yadav<br/>
	</div>

	<body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>
	<script>


	var scene = new THREE.Scene();
	var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );

	var renderer = new THREE.WebGLRenderer();
	renderer.setClearColor( 0x404040);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	var radius_max = 50 ;
	var radius_min = 20
	var radius_orientation = 300 ;
	var detail = 0 ;
	var color_object = [0xe05028, 0xe0c728 , 0xb23e70, 0xc92a3c ];
	var degree = Math.PI/180 ;
	var number_of_object = 20;

	//Adding Lights
	var overall_light = new THREE.AmbientLight( 0x404040 );
	scene.add( overall_light );

	var light_front = new THREE.DirectionalLight( 0xffffff );
	light_front.position.set( 400,100,500 ).normalize();
	scene.add( light_front );


	//Adding Objects
	var object = new Array();
	var object_position = new Array ();
	for ( var a = 0 ; a <number_of_object ;a++)
	{
	radius = Math.random() * (radius_max - radius_min) + radius_min;
	var object_geo = new THREE.IcosahedronGeometry(radius, detail);
	var object_material = new THREE.MeshLambertMaterial({color : color_object[a%4]});
	object[a] = new THREE.Mesh(object_geo,object_material);
	scene.add(object[a]);
	object_position[a] = new Object();
	object_position[a].x = radius_orientationMath.sin(degree360/number_of_object *a);
	object_position[a].y = radius_orientationMath.cos(degree360/number_of_object *a);
	object_position[a].z = -200;
	object[a].position.set(object_position[a].x,object_position[a].y,object_position[a].z);
	}


	var frame_counter =0 ;
	var z_position_rotation =0;

	var render = function() {
	requestAnimationFrame( render );
	frame_counter +=1;
	if (frame_counter%10 == 0)
	{
	z_position_rotation += degree*4;
	radius_orientation = 300*Math.sin(z_position_rotation);

	for ( var a = 0 ; a <number_of_object ;a++)
	{
	object[a].rotation.x += degree*5;
	object[a].rotation.y += degree*5;

	object[a].position.x = radius_orientationMath.sin(degree360/number_of_object *a +z_position_rotation);
	object[a].position.y = radius_orientationMath.cos(degree360/number_of_object *a +z_position_rotation);

	}
	}
	renderer.render( scene, camera );
	}
	render();

	</script>
	</body>
	</html>