index.html

﻿	<!DOCTYPE HTML>
	<html lang="en">
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
		<script
		src="https://unpkg.com/p5ble@0.0.7/dist/p5.ble.js"
		type="text/javascript"
		></script>
		<title>Dancing Pairs</title>
		<meta charset="utf-8">
		<style>
			body {
			color: #fff;
			font-family: Monospace;
			font-size: 13px;
			text-align: center;

			background-color: #000;
			margin: 0px;
			overflow: hidden;
			}

			#info {
				opacity: 0;
			color: #ffffff;
			position: absolute;
			top: 0px;
			width: 100%;
			padding: 5px;
			}

			a {
			color: gold;
			}

			button {
				background: #ffffff20;
				opacity: 0.8;
				color: #fff;
				border: none;
				border-radius: 2px;
				padding: 8px;

			}
			

			#oldie {
				opacity: 0;
			font-family: monospace;
			font-size: 13px;

			text-align: center;
			background: rgb(0, 0, 50);
			color: #fff;
			padding: 1em;

			width: 475px;
			margin: 5em auto 0;

			display: none;
			}

		</style>
		
	</head>


	<body>
		<script src="sketch.js"></script>

		<div id="container"></div>

		<script src="three.min.js"></script>

		<script src="js/controls/TrackballControls.js"></script>

		<script src="js/shaders/CopyShader.js"></script>
		<script src="js/shaders/FXAAShader.js"></script>
		<script src="js/shaders/HorizontalTiltShiftShader.js"></script>
		<script src="js/shaders/VerticalTiltShiftShader.js"></script>

		<script src="js/postprocessing/EffectComposer.js"></script>
		<script src="js/postprocessing/RenderPass.js"></script>
		<script src="js/postprocessing/BloomPass.js"></script>
		<script src="js/postprocessing/ShaderPass.js"></script>
		<script src="js/postprocessing/MaskPass.js"></script>
		<script src="js/postprocessing/SavePass.js"></script>

		<script src="js/MarchingCubes.js"></script>
		<script src="js/ShaderToon.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>
		<script src="js/libs/DAT.GUI.min.js"></script>
		
		
		<script>
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var MARGIN = 0;

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;

			var container, stats;

			var camera1, scene, renderer;

			var proximityFactor = 0;
			var mesh, texture1, geometry, materials, material, current_material;

			var light, pointLight1, pointLight2, ambientLight1;

			var effect, effect2, resolution, numBlobs;

			var composer, effectFXAA, hblur, vblur;

			var effectController;

			var reflectionCube

			var color1 = new THREE.Color(), color2 = new THREE.Color(), color3 = new THREE.Color();
			var emmisive1 = new THREE.Color(), emmisive2 = new THREE.Color(), emmisive3 = new THREE.Color();
			var specular1 = new THREE.Color(), specular2 = new THREE.Color(), specular3 = new THREE.Color();

			var startHue1, startHue2, endHue;

			var time = 0;
			var clock = new THREE.Clock();

			var i, ballx, bally, ballz, subtract, strength1, strength2;
			var i, ballBx, ballBy, ballBz;
			var i, ballCx, ballCy, ballCz;
			var i, ballDx, ballDy, ballDz;


			var i, ball2x, ball2y, ball2z;
			var i, ballEx, ballEy, ballEz;
			var i, ballFx, ballFy, ballFz;
			var i, ballGx, ballGy, ballGz;

			var distBetweenBlobs;
			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				// CAMERA

				camera1 = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera1.position.set( 10, 10, 1400 );

				// CONTROLS

				controls = new THREE.TrackballControls( camera1 );

				// SCENE

				scene = new THREE.Scene();

				// LIGHTS

				light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 150, 50, 100 );
				scene.add( light );

				pointLight1 = new THREE.PointLight({h: 0.5, s: 0.55, v: 0.8});
				pointLight1.position.set( 100, 100, 150 );
				scene.add( pointLight1 );

				pointLight2 = new THREE.PointLight( 0xD5D887 );
				pointLight2.position.set( 50, 50, 50 );
				pointLight2.intensity = 1;
				scene.add( pointLight2 );

				ambientLight1 = new THREE.AmbientLight( 0x000000 );
				ambientLight1.intensity = 1;
				scene.add( ambientLight1 );

				// MATERIALS

				materials = generateMaterials();
				current_material = "flat";

				// MARCHING CUBES

				resolution = 30;
				numBlobs = 2;	
				material1 = "matte";	
				material2 = "matte2";	


				effect = new THREE.MarchingCubes( resolution, materials[material1].m, true, true );
				effect.position.set( 0, 0, 0 );
				effect.scale.set( 700, 700,700 );

				effect.enableUvs = false;
				effect.enableColors = false;

				effect2 = new THREE.MarchingCubes( resolution, materials[ material2 ].m, true, true );	
				effect2.position.set( 0, 0, 0 );	
				effect2.scale.set( 700, 700, 700 );	
				effect2.enableUvs = false;	
				effect2.enableColors = false;	
				scene.add( effect );	
				scene.add( effect2 );

				// RENDERER

				renderer = new THREE.WebGLRenderer( { clearColor: 0x050505, clearAlpha: 1, alpha: false } );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

				renderer.domElement.style.position = "absolute";
				renderer.domElement.style.top = "0px";
				renderer.domElement.style.left = "0px";

				container.appendChild( renderer.domElement );
				//

				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				renderer.physicallyBasedShading = true;

				// STATS

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				stats.domElement.children[ 0 ].children[ 0 ].style.opacity = 0;
				stats.domElement.children[ 0 ].style.background = "transparent";
				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";

				// COMPOSER

				renderer.autoClear = false;

				renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
				renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );

				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );

				hblur = new THREE.ShaderPass( THREE.HorizontalTiltShiftShader );
				vblur = new THREE.ShaderPass( THREE.VerticalTiltShiftShader );

				var bluriness = 8;

				hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
				vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;

				hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.5;

				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );

				composer = new THREE.EffectComposer( renderer, renderTarget );

				var renderModel = new THREE.RenderPass( scene, camera1);

				vblur.renderToScreen = true;
				//effectFXAA.renderToScreen = true;

				composer = new THREE.EffectComposer( renderer, renderTarget );

				composer.addPass( renderModel );

				composer.addPass( effectFXAA );

				composer.addPass( hblur );
				composer.addPass( vblur );

				// GUI

				setupGui();

				// EVENTS

				window.addEventListener( 'resize', onWindowResize, false );

			}

			//

			function onWindowResize( event ) {

				SCREEN_WIDTH = window.innerWidth/2;
				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;

				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

				camera1.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
				camera1.updateProjectionMatrix();

				renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );

				composer.reset( renderTarget );

				hblur.uniforms[ 'h' ].value = 4 / SCREEN_WIDTH;
				vblur.uniforms[ 'v' ].value = 4 / SCREEN_HEIGHT;

				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );

			}

			function generateMaterials() {

				// environment map

				var path = "textures/cube/SwedishRoyalCastle/";
				var format = '.jpg';
				var urls = [
					path + 'px' + format, path + 'nx' + format,
					path + 'py' + format, path + 'ny' + format,
					path + 'pz' + format, path + 'nz' + format
				];
				let tempColor;
				startHue1 = 0.8889;
				startHue2 = 0.4529;
				endHue = 0.7163;
				color1.setHSV(0.8889,1.0,1.0);
			

				color2.setHSV(0.4529,1.0,1.0);
				color3.setHSV(0.7163,1.0,1.0);
		
				
				reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
				reflectionCube.format = THREE.RGBFormat;

				var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() );
				reflectionCube.format = THREE.RGBFormat;

				// toons

			
				var texture1 = THREE.ImageUtils.loadTexture( "textures/ash_uvgrid01.jpg" );
				texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;

				var materials = {

				"matte" :
				{
					m: new THREE.MeshPhongMaterial( { color: color1, emissive: color1, emissiveIntensity: 0.5, specular: color1, envMap: reflectionCube, reflectivity: 0.4, opacity:1, shininess: 150, perPixel: true} ),
					// h: 1, s: 0.5, v: 1
				},

				"matte2" :
				{
					m: new THREE.MeshPhongMaterial( { color: color2, emissive: color2, emissiveIntensity: 0.5, specular: color2, envMap: reflectionCube, reflectivity: 0.4, opacity:1, shininess: 150, perPixel: true} ),
					// h: 1, s: 0.5, v: 1
				}
				};

				return materials;

			}

			function createShaderMaterial( id, light, ambientLight1 ) {

				var shader = THREE.ShaderToon[ id ];

				var u = THREE.UniformsUtils.clone( shader.uniforms );

				var vs = shader.vertexShader;
				var fs = shader.fragmentShader;

				var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );

				material.uniforms.uDirLightPos.value = light.position;
				material.uniforms.uDirLightColor.value = light.color;

				material.uniforms.uAmbientLightColor.value = ambientLight1.color;

				return material;

			}

			// this controls content of marching cubes voxel field

			function updateCubesforBallA( object, time, numblobs) {

	object.reset();

	// fill the field with some metaballs

	//let x1 = mapScale(gyroZa, -5, 5, 50, 1500);

	subtract = 15;
	strength1 = 2 / ( ( Math.sqrt( numblobs ) - 1 ) / 5 + 1 );
	strength2 = 1 / ( ( Math.sqrt( numblobs ) - 1 ) / 5 + 1 );

	
	let scalingBalls = 0.6
		
		//BALL A

		//gyroXa = 0;
		
		bally = 0.7 - proximityFactor + gyroYa/4 + Math.cos(time)/10;
		ballx = 0.8 - proximityFactor + gyroXa/4 + Math.cos(time)/20;
		ballz = 0.5 ;

		ballBy = bally + 0.18  - Math.cos(time + 0.2)/20;
		ballBx = ballx - 0.20 - Math.cos(time + 0.15)/50;
		ballBz = ballz/20 + 0.4

		ballCy = bally + 0.15 - Math.cos(time - 0.1)/20;
		ballCx = ballx + 0.18 - Math.cos(time - 0.1)/40;
		ballCz = ballz/20 +0.5
		
		ballDy = bally - 0.15 ;
		ballDx = ballx + 0.2 ;
		ballDz = ballz/20 +0.6 
		//END OF BLOB A
		distBetweenBlobs = ballx - ball2x;

		
		//console.log(color1);


		color1.setHSV(getInterpolatedHue(startHue1, endHue, distBetweenBlobs),1.0,1.0);
		effect.material = new THREE.MeshPhongMaterial( { color: color1, emissive: color1, emissiveIntensity: 0.5, specular: color1, envMap: reflectionCube, reflectivity: 0.4, opacity:1, shininess: 150, perPixel: true} )
			
		
		//effect.scale.set(x1, x1,  x1 );


		 if(gyroXa!= 10){
		//	if(true){
			object.addBall(0.5 + scalingBalls*(ballx-0.5), 0.5 + scalingBalls*(bally-0.5), 0.5 + scalingBalls*(ballz-0.5), scalingBalls*strength1, subtract);
			object.addBall(0.5 + scalingBalls*(ballBx-0.5), 0.5 + scalingBalls*(ballBy-0.5), 0.5 + scalingBalls*(ballBz-0.5), scalingBalls*strength2, subtract);
			object.addBall(0.5 + scalingBalls*(ballCx-0.5), 0.5 + scalingBalls*(ballCy-0.5), 0.5 + scalingBalls*(ballCz-0.5), scalingBalls*strength1, subtract);
			object.addBall(0.5 + scalingBalls*(ballDx-0.5), 0.5 + scalingBalls*(ballDy-0.5), 0.5 + scalingBalls*(ballDz-0.5), scalingBalls*strength2, subtract);

		}


	}


	function getInterpolatedHue(startHue, endHue, distance){
		if(distance<0.2){
			return endHue;
		}
		else if(distance>0.6){
			return startHue;
		}
		else{
			
			return startHue + (endHue-startHue)*5*(0.6-distance);
		}
	}

	function updateCubesforBallB( object, time, numblobs ) {
	

	//let x2 = mapScale(gyroZb, -5, 5, 50, 1500);

	subtract = 15;
	strength3 = 2 / ( ( Math.sqrt( numblobs ) - 1 ) / 5 + 1 );
	strength4 = 1 / ( ( Math.sqrt( numblobs ) - 1 ) / 5 + 1 );

	//BALL B
	let scalingBalls = 0.6;

	//gyroXb = 0;
console.log("Proximity factor:" + proximityFactor);
	ball2y = 0.2 + proximityFactor + gyroYb/4 + Math.sin(time)/20;
	ball2x = 0.1 + proximityFactor +  gyroXb/4 + Math.sin(time)/20;
	ball2z = 0.5;

	ballEy = ball2y + 0.15 - Math.sin(time + 0.3)/20;
	ballEx = ball2x + 0.18 ;
	ballEz = 0.5

	ballFy = ball2y - 0.1 - Math.sin(time - 0.1)/10;
	ballFx = ball2x + 0.3 - Math.sin(time - 0.1)/10;
	ballFz = 0.5

	ballGy = ball2y - 0.15 - Math.sin(time - 0.1)/10;
	ballGx = ball2x + 0.05 - Math.sin(time - 0.1)/10;
	ballGz = 0.5 

	//END OF BLOB B


	color2.setHSV(getInterpolatedHue(startHue2, endHue, distBetweenBlobs),1.0,1.0);
	effect2.material = new THREE.MeshPhongMaterial( { color: color2, emissive: color2, emissiveIntensity: 0.5, specular: color2, envMap: reflectionCube, reflectivity: 0.4, opacity:1, shininess: 150, perPixel: true} )
		

	//effect2.scale.set( x2, x2, x2 );

	 if(gyroXb!= 10){
	//if(true){
	object.addBall(0.5 + scalingBalls*(ball2x-0.5), 0.5 + scalingBalls*(ball2y-0.5), 0.5 + scalingBalls*(ball2z-0.5), scalingBalls*strength3, subtract);
	object.addBall(0.5 + scalingBalls*(ballEx-0.5), 0.5 + scalingBalls*(ballEy-0.5), 0.5 + scalingBalls*(ballEz-0.5), scalingBalls*strength4, subtract);
	object.addBall(0.5 + scalingBalls*(ballFx-0.5), 0.5 + scalingBalls*(ballFy-0.5), 0.5 + scalingBalls*(ballFz-0.5), scalingBalls*strength3, subtract);
	object.addBall(0.5 + scalingBalls*(ballGx-0.5), 0.5 + scalingBalls*(ballGy-0.5), 0.5 + scalingBalls*(ballGz-0.5), scalingBalls*strength4, subtract);
	}


	}


			function animate() {

				requestAnimationFrame( animate );
				

				render();
				stats.update();

			}

			function render() {

				var delta = clock.getDelta();


				time += delta * effectController.speed * 0.5;

				controls.update( delta );

				// marching cubes

				if ( effectController.resolution !== resolution ) {

					resolution = effectController.resolution;
					effect.init( resolution );

				}

				if ( effectController.isolation !== effect.isolation ) {

					effect.isolation = effectController.isolation;

				}

	
		let accA = Math.sqrt(Math.pow(gyroXa,2)+Math.pow(gyroYa,2)+Math.pow(gyroZa,2))
		let accB = Math.sqrt(Math.pow(gyroXb,2)+Math.pow(gyroYb,2)+Math.pow(gyroZb,2))
		let proximityThreshold = 1.1;
		console.log("Acc A" + accA);
		console.log("Acc B" + accB);
		if(accA > proximityThreshold &&  accB > proximityThreshold)
		{
			proximityFactor = 0.2;
		}
		else{
			if(proximityFactor > 0)
			{
				proximityFactor -=0.001;
			}
			
		}
				
		updateCubesforBallA( effect, time, effectController.numBlobs);

		//if(true){
		//if(distBetweenBlobs<0.5){
		 	color1.setHSV(getInterpolatedHue(startHue1, endHue, distBetweenBlobs),1.0,1.0);
	 effect.material = new THREE.MeshPhongMaterial( { color: color1, emissive: color2, emissiveIntensity: 0.5, specular: color2, envMap: reflectionCube, reflectivity: 0.4, opacity:1, shininess: 150, perPixel: true} )
	 effect2.reset();
			updateCubesforBallB( effect, time, effectController.numBlobs );

		//}
		//else{

			effect2.reset();
			updateCubesforBallB( effect2, time, effectController.numBlobs);

		//}
				
				
				// lights

				light.position.set( effectController.lx, effectController.ly, effectController.lz );
				light.position.normalize();

				pointLight1.color.setHSV( effectController.lhue, effectController.lsaturation, effectController.lvalue );

				// render

				if ( effectController.postprocessing ) {

					composer.render( delta );

				} else {

					renderer.clear();
					renderer.render( scene, camera1 );

				}

				
			}

			function mapScale (number, inMin, inMax, outMin, outMax) {
		return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
	}


			//

			function setupGui() {

	var createHandler = function( id ) {

		return function() {

			var mat_old = materials[ current_material ];
			mat_old.h = m_h.getValue();
			mat_old.s = m_s.getValue();
			mat_old.v = m_v.getValue();

			current_material = id;

			var mat = materials[ id ];
			effect.material = mat.m;

			m_h.setValue( mat.h );
			m_s.setValue( mat.s );
			m_v.setValue( mat.v );

			mm.setValue( current_material );

			if ( current_material === "textured" ) {

				effect.enableUvs = true;

			} else {

				effect.enableUvs = false;

			}

			if ( current_material === "colors" ) {

				effect.enableColors = true;

			} else {

				effect.enableColors = false;

			}

		};

	};

	function toggle( e ) {

		if ( e.style.display === "block" ) {

			e.style.display = "none";

		} else {

			e.style.display = "block";

		}

	}

	effectController = {

	material:   "matte",

		
	speed :   3.5,	
	numBlobs:   5,	
	resolution: 50,	
	isolation:  50,

	floor: false,
	wallx: false,
	wallz: false,

	hue1:    1,
	saturatio: 1,
	value:    1,

	lhue:     0.04,
	lsaturation: 1.0,
	lvalue:     1.0,

	lx: 0.5,
	ly: 0.1,	
	lz: 0.3,

	postprocessing: false,

	h_m:  function() {
	for (var i = 0; i < g_m.length; i++)  toggle(g_m[ i ].domElement);
	},
	h_c:  function() {
	for (var i = 0; i < g_c.length; i++)  toggle(g_c[ i ].domElement);
	},
	h_pc: function() {
	for (var i = 0; i < g_pc.length; i++) toggle(g_pc[ i ].domElement);
	},
	h_do: function() {
	for (var i = 0; i < g_do.length; i++) toggle(g_do[ i ].domElement);
	},
	h_s:  function() {
	for (var i = 0; i < g_s.length; i++)  toggle(g_s[ i ].domElement);
	},
	h_r:  function() {
	for (var i = 0; i < g_r.length; i++)  toggle(g_r[ i ].domElement);
	},

	dummy: function() {
	}

	};

	var e1, e2, e3, e4, e5, e6, h, m_h, m_s, m_v,
	g_m = [], g_c, g_pc, g_do, g_s, g_r, mm,
	gui = new DAT.GUI();

	// material (type)

	mm = gui.add( effectController, "material" );
	mm.domElement.style.display = "none";

	h = gui.add( effectController, "h_m" ).name( "Materials" );
	setGuiHeaderStyle(h, 0, 65, 50);

	for ( var m in materials ) {

		effectController[ m ] = createHandler( m );

		e1 = gui.add( effectController, m ).name( m );
		setGuiElementStyle( [ e1 ], 0, 65, 50, "block" );
		g_m.push( e1 );

	}

	// material (color)

	h = gui.add( effectController, "h_c" ).name( "Material color" );

	m_h = gui.add( effectController, "hue1", 0.0, 1.0, 0.025 );
	m_s = gui.add( effectController, "saturatio", 0.0, 1.0, 0.025 );
	m_v = gui.add( effectController, "value", 0.0, 1.0, 0.025 );

	g_c = [ m_h, m_s, m_v ];

	setGuiHeaderStyle( h, 20, 65, 50 );
	setGuiElementStyle( g_c, 20, 65, 50, "block" );

	// light (point)

	h = gui.add(effectController, "h_pc").name("Point light color");

	e1 = gui.add(effectController, "lhue", 0.0, 1.0, 0.025).name("hue");
	e2 = gui.add(effectController, "lsaturation", 0.0, 1.0, 0.025).name("saturatio");
	e3 = gui.add(effectController, "lvalue", 0.0, 1.0, 0.025).name("value");

	g_pc = [ e1, e2, e3 ];

	setGuiHeaderStyle(h, 50, 65, 50);
	setGuiElementStyle(g_pc, 50, 65, 50);

	// light (directional)

	h = gui.add(effectController, "h_do").name("Directional light orientation");

	e1 = gui.add(effectController, "lx", -1.0, 1.0, 0.025).name("x");
	e2 = gui.add(effectController, "ly", -1.0, 1.0, 0.025).name("y");
	e3 = gui.add(effectController, "lz", -1.0, 1.0, 0.025).name("z");

	g_do = [ e1, e2, e3 ];

	setGuiHeaderStyle(h, 80, 65, 50);
	setGuiElementStyle(g_do, 80, 65, 50);

	// simulation

	h = gui.add(effectController, "h_s").name("Simulation");

	e1 = gui.add(effectController, "speed", 0.1, 8.0, 0.05);
	e2 = gui.add(effectController, "numBlobs", 1, 50, 1);
	e3 = gui.add(effectController, "resolution", 14, 40, 1);
	e4 = gui.add(effectController, "isolation", 10, 300, 1);

	e5 = gui.add(effectController, "floor");
	e6 = gui.add(effectController, "wallx");
	e7 = gui.add(effectController, "wallz");

	e5.updateDisplay();
	e6.updateDisplay();
	e7.updateDisplay();

	g_s = [ e1, e2, e3, e4, e5, e6, e7 ];

	setGuiHeaderStyle(h, 200, 65, 50);
	setGuiElementStyle(g_s, 200, 65, 50, "block");

	// rendering

	h = gui.add(effectController, "h_r").name("Rendering");
	e1 = gui.add(effectController, "postprocessing");

	g_r = [ e1 ];

	setGuiHeaderStyle(h, 225, 65, 50);
	setGuiElementStyle(g_r, 225, 65, 50, "block");

	// save

	//e1 = gui.add(GUI, "saveURL").name("Save to URL");
	//setGuiHeaderStyle(e1, 250, 65, 50, "block");

	gui.domElement.style.backgroundColor = "#222";
	gui.domElement.style.visibility = "hidden";

	// restore material from URL

	id = mm.getValue()
	current_material = id;
	var mat = materials[ id ];
	//effect.material = mat.m;

	}


	function setGuiHeaderStyle( g, h, s, v ) {

	var color = "hsl(" + h + "," + s + "%, " + v + "%)";

	g.domElement.style.borderLeft = "solid 5px " + color;
	g.domElement.style.background = color;
	g.domElement.style.fontWeight = "bold";

	}

	function setGuiElementStyle( a, h, s, v, display ) {

	var s, color = "hsl(" + h + "," + s + "%, " + v + "%)";

	for ( i = 0; i < a.length; i ++ ) {

		s = a[ i ].domElement.style;
		s.borderLeft = "solid 5px " + color;
		s.display = display ? display : "none";

	}

	}


	</script>


	</body>
	</html>