Index: other-projects/nz-flag-design/trunk/render-3d/CSS/button.css
===================================================================
--- other-projects/nz-flag-design/trunk/render-3d/CSS/button.css	(revision 29547)
+++ other-projects/nz-flag-design/trunk/render-3d/CSS/button.css	(revision 29547)
@@ -0,0 +1,29 @@
+.myButton {
+	-moz-box-shadow: 0px 1px 14px 11px #f0f7fa;
+	-webkit-box-shadow: 0px 1px 14px 11px #f0f7fa;
+	box-shadow: 0px 1px 14px 11px #f0f7fa;
+	background-image:url("../images/snowButton.jpg"); 
+	background-color:#33bdef;
+	-moz-border-radius:42px;
+	-webkit-border-radius:42px;
+	border-radius:42px;
+	border:4px solid #057fd0;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Permanent Marker;
+	font-size:28px;
+	padding:25px 60px;
+	text-decoration:none;
+	text-shadow:2px 2px 20px #5b6178;
+}
+.myButton:hover {
+	-moz-box-shadow:inset 0px 1px 14px 11px #f0f7fa;
+	-webkit-box-shadow:inset 0px 1px 14px 11px #f0f7fa;
+	box-shadow:inset 0px 1px 14px 11px #f0f7fa;	
+	background-color:#019ad2;
+}
+.myButton:active {
+	position:relative;
+	top:1px;
+}
Index: other-projects/nz-flag-design/trunk/render-3d/Flag_files/Flag.js
===================================================================
--- other-projects/nz-flag-design/trunk/render-3d/Flag_files/Flag.js	(revision 29537)
+++ other-projects/nz-flag-design/trunk/render-3d/Flag_files/Flag.js	(revision 29547)
@@ -341,17 +341,4 @@
 	ballPosition.x = Math.cos(Date.now()/200) * 70
 
