Merge pull request JessicaML#38 from Paarmita/master

stars galaxy lesson added
gargshruti30 · May 25, 2018 · c7430e0 · c7430e0
2 parents 94a1897 + f8e312e
commit c7430e0
Show file tree

Hide file tree

Showing 11 changed files with 1,763 additions and 0 deletions.
diff --git a/galaxy/images/screenshot.png b/galaxy/images/screenshot.png
diff --git a/galaxy/images/stars.png b/galaxy/images/stars.png
diff --git a/galaxy/images/twinkling.png b/galaxy/images/twinkling.png
diff --git a/galaxy/index.html b/galaxy/index.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Spiral galaxy</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width">
+		<style>
+			body {
+				background-color: black;
+				background-image: url("./images/stars.png"), url("./images/twinkling.png");
+				margin: 0px;
+				overflow: hidden;
+				color: white;
+				font-family: helvetica, sans-serif;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="message"></div>
+		<div id="container"></div>
+		<script src="js/three.min.js"></script>
+		<script src="js/OrbitControls.js"></script>
+		<script src="js/Detector.js"></script>
+
+		<script type="x-shader/x-vertex" id="vertexshader">
+
+			attribute float size;
+			attribute vec3 ca;
+
+			varying vec3 vColor;
+
+			void main() {
+
+				vColor = ca;
+
+				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+				gl_PointSize = size;
+				gl_PointSize = size * ( 100.0 / length( mvPosition.xyz ) );
+
+				gl_Position = projectionMatrix * mvPosition;
+
+			}
+
+		</script>
+
+		<script type="x-shader/x-fragment" id="fragmentshader">
+
+			uniform vec3 color;
+			uniform sampler2D texture;
+
+			varying vec3 vColor;
+
+			void main() {
+
+				gl_FragColor = vec4( color * vColor, 1.0 );
+				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
+
+			}
+
+		</script>
+
+		<script>
+
+			var mouseX = 0, mouseY = 0,
+
+			windowHalfX = window.innerWidth / 2,
+			windowHalfY = window.innerHeight / 2,
+
+			camera, scene, renderer, particleSystem;
+
+			var PI2 = Math.PI * 2;
+
+			init();
+			animate();
+
+			function init() {
+
+				var container, galaxy;
+
+				container = document.createElement('div');
+				document.body.appendChild(container);
+
+				//intialize camera
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
+				camera.position.z = 6;
+				camera.position.y = 6;
+
+				// Add OrbitControls so that we can pan around with the mouse.
+				controls = new THREE.OrbitControls( camera );
+				controls.addEventListener( 'change', render );
+
+
+				//initialize scene
+				scene = new THREE.Scene();
+
+				// Render the scene.
+				renderer = Detector.webgl? new THREE.WebGLRenderer(): document.getElementById("message").textContent = "Your browser does not support WebGL.";
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				// Generate the circle texture
+				var circleTexture = new THREE.Texture(generateCircleTexture());
+				circleTexture.needsUpdate = true;
+
+				// Set up the shaders
+				attributes = {
+					size: {	type: 'f', value: [] },
+					ca:   {	type: 'c', value: [] }
+				};
+
+				uniforms = {
+					amplitude: { type: "f", value: 1.0 },
+					color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+					texture:   { type: "t", value: circleTexture },
+				};
+
+				uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
+
+				var shaderMaterial = new THREE.ShaderMaterial( {
+					uniforms: 		uniforms,
+					attributes:     attributes,
+					vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+					transparent:	true
+				});
+
+				// Galaxy properties
+				var galaxy = new THREE.Geometry();
+				var starsPerArm = 1000;
+				var arms = 5;
+				var armAngle = 270 / arms;
+
+				// Create the galaxy structure
+				for (arm = 0; arm < arms; arm++) {
+					for (i = 0; i <= starsPerArm; i++) {
+
+						radius = i / 40;
+						angle = i / 100 + (armAngle * (arm + 1));
+
+						x = radius * Math.cos(angle) + rand();
+						y = rand() / 5;
+						z = radius * Math.sin(angle) + rand();
+
+						// Add stars
+						randResult = Math.random() * (starsPerArm);
+						if(randResult < i*i) {
+							galaxy.vertices.push(new THREE.Vector3(x + rand(), y + rand(), z + rand()));
+						}
+
+						// Add about 50% more stars with some position variation for a better result
+						galaxy.vertices.push(new THREE.Vector3(x, y, z));
+						if(rand() >= 0) {
+							galaxy.vertices.push(new THREE.Vector3(x + rand(), y + rand(), z + rand()));
+						}
+					}
+				}
+
+				// Create the particle system
+				//https://code.tutsplus.com/tutorials/webgl-with-threejs-textures-particles--net-35836
+				particleSystem = new THREE.ParticleSystem(galaxy, shaderMaterial);
+				particleSystem.sortParticles = true;
+
+				// Data to send to the shader
+				var vertices = particleSystem.geometry.vertices;
+				var values_size = attributes.size.value;
+				var values_color = attributes.ca.value;
+				console.log("vertices = " + vertices.length);
+
+				// Color variation
+				for( var v = 0; v < vertices.length; v++ ) {
+
+					values_size[ v ] = 0.2 + rand();
+					values_color[ v ] = new THREE.Color( 0xffffff );
+					var starType = Math.random();
+					values_color[ v ].setRGB(1, 1, 1);
+				}
+
+				// Add the particle system to the scene
+				scene.add(particleSystem);
+
+				// Resize listener
+				window.addEventListener( 'resize', onWindowResize, false );
+			}
+
+			function generateCircleTexture() {
+
+				// draw a circle in the center of the canvas
+				var size = 64;
+
+				// create canvas
+				var canvas = document.createElement('canvas');
+				canvas.width = size;
+				canvas.height = size;
+
+				// get context
+				var context = canvas.getContext('2d');
+
+				// draw circle
+				var centerX = size / 2;
+				var centerY = size / 2;
+				var radius = size / 2;
+
+				for(var i = 1; i < 33; i++) {
+					context.beginPath();
+					context.arc(centerX, centerY, (radius / 2) + (i / 2), 0, 2 * Math.PI, false);
+					context.fillStyle = "rgba(255, 255, 255, " + (1 / i) + ")";
+					context.fill();
+				}
+
+				return canvas;
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				particleSystem.rotation.y += 0.0001;
+
+				controls.update();
+				requestAnimationFrame( animate );
+				render();
+			}
+
+			function render() {
+				// camera.lookAt(scene.position);
+				renderer.render( scene, camera );
+
+			}
+
+			function rand() {
+				return Math.random() - 0.5;
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/galaxy/js/Detector.js b/galaxy/js/Detector.js
@@ -0,0 +1,77 @@
+//https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js
+
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+var Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () { 
+		try { 
+			var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); 
+		} catch( e ) { 
+			return false; 
+		} } )(),
+	workers: !! window.Worker,
+	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
+
+	getWebGLErrorMessage: function () {
+
+		var element = document.createElement( 'div' );
+		element.id = 'webgl-error-message';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		if ( ! this.webgl ) {
+
+			element.innerHTML = window.WebGLRenderingContext ? [
+				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function ( parameters ) {
+
+		var parent, id, element;
+
+		parameters = parameters || {};
+
+		parent = parameters.parent !== undefined ? parameters.parent : document.body;
+		id = parameters.id !== undefined ? parameters.id : 'oldie';
+
+		element = Detector.getWebGLErrorMessage();
+		element.id = id;
+
+		parent.appendChild( element );
+
+	}
+
+};
+
+// browserify support
+if ( typeof module === 'object' ) {
+
+	module.exports = Detector;
+
+}
+
+
+
+