-	if (sphere.visible)
-	for (particles = cloth.particles, i=0, il = particles.length
-			;i<il;i++) {
-		particle = particles[i];
-		pos = particle.position;
-		diff.subVectors(pos, ballPosition);
-		if (diff.length() < ballSize) {
-			// collided
-			diff.normalize().multiplyScalar(ballSize);
-			pos.copy(ballPosition).add(diff);
-		}
-	}
-
 	// Pin Constrains
 	if(Boolean(pinning)){
Index: other-projects/nz-flag-design/trunk/render-3d/flag.html
===================================================================
--- other-projects/nz-flag-design/trunk/render-3d/flag.html	(revision 29537)
+++ other-projects/nz-flag-design/trunk/render-3d/flag.html	(revision 29547)
@@ -3,7 +3,10 @@
 <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
-		<title>three.js webgl - 3D Flag</title>
+		<title>three.js webgl - 3D Flag hhh</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<head>
+			<link rel="stylesheet" type="text/css" href="CSS/button.css">
+			<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
 		<style>
 			body {
@@ -38,5 +41,5 @@
 			<a onclick="wind = !wind;">Wind</a> |
 			<a onclick="raining = !raining;">Rain</a> |
-			<a onclick="snowing = !snowing;">Snow</a>
+			<a class="myButton" onclick="snowing = !snowing;">Snow</a>
 			
 		</div>
@@ -98,14 +101,11 @@
 			var keyboard = new KeyboardState();
 			var clothTextures = [];
-			
-			/* testing cloth simulation */
-			
-			var flagRelease;
+
 			var initial = true;
 			
 			var pins = [];
-			for (var j=0;j<=cloth.h;j++)
-			pins.push(cloth.index(0, j));
-			
+			for (var j=0;j<=cloth.h;j++){
+				pins.push(cloth.index(0, j));
+			}
 			/*  Light variables	  */
 			var light;
@@ -134,5 +134,5 @@
 
 			var clothGeometry;
-			var sphere;
+			
 			var object, tmpFlag, arrow;
 
@@ -141,5 +141,5 @@
 			// array for holding existing flags
 			
-			var flags = ["./images/flag.png", "./images/random.png", "./images/canada.png"];
+			var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"];
 			var flagSelector = 0;
 			var materials;
@@ -184,5 +184,5 @@
 
 				light.castShadow = true;
-				light.shadowCameraVisible = true;
+				light.shadowCameraVisible = false;
 
 				light.shadowMapWidth = 2048;
@@ -212,6 +212,4 @@
 				snowSystem = new snow();
 				weatherSystem = new weatherSystem(scene);
-				//weatherSystem.set(rainSystem);
-			
 			
 				/* ------------------ */
@@ -222,4 +220,5 @@
 				for(i = 0; i < flags.length; i++){
 					clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
+					//clothTextures[i].needsUpdate = true;
 					clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.RepeatWrapping;
 					clothTextures[i].anisotropy = 16;
@@ -228,19 +227,4 @@
 				
 				// weather
-				
-
-				
-				
-				
-
-				// sphere
-
-				var ballGeo = new THREE.SphereGeometry( ballSize, 20, 20 );
-				var ballMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
-
-				sphere = new THREE.Mesh( ballGeo, ballMaterial );
-				sphere.castShadow = true;
-				sphere.receiveShadow = true;
-				//scene.add( sphere );
 
 				// arrow
@@ -280,5 +264,5 @@
 				mesh.position.x = 0;
 				mesh.receiveShadow = true;
-				mesh.castShadow = true;
+				mesh.castShadow = false;
 				scene.add( mesh );
 
@@ -289,5 +273,5 @@
 				mesh.position.x = 0; //125
 				mesh.receiveShadow = true;
-				mesh.castShadow = true;
+				mesh.castShadow = false;
 				scene.add( mesh );
 
@@ -321,21 +305,17 @@
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				sphere.visible = !true
-
 			}
 			
 			//
+			var flag_toggle = 0;
 			
 			function createFlag() {
-			
-				// create materials
-				materials = [
-					new THREE.MeshPhongMaterial( { alphaTest: 0.5, ambient: 0xffffff, color: 0xffffff, specular: 0x030303, emissive: 0x111111, shininess: 20, perPixel: true, metal: false, map: clothTextures[flagSelector], side: THREE.DoubleSide } ),
-					new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true, opacity: 0.9	 } )
-				];
 	
-				
-				
 				if(initial){
+				
+					// create materials
+					materials = [
+						new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTextures[0], side: THREE.DoubleSide } ),
+					];
 					
 					// cloth geometry
@@ -352,6 +332,8 @@
 					object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
 					object.position.set( 0, 150, 0 );
-					object.castShadow = true;
-					object.receiveShadow = true;
+					object.castShadow = false;
+					object.receiveShadow = false;
+					object.material.transparent = true;
+					object.material.opacity = 0.85;
 					scene.add( object );
 					initial = false;
@@ -359,27 +341,11 @@
 				
 				}else{
-					setPinning(false);
-					flagRelease = setInterval(function () {switchFlag()}, 2000);
-				}
-				
-			}
-			
-			//
-
-			function switchFlag() {
-
-				scene.remove( object );
-				setPinning(true);
-				object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
-
-				object.position.set( 0, 0, 0 );
-				object.castShadow = true;
-				object.receiveShadow = true;
-				scene.add( object );
-				object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
-				
-				// stop the timer for calling this method
-				clearInterval(flagRelease);
-			}
+					clothTextures[flagSelector] = THREE.ImageUtils.loadTexture( flags[flagSelector]+'?'+Date.now() );
+					object.material.map = clothTextures[flagSelector];
+					object.material.needsUpdate = true;
+				}
+				
+			}
+			
 
 			//
@@ -441,23 +407,6 @@
 				clothGeometry.normalsNeedUpdate = true;
 				clothGeometry.verticesNeedUpdate = true;
-
-				sphere.position.copy( ballPosition );
-				
-				
-				document.addEventListener( "mousemove", onMouseMove, false);
-				document.addEventListener( "mousedown", onMouseClick, false);
-				document.addEventListener( "mouseup", onMouseUp, false);
-					
-				/*if(mouseDown === true){
-					cameraRot += (clickPos - mouseX)/500;
-					cameraElevation += (clickPos - mouseY)/500;
-					if(cameraElevation > 180) 	cameraElevation = 0;
-					if(cameraElevation < 0  )	cameraElevation = 180;
-					if(cameraRot > 360) cameraRot = 0;
-					if(cameraRot < 0  )	cameraRot = 360;
-					camera.position.y = Math.sin(THREE.Math.degToRad(cameraElevation))*1500;
-					camera.position.x = Math.cos(THREE.Math.degToRad(cameraRot))*1500;
-					camera.position.z = Math.sin(THREE.Math.degToRad(cameraRot))*1500;
-				}*/
+				
+
 				
 				if(raining && weatherSystem.type != rainSystem){
@@ -478,22 +427,5 @@
 
 			}
-			
-			function onMouseMove(){
-				
-				mouseX = event.clientX;
-				mouseY = event.clientY;
-
-			}
-			
-			function onMouseClick(){
-				mouseDown = true;
-				clickPos = event.clientX;
-			}
-			
-			function onMouseUp(){
-				mouseDown = false;
-			}
-
-		</script><div><canvas width="1366" height="600"></canvas><!--<div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="padding: 2px 0px 3px; background: transparent;"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">55 FPS</span> (0-60)</div><canvas width="74" height="30" style="display: none; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(8, 24, 8);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">16 MS</span> (1-607201)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(24, 8, 13);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MEM</span> (10-10)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div></div></div><div><canvas height="932" width="1920"></canvas><div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="background: none repeat scroll 0% 0% transparent; padding: 2px 0px 3px;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">60 FPS</span> (30-69)</div><canvas style="display: none; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(8, 24, 8); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MS</span> (5-504)</div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(24, 8, 13); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">MEM</span></div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div></div>--></div>
-	
+
+		</script><div><canvas width="1366" height="600"></canvas>
 </body></html>
Index: other-projects/nz-flag-design/trunk/render-3d/test.html
===================================================================
--- other-projects/nz-flag-design/trunk/render-3d/test.html	(revision 29547)
+++ other-projects/nz-flag-design/trunk/render-3d/test.html	(revision 29547)
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<!-- saved from url=(0032)http://webgl.onikenkon.com/flag/ -->
+<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+		<title>three.js webgl - 3D Flag</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				text-align: center;
+				padding: 10px;
+				z-index: 10;
+				width: 100%;
+				position: absolute;
+				top: 80%;
+			}
+
+			a {
+				text-decoration: underline;
+				cursor: pointer;
+			}
+		</style>
+	<style type="text/css"></style></head>
+
+	<body>
+		<div id="info">
+			Toggle: <a onclick="rotate = !rotate;">Camera</a> |
+			<a onclick="wind = !wind;">Wind</a>
+		</div>
+
+		<script src="./Flag_files/three.js"></script>
+		<script src="./Flag_files/Detector.js"></script>
+		<script src="./Flag_files/Stats.js"></script>
+		<script src="./Flag_files/Flag.js"></script>
+		<script src="./Flag_files/KeyboardState.js"></script>
+
+		<script type="x-shader/x-fragment" id="fragmentShaderDepth">
+
+			uniform sampler2D texture;
+			varying vec2 vUV;
+
+			vec4 pack_depth( const in float depth ) {
+
+				const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
+				const vec4 bit_mask  = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
+				vec4 res = fract( depth * bit_shift );
+				res -= res.xxyz * bit_mask;
+				return res;
+
+			}
+
+			void main() {
+
+				vec4 pixel = texture2D( texture, vUV );
+
+				if ( pixel.a < 0.5 ) discard;
+
+				gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
+
+			}
+		</script>
+
+		<script type="x-shader/x-vertex" id="vertexShaderDepth">
+
+			varying vec2 vUV;
+
+			void main() {
+
+				vUV = 0.75 * uv;
+
+				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+				gl_Position = projectionMatrix * mvPosition;
+
+			}
+
+		</script>
+
+		<script>
+			var keyboard = new KeyboardState();
+			var clothTextures = [];
+			
+			/* testing cloth simulation */
+			
+			var flagRelease;
+			var initial = true;
+			
+			var pins = [];
+			for (var j=0;j<=cloth.h;j++)
+			pins.push(cloth.index(0, j));
+			
+			/* Weather variables */
+			
+			var particle;
+			var particleSystem;
+			var particleCount;
+			
+			/* ------------------ */
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+			var camera, scene, renderer;
+
+			var clothGeometry;
+			var sphere;
+			var object, tmpFlag, arrow;
+
+			var rotate = false;
+			
+			// array for holding existing flags
+			
+			var flags = ["./images/flag.png", "./images/random.png", "./images/canada.png"];
+			var flagSelector = 0;
+			var materials;
+			var vertexShader;
+			var fragmentShader;
+			var uniforms;
+
+			init();
+			animate();
+
+			function init() {
+			
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+				
+				
+				
+				// scene
+
+				scene = new THREE.Scene();
+
+				//scene.fog = new THREE.Fog( 0x0, 500, 10000 );
+				//scene.fog.color.setHSL( 0.6, 0.2, 1 );
+
+				// camera
+
+				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.y = 50;
+				camera.position.z = 1500;
+				scene.add( camera );
+				
+				// lights
+
+				var light;
+
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
+
+				light = new THREE.DirectionalLight( 0xffffff, 1.75 );
+				light.color.setHSL( 0.6, 0.125, 1 );
+				light.position.set( 50, 200, 100 );
+				light.position.multiplyScalar( 1.3 );
+
+				light.castShadow = true;
+				//light.shadowCameraVisible = true;
+
+				light.shadowMapWidth = 2048;
+				light.shadowMapHeight = 2048;
+
+				var d = 100;
+
+				light.shadowCameraLeft = -d;
+				light.shadowCameraRight = d;
+				light.shadowCameraTop = d;
+				light.shadowCameraBottom = -d;
+
+				light.shadowCameraFar = 1000;
+				light.shadowDarkness = 0.5;
+
+				scene.add( light );
+				
+				var light2 = new THREE.AmbientLight( 0x404040 ); // soft white light
+				scene.add( light2 );
+				
+				light = new THREE.DirectionalLight( 0xffffff, 0.35 );
+				light.color.setHSL( 0.3, 0.95, 1 );
+				light.position.set( 0, -1, 0 );
+
+				scene.add( light );
+				
+				// load flag textures
+				var i;
+				
+				for(i = 0; i < flags.length; i++){
+					clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
+					clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.RepeatWrapping;
+					clothTextures[i].anisotropy = 16;
+				}
+				createFlag();
+				
+
+				// sphere
+
+				var ballGeo = new THREE.SphereGeometry( ballSize, 20, 20 );
+				var ballMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
+
+				sphere = new THREE.Mesh( ballGeo, ballMaterial );
+				sphere.castShadow = true;
+				sphere.receiveShadow = true;
+				scene.add( sphere );
+
+				// arrow
+
+				arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
+				arrow.position.set( -200, -50, -200 );
+				scene.add( arrow );
+
+				
+					// create the particle variables
+		particleCount = 1000,
+	    particles = new THREE.Geometry(),
+		pMaterial = new THREE.ParticleBasicMaterial({
+			color: 0xFFFFFF,
+			size: 20,
+			map: THREE.ImageUtils.loadTexture(
+				"./images/raindrop.png"
+			),
+			blending: THREE.AdditiveBlending,
+			transparent: true
+		});
+	
+	// now create the individual particles
+	for(var p = 0; p < particleCount; p++) {
+	
+		// create a particle with random
+		// position values, -250 -> 250
+		var pX = Math.random() * 500 - 250,
+			pY = Math.random() * 500 - 250,
+			pZ = Math.random() * 500 - 250,
+		    particle = new THREE.Vector3(pX, pY, pZ);
+			
+		// create a velocity vector
+			particle.velocity = new THREE.Vector3(
+			0,				// x
+			-Math.random(),	// y
+			0);				// z
+		
+		// add it to the geometry
+		particles.vertices.push(particle);
+	}
+	
+	// create the particle system
+		particleSystem = new THREE.ParticleSystem(
+		particles,
+		pMaterial);
+	
+	particleSystem.sortParticles = true;
+	
+	// add it to the scene
+	scene.add(particleSystem);
+				
+
+				// ground
+
+				var initColor = new THREE.Color( 0x00ff00 );
+				initColor.setHSL( 0.25, 0.85, 0.5 );
+				var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
+
+				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture, perPixel: true } );
+
+				var groundTexture = THREE.ImageUtils.loadTexture( "grass.png", undefined, function() { groundMaterial.map = groundTexture } );
+				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
+				groundTexture.repeat.set( 1, 1 );
+				groundTexture.anisotropy = 16;
+
+				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
+				mesh.position.y = -250;
+				mesh.rotation.x = - Math.PI / 2;
+				mesh.receiveShadow = true;
+				scene.add( mesh );
+
+				// poles
+
+				var poleGeo = new THREE.BoxGeometry( 5, 750, 5 );
+				var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100, perPixel: true } );
+
+				var mesh = new THREE.Mesh( poleGeo, poleMat );
+				mesh.position.y = -175; //-250
+				mesh.position.x = 0;
+				mesh.receiveShadow = true;
+				mesh.castShadow = true;
+				scene.add( mesh );
+
+
+				var gg = new THREE.BoxGeometry( 10, 10, 10 );
+				var mesh = new THREE.Mesh( gg, poleMat );
+				mesh.position.y = -250;
+				mesh.position.x = 0; //125
+				mesh.receiveShadow = true;
+				mesh.castShadow = true;
+				scene.add( mesh );
+
+
+				//
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				//renderer.setClearColor( scene.fog.color );
+
+				container.appendChild( renderer.domElement );
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+				renderer.physicallyBasedShading = true;
+
+				renderer.shadowMapEnabled = true;
+
+				//
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
+				stats.domElement.children[ 0 ].style.background = "transparent";
+				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				sphere.visible = !true
+
+			}
+			
+			//
+			
+			function createFlag() {
+			
+				// create materials
+				materials = [
+					new THREE.MeshPhongMaterial( { alphaTest: 0.5, ambient: 0xffffff, color: 0xffffff, specular: 0x030303, emissive: 0x111111, shininess: 20, perPixel: true, metal: false, map: clothTextures[flagSelector], side: THREE.DoubleSide } ),
+					new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true, opacity: 0.9	 } )
+				];
+	
+				
+				
+				if(initial){
+					
+					// cloth geometry
+
+					clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
+					clothGeometry.dynamic = true;
+					clothGeometry.computeFaceNormals();
+
+					uniforms = { texture:  { type: "t", value: 0, texture: clothTextures[0] } };
+					vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
+					fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;	
+
+					// cloth mesh
+					object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
+					object.position.set( 0, 0, 0 );
+					object.castShadow = true;
+					object.receiveShadow = true;
+					scene.add( object );
+					initial = false;
+					object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
+				
+				}else{
+					setPinning(false);
+					flagRelease = setInterval(function () {switchFlag()}, 2000);
+				}
+				
+			}
+			
+			//
+
+			function switchFlag() {
+
+				scene.remove( object );
+				setPinning(true);
+				object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
+
+				object.position.set( 0, 0, 0 );
+				object.castShadow = true;
+				object.receiveShadow = true;
+				scene.add( object );
+				object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
+				
+				// stop the timer for calling this method
+				clearInterval(flagRelease);
+			}
+
+			//
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				var time = Date.now();
+
+				windStrength = Math.cos( time / 7000 ) * 100 + 200;
+				windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
+				arrow.setLength( windStrength );
+				arrow.setDirection( windForce );
+				
+				// add some rotation to the system
+				particleSystem.rotation.y += 0.01;
+		
+				var pCount = particleCount;
+				while(pCount > 0) {
+
+					// get the particle
+					particle = particles.vertices[pCount-1];
+					
+					// check if we need to reset
+					if(particle.y < -200) {
+						particle.y = 200;
+						//particle.velocity.y = 0;
+					}
+					particle.velocity.y = -0.001;
+					particle.setY(
+						particle.y + particle.velocity);
+					pCount--;
+				}
+		
+		// flag to the particle system that we've
+		// changed its vertices. This is the
+		// dirty little secret.
+		particleSystem.geometry.__dirtyVertices = true;
+				simulate(time);
+				render();
+				stats.update();
+
+			}
+			
+			function render() {
+				
+				
+				var timer = Date.now() * 0.0002;
+				
+				var p = cloth.particles;
+				keyboard.update();
+				if( keyboard.down("A")) {
+					flagSelector--;
+					if(flagSelector < 0) flagSelector = flags.length-1;
+					createFlag();
+
+				}else if(keyboard.down("D")) {
+					flagSelector++;
+					if(flagSelector >= flags.length) flagSelector = 0;	
+					createFlag();
+				}
+				
+
+				for ( var i = 0, il = p.length; i < il; i ++ ) {
+
+					clothGeometry.vertices[ i ].copy( p[ i ].position );
+
+				}
+				
+				clothGeometry.computeFaceNormals();
+				clothGeometry.computeVertexNormals();
+
+				clothGeometry.normalsNeedUpdate = true;
+				clothGeometry.verticesNeedUpdate = true;
+
+				sphere.position.copy( ballPosition );
+
+				if ( rotate ) {
+
+					camera.position.x = Math.cos( timer ) * 1500;
+					camera.position.z = Math.sin( timer ) * 1500;
+
+				}
+
+				camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+100, scene.position.z) );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script><div><canvas width="1366" height="600"></canvas><!--<div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="padding: 2px 0px 3px; background: transparent;"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">55 FPS</span> (0-60)</div><canvas width="74" height="30" style="display: none; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(8, 24, 8);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">16 MS</span> (1-607201)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(24, 8, 13);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MEM</span> (10-10)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div></div></div><div><canvas height="932" width="1920"></canvas><div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="background: none repeat scroll 0% 0% transparent; padding: 2px 0px 3px;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">60 FPS</span> (30-69)</div><canvas style="display: none; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(8, 24, 8); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MS</span> (5-504)</div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(24, 8, 13); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">MEM</span></div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div></div>--></div>
+	
+</body></html>
Index: other-projects/nz-flag-design/trunk/render-3d/weather/snow.js
===================================================================
--- other-projects/nz-flag-design/trunk/render-3d/weather/snow.js	(revision 29537)
+++ other-projects/nz-flag-design/trunk/render-3d/weather/snow.js	(revision 29547)
@@ -14,5 +14,5 @@
 		
 			// create the particle variables
-			this.particleCount = 1000,
+			this.particleCount = 2000,
 			this.particles = new THREE.Geometry(),
 			
@@ -25,5 +25,5 @@
 				blending: THREE.AdditiveBlending,
 				transparent: true,
-				opacity: 0.5
+				opacity: 0.9
 			});
 
@@ -33,7 +33,7 @@
 				// create a particle with random
 				// position values, -250 -> 250
-				var pX = Math.random() * window.innerWidth * 2 - window.innerWidth,
-					pY = Math.random() * window.innerHeight * 3 - window.innerHeight,
-					pZ = Math.random() * window.innerWidth * 2 - window.innerWidth;
+				var pX = Math.random() * window.innerWidth * 3 - window.innerWidth,
+					pY = Math.random() * window.innerHeight * 4 - window.innerHeight,
+					pZ = Math.random() * window.innerWidth * 3 - window.innerWidth;
 					this.particle = new THREE.Vector3(pX, pY, pZ);	
 				
