├── ambientjam.ogg
├── vinyl_texture.png
├── .idea
    └── vcs.xml
├── lib
    ├── minivents.min.js
    ├── shaders
    │   ├── CopyShader.js
    │   ├── RGBShiftShader.js
    │   ├── KaleidoShader.js
    │   ├── SepiaShader.js
    │   ├── StaticShader.js
    │   ├── TechnicolorShader.js
    │   ├── VignetteShader.js
    │   ├── RenderPass.js
    │   ├── ShaderPass.js
    │   ├── FilmPass.js
    │   ├── FilmShader.js
    │   ├── ConvolutionShader.js
    │   ├── CRTShader.js
    │   ├── BloomPass.js
    │   └── EffectComposer.js
    ├── stats.min.js
    ├── tween.min.js
    ├── simplexnoise.js
    └── dat.gui.min.js
├── js
    ├── configurestats.js
    ├── setrenderer.js
    ├── eventsandhelpers.js
    ├── flyingdot.js
    ├── setpostprocessingchain.js
    ├── configuregui.js
    ├── settings.js
    ├── plexusparticles.js
    ├── spotlights.js
    └── main.js
├── README.md
├── css
    └── ambientjam.css
├── index.html
└── LICENSE


/ambientjam.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCodeTherapy/plexus-shaders/HEAD/ambientjam.ogg


--------------------------------------------------------------------------------
/vinyl_texture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCodeTherapy/plexus-shaders/HEAD/vinyl_texture.png


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/lib/minivents.min.js:
--------------------------------------------------------------------------------
1 | function Events(n){var t={},e=[];n=n||this,n.on=function(e,r,l){return(t[e]=t[e]||[]).push([r,l]),n},n.off=function(r,l){r||(t={});for(var i=t[r]||e,u=i.length=l?i.length:0;u--;)l==i[u][0]&&i.splice(u,1);return n},n.emit=function(r){for(var l,i=t[r]||e,u=i.length>0?i.slice(0,i.length):i,c=0;l=u[c++];)l[0].apply(l[1],e.slice.call(arguments,1));return n}}


--------------------------------------------------------------------------------
/js/configurestats.js:
--------------------------------------------------------------------------------
 1 | function configureStats() {
 2 |     threeStats.domElement.removeAttribute('style');
 3 |     threeStats.domElement.style.position    = 'absolute';
 4 |     threeStats.domElement.style.cursor	    = 'pointer';
 5 |     threeStats.domElement.style.right	    = '12px';
 6 |     threeStats.domElement.style.bottom		= '12px';
 7 |     threeStats.domElement.style.opacity	    = '0.7';
 8 |     threeStats.showPanel(0);
 9 |     statsContainer.appendChild( threeStats.dom );
10 | }
11 | 


--------------------------------------------------------------------------------
/lib/shaders/CopyShader.js:
--------------------------------------------------------------------------------
 1 | THREE.CopyShader = {
 2 | 
 3 | 	uniforms: {
 4 | 
 5 | 		"tDiffuse": { value: null },
 6 | 		"opacity":  { value: 1.0 }
 7 | 
 8 | 	},
 9 | 
10 | 	vertexShader: [
11 | 
12 | 		"varying vec2 vUv;",
13 | 
14 | 		"void main() {",
15 | 
16 | 			"vUv = uv;",
17 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
18 | 
19 | 		"}"
20 | 
21 | 	].join( "\n" ),
22 | 
23 | 	fragmentShader: [
24 | 
25 | 		"uniform float opacity;",
26 | 
27 | 		"uniform sampler2D tDiffuse;",
28 | 
29 | 		"varying vec2 vUv;",
30 | 
31 | 		"void main() {",
32 | 
33 | 			"vec4 texel = texture2D( tDiffuse, vUv );",
34 | 			"gl_FragColor = opacity * texel;",
35 | 
36 | 		"}"
37 | 
38 | 	].join( "\n" )
39 | 
40 | };
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Plexus&Shaders
 2 | 
 3 | This is a WebGL tech demo created using ThreeJS + Vertex Shaders and Fragment Shaders. It consists in a music visualizer with some post-processing shaders and a particle system to stress test ThreeJS technology on modern video-cards. It is a Chrome Experiment, and it is best visualized on Google Chrome (it works fine on Firefox though).
 4 | 
 5 | ![](http://mgz.me/wp-content/uploads/2018/01/plexus.jpg)
 6 | 
 7 | The code was written using a nVidia GeForce GTX 980Ti on my test environment, and any browser achieves 60 frames per second even with all the post-processing shaders and the particles system enabled.
 8 | 
 9 | GIFs and Screenshots are ugly... If you have a good video-card, check the [Live **Demo** HERE](http://mgz.me/plexus-shaders) =)
10 | 


--------------------------------------------------------------------------------
/js/setrenderer.js:
--------------------------------------------------------------------------------
 1 | function setRenderer() {
 2 |     var sceneRenderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 3 |     sceneRenderer.setClearColor(0x000000, 0.0);
 4 |     sceneRenderer.setPixelRatio( window.devicePixelRatio );
 5 |     sceneRenderer.setSize( width, height );
 6 |     sceneRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
 7 |     sceneRenderer.shadowMap.enabled = true;
 8 |     sceneRenderer.toneMapping = toneMappingTypes[lightningParams.toneMapping];
 9 |     sceneRenderer.gammaInput = true;
10 |     sceneRenderer.gammaOutput = true;
11 |     sceneRenderer.autoClear = false;
12 | 
13 |     previousTonemap = sceneRenderer.toneMapping;
14 |     previousExposure = Math.pow(lightningParams.exposure, 5.0);
15 | 
16 |     return sceneRenderer;
17 | }
18 | 


--------------------------------------------------------------------------------
/lib/shaders/RGBShiftShader.js:
--------------------------------------------------------------------------------
 1 | THREE.RGBShiftShader = {
 2 | 
 3 | 	uniforms: {
 4 | 
 5 | 		"tDiffuse": { value: null },
 6 | 		"amount":   { value: 0.005 },
 7 | 		"angle":    { value: 0.0 }
 8 | 
 9 | 	},
10 | 
11 | 	vertexShader: [
12 | 
13 | 		"varying vec2 vUv;",
14 | 
15 | 		"void main() {",
16 | 
17 | 			"vUv = uv;",
18 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
19 | 
20 | 		"}"
21 | 
22 | 	].join( "\n" ),
23 | 
24 | 	fragmentShader: [
25 | 
26 | 		"uniform sampler2D tDiffuse;",
27 | 		"uniform float amount;",
28 | 		"uniform float angle;",
29 | 
30 | 		"varying vec2 vUv;",
31 | 
32 | 		"void main() {",
33 | 
34 | 			"vec2 offset = amount * vec2( cos(angle), sin(angle));",
35 | 			"vec4 cr = texture2D(tDiffuse, vUv + offset);",
36 | 			"vec4 cga = texture2D(tDiffuse, vUv);",
37 | 			"vec4 cb = texture2D(tDiffuse, vUv - offset);",
38 | 			"gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);",
39 | 
40 | 		"}"
41 | 
42 | 	].join( "\n" )
43 | 
44 | };
45 | 


--------------------------------------------------------------------------------
/lib/shaders/KaleidoShader.js:
--------------------------------------------------------------------------------
 1 | THREE.KaleidoShader = {
 2 | 
 3 | 	uniforms: {
 4 | 
 5 | 		"tDiffuse": { value: null },
 6 | 		"sides":    { value: 6.0 },
 7 | 		"angle":    { value: 0.0 }
 8 | 
 9 | 	},
10 | 
11 | 	vertexShader: [
12 | 
13 | 		"varying vec2 vUv;",
14 | 
15 | 		"void main() {",
16 | 
17 | 			"vUv = uv;",
18 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
19 | 
20 | 		"}"
21 | 
22 | 	].join( "\n" ),
23 | 
24 | 	fragmentShader: [
25 | 
26 | 		"uniform sampler2D tDiffuse;",
27 | 		"uniform float sides;",
28 | 		"uniform float angle;",
29 | 		
30 | 		"varying vec2 vUv;",
31 | 
32 | 		"void main() {",
33 | 
34 | 			"vec2 p = vUv - 0.5;",
35 | 			"float r = length(p);",
36 | 			"float a = atan(p.y, p.x) + angle;",
37 | 			"float tau = 2. * 3.1416 ;",
38 | 			"a = mod(a, tau/sides);",
39 | 			"a = abs(a - tau/sides/2.) ;",
40 | 			"p = r * vec2(cos(a), sin(a));",
41 | 			"vec4 color = texture2D(tDiffuse, p + 0.5);",
42 | 			"gl_FragColor = color;",
43 | 
44 | 		"}"
45 | 
46 | 	].join( "\n" )
47 | 
48 | };
49 | 


--------------------------------------------------------------------------------
/lib/shaders/SepiaShader.js:
--------------------------------------------------------------------------------
 1 | THREE.SepiaShader = {
 2 | 
 3 | 	uniforms: {
 4 | 
 5 | 		"tDiffuse": { value: null },
 6 | 		"amount":   { value: 1.0 }
 7 | 
 8 | 	},
 9 | 
10 | 	vertexShader: [
11 | 
12 | 		"varying vec2 vUv;",
13 | 
14 | 		"void main() {",
15 | 
16 | 			"vUv = uv;",
17 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
18 | 
19 | 		"}"
20 | 
21 | 	].join( "\n" ),
22 | 
23 | 	fragmentShader: [
24 | 
25 | 		"uniform float amount;",
26 | 
27 | 		"uniform sampler2D tDiffuse;",
28 | 
29 | 		"varying vec2 vUv;",
30 | 
31 | 		"void main() {",
32 | 
33 | 			"vec4 color = texture2D( tDiffuse, vUv );",
34 | 			"vec3 c = color.rgb;",
35 | 
36 | 			"color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );",
37 | 			"color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );",
38 | 			"color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );",
39 | 
40 | 			"gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );",
41 | 
42 | 		"}"
43 | 
44 | 	].join( "\n" )
45 | 
46 | };
47 | 


--------------------------------------------------------------------------------
/lib/shaders/StaticShader.js:
--------------------------------------------------------------------------------
 1 | THREE.StaticShader = {
 2 | 
 3 | 	uniforms: {
 4 | 
 5 | 		"tDiffuse": { type: "t", value: null },
 6 | 		"time":     { type: "f", value: 0.0 },
 7 | 		"amount":   { type: "f", value: 0.5 },
 8 | 		"size":     { type: "f", value: 4.0 }
 9 | 	},
10 | 
11 | 	vertexShader: [
12 | 
13 | 	"varying vec2 vUv;",
14 | 
15 | 	"void main() {",
16 | 
17 | 		"vUv = uv;",
18 | 		"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
19 | 
20 | 	"}"
21 | 
22 | 	].join("\n"),
23 | 
24 | 	fragmentShader: [
25 | 
26 | 	"uniform sampler2D tDiffuse;",
27 | 	"uniform float time;",
28 | 	"uniform float amount;",
29 | 	"uniform float size;",
30 | 
31 | 	"varying vec2 vUv;",
32 | 
33 | 	"float rand(vec2 co){",
34 | 		"return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);",
35 | 	"}",
36 | 
37 | 	"void main() {",
38 | 		"vec2 p = vUv;",
39 | 		"vec4 color = texture2D(tDiffuse, p);",
40 | 		"float xs = floor(gl_FragCoord.x / size);",
41 | 		"float ys = floor(gl_FragCoord.y / size);",
42 | 		"vec4 snow = vec4(rand(vec2(xs * time,ys * time))*amount);",
43 | 
44 | 		//"gl_FragColor = color + amount * ( snow - color );", //interpolate
45 | 
46 | 		"gl_FragColor = color+ snow;", //additive
47 | 
48 | 	"}"
49 | 
50 | 	].join("\n")
51 | 
52 | };
53 | 


--------------------------------------------------------------------------------
/lib/shaders/TechnicolorShader.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author flimshaw / http://charliehoey.com
 3 |  *
 4 |  * Technicolor Shader
 5 |  * Simulates the look of the two-strip technicolor process popular in early 20th century films.
 6 |  * More historical info here: http://www.widescreenmuseum.com/oldcolor/technicolor1.htm
 7 |  * Demo here: http://charliehoey.com/technicolor_shader/shader_test.html
 8 |  */
 9 | 
10 | THREE.TechnicolorShader = {
11 | 
12 | 	uniforms: {
13 | 
14 | 		"tDiffuse": { value: null },
15 |         "amount":   { type: "f", value: 0.5 }
16 | 	},
17 | 
18 | 	vertexShader: [
19 | 
20 | 		"varying vec2 vUv;",
21 | 
22 | 		"void main() {",
23 | 
24 | 			"vUv = uv;",
25 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
26 | 
27 | 		"}"
28 | 
29 | 	].join( "\n" ),
30 | 
31 | 	fragmentShader: [
32 | 
33 | 		"uniform sampler2D tDiffuse;",
34 | 		"uniform float amount;",
35 | 		"varying vec2 vUv;",
36 | 
37 | 		"void main() {",
38 | 
39 | 			"vec4 tex = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );",
40 |             "vec4 orgTex = vec4(tex.r, tex.g, tex.b, 1.0);",
41 | 			"vec4 newTex = vec4(tex.r, (tex.g + tex.b) * .5, (tex.g + tex.b) * .5, 1.0);",
42 |             "vec4 mixTex = mix(orgTex, newTex, amount);",
43 | 
44 | 			"gl_FragColor = mixTex;",
45 | 
46 | 		"}"
47 | 
48 | 	].join( "\n" )
49 | 
50 | };
51 | 


--------------------------------------------------------------------------------
/lib/shaders/VignetteShader.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author alteredq / http://alteredqualia.com/
 3 |  *
 4 |  * Vignette shader
 5 |  * based on PaintEffect postprocess from ro.me
 6 |  * http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
 7 |  */
 8 | 
 9 | THREE.VignetteShader = {
10 | 
11 | 	uniforms: {
12 | 
13 | 		"tDiffuse": { value: null },
14 | 		"offset":   { value: 1.0 },
15 | 		"darkness": { value: 1.0 }
16 | 
17 | 	},
18 | 
19 | 	vertexShader: [
20 | 
21 | 		"varying vec2 vUv;",
22 | 
23 | 		"void main() {",
24 | 
25 | 			"vUv = uv;",
26 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
27 | 
28 | 		"}"
29 | 
30 | 	].join( "\n" ),
31 | 
32 | 	fragmentShader: [
33 | 
34 | 		"uniform float offset;",
35 | 		"uniform float darkness;",
36 | 
37 | 		"uniform sampler2D tDiffuse;",
38 | 
39 | 		"varying vec2 vUv;",
40 | 
41 | 		"void main() {",
42 | 
43 | 			// Eskil's vignette
44 | 
45 | 			// "vec4 texel = texture2D( tDiffuse, vUv );",
46 | 			// "vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );",
47 | 			// "gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );",
48 | 
49 | 			"vec4 color = texture2D( tDiffuse, vUv );",
50 | 			"float dist = distance( vUv, vec2( 0.5 ) );",
51 | 			"color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
52 | 			"gl_FragColor = color;",
53 | 
54 | 		"}"
55 | 
56 | 	].join( "\n" )
57 | 
58 | };
59 | 


--------------------------------------------------------------------------------
/lib/shaders/RenderPass.js:
--------------------------------------------------------------------------------
 1 | THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
 2 | 
 3 | 	THREE.Pass.call( this );
 4 | 
 5 | 	this.scene = scene;
 6 | 	this.camera = camera;
 7 | 
 8 | 	this.overrideMaterial = overrideMaterial;
 9 | 
10 | 	this.clearColor = clearColor;
11 | 	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
12 | 
13 | 	this.clear = true;
14 | 	this.clearDepth = false;
15 | 	this.needsSwap = false;
16 | 
17 | };
18 | 
19 | THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
20 | 
21 | 	constructor: THREE.RenderPass,
22 | 
23 | 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
24 | 
25 | 		var oldAutoClear = renderer.autoClear;
26 | 		renderer.autoClear = false;
27 | 
28 | 		this.scene.overrideMaterial = this.overrideMaterial;
29 | 
30 | 		var oldClearColor, oldClearAlpha;
31 | 
32 | 		if ( this.clearColor ) {
33 | 
34 | 			oldClearColor = renderer.getClearColor().getHex();
35 | 			oldClearAlpha = renderer.getClearAlpha();
36 | 
37 | 			renderer.setClearColor( this.clearColor, this.clearAlpha );
38 | 
39 | 		}
40 | 
41 | 		if ( this.clearDepth ) {
42 | 
43 | 			renderer.clearDepth();
44 | 
45 | 		}
46 | 
47 | 		renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );
48 | 
49 | 		if ( this.clearColor ) {
50 | 
51 | 			renderer.setClearColor( oldClearColor, oldClearAlpha );
52 | 
53 | 		}
54 | 
55 | 		this.scene.overrideMaterial = null;
56 | 		renderer.autoClear = oldAutoClear;
57 | 	}
58 | 
59 | } );
60 | 


--------------------------------------------------------------------------------
/lib/shaders/ShaderPass.js:
--------------------------------------------------------------------------------
 1 | THREE.ShaderPass = function ( shader, textureID ) {
 2 | 
 3 | 	THREE.Pass.call( this );
 4 | 
 5 | 	this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
 6 | 
 7 | 	if ( shader instanceof THREE.ShaderMaterial ) {
 8 | 
 9 | 		this.uniforms = shader.uniforms;
10 | 
11 | 		this.material = shader;
12 | 
13 | 	} else if ( shader ) {
14 | 
15 | 		this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
16 | 
17 | 		this.material = new THREE.ShaderMaterial( {
18 | 
19 | 			defines: shader.defines || {},
20 | 			uniforms: this.uniforms,
21 | 			vertexShader: shader.vertexShader,
22 | 			fragmentShader: shader.fragmentShader
23 | 
24 | 		} );
25 | 
26 | 	}
27 | 
28 | 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
29 | 	this.scene = new THREE.Scene();
30 | 
31 | 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
32 | 	this.quad.frustumCulled = false; // Avoid getting clipped
33 | 	this.scene.add( this.quad );
34 | 
35 | };
36 | 
37 | THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
38 | 
39 | 	constructor: THREE.ShaderPass,
40 | 
41 | 	render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {
42 | 
43 | 		if ( this.uniforms[ this.textureID ] ) {
44 | 
45 | 			this.uniforms[ this.textureID ].value = readBuffer.texture;
46 | 
47 | 		}
48 | 
49 | 		this.quad.material = this.material;
50 | 
51 | 		if ( this.renderToScreen ) {
52 | 
53 | 			renderer.render( this.scene, this.camera );
54 | 
55 | 		} else {
56 | 
57 | 			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
58 | 
59 | 		}
60 | 
61 | 	}
62 | 
63 | } );
64 | 


--------------------------------------------------------------------------------
/lib/shaders/FilmPass.js:
--------------------------------------------------------------------------------
 1 | THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
 2 | 
 3 | 	THREE.Pass.call( this );
 4 | 
 5 | 	if ( THREE.FilmShader === undefined )
 6 | 		console.error( "THREE.FilmPass relies on THREE.FilmShader" );
 7 | 
 8 | 	var shader = THREE.FilmShader;
 9 | 
10 | 	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
11 | 
12 | 	this.material = new THREE.ShaderMaterial( {
13 | 
14 | 		uniforms: this.uniforms,
15 | 		vertexShader: shader.vertexShader,
16 | 		fragmentShader: shader.fragmentShader
17 | 
18 | 	} );
19 | 
20 | 	if ( grayscale !== undefined )	this.uniforms.grayscale.value = grayscale;
21 | 	if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
22 | 	if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
23 | 	if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
24 | 
25 | 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
26 | 	this.scene  = new THREE.Scene();
27 | 
28 | 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
29 | 	this.quad.frustumCulled = false; // Avoid getting clipped
30 | 	this.scene.add( this.quad );
31 | 
32 | };
33 | 
34 | THREE.FilmPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
35 | 
36 | 	constructor: THREE.FilmPass,
37 | 
38 | 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
39 | 
40 | 		this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
41 | 		this.uniforms[ "time" ].value += delta;
42 | 
43 | 		this.quad.material = this.material;
44 | 
45 | 		if ( this.renderToScreen ) {
46 | 
47 | 			renderer.render( this.scene, this.camera );
48 | 
49 | 		} else {
50 | 
51 | 			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
52 | 
53 | 		}
54 | 
55 | 	}
56 | 
57 | } );
58 | 


--------------------------------------------------------------------------------
/lib/stats.min.js:
--------------------------------------------------------------------------------
1 | // stats.js - http://github.com/mrdoob/stats.js
2 | (function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();
3 | u(++l%c.children.length)},!1);var k=(performance||Date).now(),g=k,a=0,r=e(new f.Panel("FPS","#0ff","#002")),h=e(new f.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var t=e(new f.Panel("MB","#f08","#201"));u(0);return{REVISION:16,dom:c,addPanel:e,showPanel:u,begin:function(){k=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();h.update(c-k,200);if(c>g+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
4 | 1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
5 | b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});
6 | 


--------------------------------------------------------------------------------
/lib/shaders/FilmShader.js:
--------------------------------------------------------------------------------
 1 | THREE.FilmShader = {
 2 | 
 3 | 	uniforms: {
 4 | 
 5 | 		"tDiffuse":   { value: null },
 6 | 		"time":       { value: 0.0 },
 7 | 		"nIntensity": { value: 0.5 },
 8 | 		"sIntensity": { value: 0.05 },
 9 | 		"sCount":     { value: 4096 },
10 | 		"grayscale":  { value: 1 }
11 | 
12 | 	},
13 | 
14 | 	vertexShader: [
15 | 
16 | 		"varying vec2 vUv;",
17 | 
18 | 		"void main() {",
19 | 
20 | 			"vUv = uv;",
21 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
22 | 
23 | 		"}"
24 | 
25 | 	].join( "\n" ),
26 | 
27 | 	fragmentShader: [
28 | 
29 | 		"#include <common>",
30 | 		
31 | 		// control parameter
32 | 		"uniform float time;",
33 | 
34 | 		"uniform bool grayscale;",
35 | 
36 | 		// noise effect intensity value (0 = no effect, 1 = full effect)
37 | 		"uniform float nIntensity;",
38 | 
39 | 		// scanlines effect intensity value (0 = no effect, 1 = full effect)
40 | 		"uniform float sIntensity;",
41 | 
42 | 		// scanlines effect count value (0 = no effect, 4096 = full effect)
43 | 		"uniform float sCount;",
44 | 
45 | 		"uniform sampler2D tDiffuse;",
46 | 
47 | 		"varying vec2 vUv;",
48 | 
49 | 		"void main() {",
50 | 
51 | 			// sample the source
52 | 			"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
53 | 
54 | 			// make some noise
55 | 			"float dx = rand( vUv + time );",
56 | 
57 | 			// add noise
58 | 			"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );",
59 | 
60 | 			// get us a sine and cosine
61 | 			"vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );",
62 | 
63 | 			// add scanlines
64 | 			"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;",
65 | 
66 | 			// interpolate between source and result by intensity
67 | 			"cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
68 | 
69 | 			// convert to grayscale if desired
70 | 			"if( grayscale ) {",
71 | 
72 | 				"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
73 | 
74 | 			"}",
75 | 
76 | 			"gl_FragColor =  vec4( cResult, cTextureScreen.a );",
77 | 
78 | 		"}"
79 | 
80 | 	].join( "\n" )
81 | 
82 | };
83 | 


--------------------------------------------------------------------------------
/lib/shaders/ConvolutionShader.js:
--------------------------------------------------------------------------------
 1 | THREE.ConvolutionShader = {
 2 | 
 3 | 	defines: {
 4 | 
 5 | 		"KERNEL_SIZE_FLOAT": "25.0",
 6 | 		"KERNEL_SIZE_INT": "25"
 7 | 
 8 | 	},
 9 | 
10 | 	uniforms: {
11 | 
12 | 		"tDiffuse":        { value: null },
13 | 		"uImageIncrement": { value: new THREE.Vector2( 0.001953125, 0.0 ) },
14 | 		"cKernel":         { value: [] }
15 | 
16 | 	},
17 | 
18 | 	vertexShader: [
19 | 
20 | 		"uniform vec2 uImageIncrement;",
21 | 
22 | 		"varying vec2 vUv;",
23 | 
24 | 		"void main() {",
25 | 
26 | 			"vUv = uv - ( ( KERNEL_SIZE_FLOAT - 1.0 ) / 2.0 ) * uImageIncrement;",
27 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
28 | 
29 | 		"}"
30 | 
31 | 	].join( "\n" ),
32 | 
33 | 	fragmentShader: [
34 | 
35 | 		"uniform float cKernel[ KERNEL_SIZE_INT ];",
36 | 
37 | 		"uniform sampler2D tDiffuse;",
38 | 		"uniform vec2 uImageIncrement;",
39 | 
40 | 		"varying vec2 vUv;",
41 | 
42 | 		"void main() {",
43 | 
44 | 			"vec2 imageCoord = vUv;",
45 | 			"vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
46 | 
47 | 			"for( int i = 0; i < KERNEL_SIZE_INT; i ++ ) {",
48 | 
49 | 				"sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
50 | 				"imageCoord += uImageIncrement;",
51 | 
52 | 			"}",
53 | 
54 | 			"gl_FragColor = sum;",
55 | 
56 | 		"}"
57 | 
58 | 
59 | 	].join( "\n" ),
60 | 
61 | 	buildKernel: function ( sigma ) {
62 | 
63 | 		// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
64 | 
65 | 		function gauss( x, sigma ) {
66 | 
67 | 			return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) );
68 | 
69 | 		}
70 | 
71 | 		var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
72 | 
73 | 		if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
74 | 		halfWidth = ( kernelSize - 1 ) * 0.5;
75 | 
76 | 		values = new Array( kernelSize );
77 | 		sum = 0.0;
78 | 		for ( i = 0; i < kernelSize; ++ i ) {
79 | 
80 | 			values[ i ] = gauss( i - halfWidth, sigma );
81 | 			sum += values[ i ];
82 | 
83 | 		}
84 | 
85 | 		// normalize the kernel
86 | 
87 | 		for ( i = 0; i < kernelSize; ++ i ) values[ i ] /= sum;
88 | 
89 | 		return values;
90 | 
91 | 	}
92 | 
93 | };
94 | 


--------------------------------------------------------------------------------
/css/ambientjam.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Electrolize');
  2 | 
  3 | @font-face {
  4 |     font-family: Electrolize;
  5 | }
  6 | 
  7 | /* reset */
  8 | h1, h2, h3, h4, h5, h6, p {
  9 | 	margin: 0;
 10 | 	padding: 0;
 11 | 	border: 0;
 12 | 	outline: 0;
 13 | 	font-weight: inherit;
 14 | 	font-style: inherit;
 15 | 	font-size: 100%;
 16 | 	font-family: inherit;
 17 | 	vertical-align: baseline;
 18 | }
 19 | 
 20 | body, html{
 21 | 	background: #060612; /* Old browsers */
 22 | 	/* background: -moz-linear-gradient(top,  #203070 0%, #000000 100%); /* FF3.6-15 */
 23 | 	background: -webkit-linear-gradient(top,  #303031 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
 24 | 	/* background: linear-gradient(to bottom,  #203070 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 25 | 	box-sizing: border-box;
 26 | 	margin: 0;
 27 | 	padding: 0;
 28 | 	overflow: hidden;
 29 | 	position: relative;
 30 | 	width: 100vw;
 31 | 	height: 100vh;
 32 | }
 33 | 
 34 | #custom-gui {
 35 | 	position: absolute;
 36 | 	bottom: 21px;
 37 | 	left: 1px;
 38 | 	border-top: 1px dotted #303030;
 39 | }
 40 | 
 41 | #container {
 42 | 	width: 100vw;
 43 | 	height: 100vh;
 44 | 	border: 1px dotted #303030;
 45 | }
 46 | 
 47 | *, *:before, *:after {
 48 |   box-sizing: inherit;
 49 | }
 50 | 
 51 | .modalIinfo {
 52 |     z-index: 10;
 53 |     visibility: hidden;
 54 |     font-family: 'Electrolize', sans-serif;
 55 |     color: #FFFFFF;
 56 | 	position: absolute; top: 40px; left: 40px; right: 40px;
 57 | 	height: auto;
 58 | 	text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
 59 | 	pointer-events: none;
 60 |     padding: 12px;
 61 |     background: rgba(10, 10, 10, .7);
 62 |     border-radius: 12px;
 63 | 
 64 | }
 65 | 
 66 | .modalIinfo h1 {
 67 |     color: #4477FF;
 68 | 	text-align: center;
 69 | 	font-size: 21px;
 70 | 	opacity: 1;
 71 |     padding-top: 0;
 72 | 	padding-bottom: 7px;
 73 | }
 74 | 
 75 | .modalIinfo p {
 76 | 	text-align: justify;
 77 | 	font-size: 18px;
 78 | 	font-family: 'Electrolize', sans-serif;
 79 | 	color: #FFF;
 80 | 	margin: 0;
 81 | 	line-height: 120%;
 82 | }
 83 | 
 84 | .modalIinfo p strong {
 85 |     color: #4477FF;
 86 |     text-shadow: 0 0 3px #0000FF;
 87 | }
 88 | 
 89 | .modalIinfo a {
 90 | 	color: #FF3100;
 91 | 	text-decoration: none;
 92 | 	position: relative;
 93 | 	pointer-events: auto;
 94 | }
 95 | 
 96 | #aboutBtn {
 97 |     font-family: 'Electrolize', sans-serif;
 98 |     z-index: 999;
 99 |     position: absolute;
100 |     top: 42px;
101 |     right: 42px;
102 |     background: rgba(10, 10, 10, .7);
103 |     border: 0;
104 |     border-radius: 12px;
105 |     padding: 6px;
106 |     color: #FFFFFF;
107 | }
108 | 
109 | #aboutBtn:hover {
110 |     background-color: #4477FF;
111 | }


--------------------------------------------------------------------------------
/lib/shaders/CRTShader.js:
--------------------------------------------------------------------------------
 1 | THREE.CRTShader = {
 2 | 	uniforms: {
 3 | 		"tDiffuse": 	{ type: "t", value: null },
 4 | 		"time": 		{ type: "f", value: 0.0 },
 5 | 		"distortion":   { type: "f", value: 3.0 },
 6 | 		"distortion2":  { type: "f", value: 5.0 },
 7 | 		"speed":     	{ type: "f", value: 0.2 },
 8 | 		"rollSpeed":    { type: "f", value: 0.1 }
 9 | 	},
10 | 
11 | 	vertexShader: [
12 | 		"varying vec2 vUv;",
13 | 		"void main() {",
14 | 		"vUv = uv;",
15 | 		"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
16 | 		"}"
17 | 
18 | 	].join("\n"),
19 | 
20 | 	fragmentShader: [
21 | 
22 | 		"uniform sampler2D tDiffuse;",
23 | 		"uniform float time;",
24 | 		"uniform float distortion;",
25 | 		"uniform float distortion2;",
26 | 		"uniform float speed;",
27 | 		"uniform float rollSpeed;",
28 | 		"varying vec2 vUv;",
29 | 		
30 | 		"vec3 mod289(vec3 x) {",
31 | 		"  return x - floor(x * (1.0 / 289.0)) * 289.0;",
32 | 		"}",
33 | 
34 | 		"vec2 mod289(vec2 x) {",
35 | 		"  return x - floor(x * (1.0 / 289.0)) * 289.0;",
36 | 		"}",
37 | 
38 | 		"vec3 permute(vec3 x) {",
39 | 		"  return mod289(((x*34.0)+1.0)*x);",
40 | 		"}",
41 | 
42 | 		"float snoise(vec2 v)",
43 | 		"  {",
44 | 		"  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0",
45 | 		"                      0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)",
46 | 		"                     -0.577350269189626,  // -1.0 + 2.0 * C.x",
47 | 		"                      0.024390243902439); // 1.0 / 41.0",
48 | 		"  vec2 i  = floor(v + dot(v, C.yy) );",
49 | 		"  vec2 x0 = v -   i + dot(i, C.xx);",
50 | 
51 | 		"  vec2 i1;",
52 | 		"  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);",
53 | 		"  vec4 x12 = x0.xyxy + C.xxzz;",
54 | 		" x12.xy -= i1;",
55 | 
56 | 		"  i = mod289(i); // Avoid truncation effects in permutation",
57 | 		"  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))",
58 | 		"		+ i.x + vec3(0.0, i1.x, 1.0 ));",
59 | 
60 | 		"  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);",
61 | 		"  m = m*m ;",
62 | 		"  m = m*m ;",
63 | 
64 | 		"  vec3 x = 2.0 * fract(p * C.www) - 1.0;",
65 | 		"  vec3 h = abs(x) - 0.5;",
66 | 		"  vec3 ox = floor(x + 0.5);",
67 | 		"  vec3 a0 = x - ox;",
68 | 
69 | 		"  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );",
70 | 
71 | 		"  vec3 g;",
72 | 		"  g.x  = a0.x  * x0.x  + h.x  * x0.y;",
73 | 		"  g.yz = a0.yz * x12.xz + h.yz * x12.yw;",
74 | 		"  return 130.0 * dot(m, g);",
75 | 		"}",
76 | 
77 | 		"void main() {",
78 | 
79 | 			"vec2 p = vUv;",
80 | 			"float ty = time*speed;",
81 | 			"float yt = p.y - ty;",
82 | 			"float offset = snoise(vec2(yt*3.0,0.0))*0.2;",
83 | 			"offset = offset*distortion * offset*distortion * offset;",
84 | 			"offset += snoise(vec2(yt*50.0,0.0))*distortion2*0.001;",
85 | 			"gl_FragColor = texture2D(tDiffuse,  vec2(fract(p.x + offset),fract(p.y-time*rollSpeed) ));",
86 | 
87 | 		"}"
88 | 
89 | 	].join("\n")
90 | 
91 | };
92 | 


--------------------------------------------------------------------------------
/js/eventsandhelpers.js:
--------------------------------------------------------------------------------
  1 | function addEvent(obj, evt, fn) {
  2 |     if (obj.addEventListener) {
  3 |         obj.addEventListener(evt, fn, false);
  4 |     }
  5 |     else if (obj.attachEvent) {
  6 |         obj.attachEvent("on" + evt, fn);
  7 |     }
  8 | }
  9 | 
 10 | function onDocumentMouseMove(event) {
 11 |     mouseX = ( event.clientX - windowHalfX ) * 10;
 12 |     mouseY = ( event.clientY - windowHalfY ) * 10;
 13 |     if (!mouseFocus) mouseFocus = true;
 14 | }
 15 | 
 16 | function onWindowResize() {
 17 |     recalculateDimensions();
 18 | }
 19 | 
 20 | function recalculateDimensions() {
 21 |     width                       = container.offsetWidth;
 22 |     height                      = container.offsetHeight;
 23 |     depth                       = height;
 24 | 
 25 |     windowHalfX                 = width / 2;
 26 |     windowHalfY                 = height / 2;
 27 | 
 28 |     group.width                 = width;
 29 |     group.height                = height;
 30 |     group.depth                 = depth;
 31 |     group.halfWidth             = windowHalfX;
 32 |     group.halfHeight            = windowHalfY;
 33 |     group.halfDepth             = group.halfHeight;
 34 | 
 35 |     particlesGroup.halfHeight   = group.halfHeight;
 36 | 
 37 |     if (safeSet(camera)) {
 38 |         camera.aspect = width / height;
 39 |         camera.updateProjectionMatrix();
 40 |     }
 41 | 
 42 |     if (safeSet(renderer)) {
 43 |         renderer.setSize( width, height );
 44 |     }
 45 | 
 46 |     if (safeSet(composer) && composer.length > 0) {
 47 |         composer.setSize( width, height );
 48 |     }
 49 | 
 50 |     if (safeSet(effectFXAA)) {
 51 |         effectFXAA.uniforms[ 'resolution' ].value.set(1 / width, 1 / height);
 52 |     }
 53 | }
 54 | 
 55 | function updateMaterials() {
 56 |     for (var mat = 0; mat < sceneMaterials.length; mat++) {
 57 |         sceneMaterials[mat].needsUpdate = true;
 58 |     }
 59 | }
 60 | 
 61 | function changePlexus() {
 62 |     var newHue = Math.random();
 63 |     plexusParticles.changeValues(newHue);
 64 | }
 65 | 
 66 | function safeSet(varToCheck) {
 67 |     return (typeof varToCheck !== 'undefined')
 68 | }
 69 | 
 70 | function clamp(num, min, max) {
 71 |     return num <= min ? min : num >= max ? max : num;
 72 | }
 73 | 
 74 | function degToRad(degrees) {
 75 |     return degrees * Math.PI / 180;
 76 | }
 77 | 
 78 | function randomRange(min, max) {
 79 |     return min + Math.random() * (max - min);
 80 | }
 81 | 
 82 | function randomInt(min, max) {
 83 |     return Math.floor(min + Math.random() * (max - min + 1));
 84 | }
 85 | 
 86 | function map(value, min1, max1, min2, max2) {
 87 |     return lerp(TUtil.norm(value, min1, max1), min2, max2);
 88 | }
 89 | 
 90 | function lerp(value, min, max) {
 91 |     return min + (max - min) * value;
 92 | }
 93 | 
 94 | function norm(value , min, max) {
 95 |     return (value - min) / (max - min);
 96 | }
 97 | 
 98 | function randomVector3(range) {
 99 |     return new THREE.Vector3(
100 |         randomRange(-range, range),
101 |         randomRange(-range, range),
102 |         randomRange(-range, range));
103 | }
104 | 
105 | function randomVector2(range) {
106 |     return new THREE.Vector2(
107 |         randomRange(-range, range),
108 |         randomRange(-range, range));
109 | }
110 | 
111 | function mod(n, m) {
112 |     return ((n % m) + m) % m;
113 | }
114 | 
115 | function smoothstep(value, min, max ) {
116 |     var x = Math.max(0, Math.min(1, (value-min) / (max-min)));
117 |     return x * x * (3 - 2 * x);
118 | }
119 | 
120 | function sample(ary) {
121 |     return ary[randomInt(0,ary.length-1)];
122 | }
123 | 
124 | function modWrap(n, m) {
125 |     return ((n % m) + m) % m;
126 | }
127 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Plexus and Shaders on my Weird TV</title>
 5 |     <meta charset="utf-8">
 6 |     <link rel="stylesheet" type="text/css" href="css/ambientjam.css">
 7 | </head>
 8 | <body>
 9 |     <div id="container"></div>
10 |     <button id="aboutBtn">About</button>
11 |     <div id="info" class="modalIinfo">
12 |         <h1>Plexus and Shaders on my Weird TV</h1>
13 |         <p>Created by: <a href="https://twitter.com/marcogomez_" target="_blank">@marcogomez_</a> Come say hi! :)</p>
14 |         <p>Hello there, my name is Marco Gomez and this is a WebGL Demo created using ThreeJS, Vertex Shaders and
15 |             Fragment Shaders. The purpose of this demo is to stress test shader passes with a PlexusParticles system
16 |             to evaluate the performance of those visual effects on modern graphics cards, and also to have some fun by
17 |             looking at some super cool stuff =)</p>
18 |         <p>You can use the <strong>Open Controls</strong> menu at the bottom left corner of your screen to tweak the
19 |             parameters and have some fun with the demo!</p>
20 |         <p>This experiment is better viewed with Google Chrome.</p>
21 |     </div>
22 |     <div id="stats"></div>
23 |     <div id="custom-gui"></div>
24 | 
25 |     <script type="text/javascript" src="lib/three.min.js"></script>
26 |     <script type="text/javascript" src="lib/stats.min.js"></script>
27 |     <script type="text/javascript" src="lib/simplexnoise.js"></script>
28 |     <script type="text/javascript" src="lib/minivents.min.js"></script>
29 |     <script type="text/javascript" src="lib/tween.min.js"></script>
30 |     <script type="text/javascript" src="lib/dat.gui.min.js"></script>
31 | 
32 |     <script src="lib/shaders/CopyShader.js"></script>
33 |     <script src="lib/shaders/EffectComposer.js"></script>
34 |     <script src="lib/shaders/RenderPass.js"></script>
35 |     <script src="lib/shaders/ShaderPass.js"></script>
36 |     <script src="lib/shaders/ConvolutionShader.js"></script>
37 | 
38 |     <script src="lib/shaders/FXAAShader.js"></script>
39 |     <script src="lib/shaders/FilmPass.js"></script>
40 |     <script src="lib/shaders/FilmShader.js"></script>
41 |     <script src="lib/shaders/BloomPass.js"></script>
42 |     <script src="lib/shaders/CRTShader.js"></script>
43 |     <script src="lib/shaders/RGBShiftShader.js"></script>
44 |     <script src="lib/shaders/VignetteShader.js"></script>
45 |     <script src="lib/shaders/StaticShader.js"></script>
46 |     <script src="lib/shaders/KaleidoShader.js"></script>
47 |     <script src="lib/shaders/TechnicolorShader.js"></script>
48 |     <script src="lib/shaders/SepiaShader.js"></script>
49 | 
50 |     <script type="text/javascript" src="js/plexusparticles.js"></script>
51 |     <script type="text/javascript" src="js/spotlights.js"></script>
52 |     <script type="text/javascript" src="js/settings.js"></script>
53 |     <script type="text/javascript" src="js/configurestats.js"></script>
54 |     <script type="text/javascript" src="js/configuregui.js"></script>
55 |     <script type="text/javascript" src="js/setrenderer.js"></script>
56 |     <script type="text/javascript" src="js/setpostprocessingchain.js"></script>
57 |     <script type="text/javascript" src="js/eventsandhelpers.js"></script>
58 | 
59 |     <script type="text/javascript" src="js/main.js"></script>
60 | 
61 |     <script>
62 |         var modal = document.getElementById('info');
63 |         var openModal = document.getElementById("aboutBtn");
64 |         openModal.onclick = function() {
65 |             if (modal.style.visibility === "visible") {
66 |                 modal.style.visibility = "hidden";
67 |             } else {
68 |                 modal.style.visibility = "visible";
69 |             }
70 |         };
71 |     </script>
72 | </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/js/flyingdot.js:
--------------------------------------------------------------------------------
  1 | var FlyingDot = function() {
  2 |     var group;
  3 |     var dot;
  4 |     var currentPos;
  5 |     var newPos;
  6 |     var speedFactor = 0.004;
  7 |     var lerpTime = 1;
  8 |     var currentLerpTime = 0;
  9 |     var tick = 0;
 10 | 
 11 |     var particleSystem;
 12 |     var particlesOptions;
 13 |     var spawnerOptions;
 14 | 
 15 |     var clock = new THREE.Clock();
 16 | 
 17 |     this.init = function(parent) {
 18 |         newPos = currentPos = getRandomPosition();
 19 |         dot = getBox(5, 5, 5);
 20 |         dot.position.set(currentPos.x, currentPos.y, currentPos.z);
 21 | 
 22 |         particleSystem = new THREE.GPUParticleSystem({
 23 |             maxParticles: 512000
 24 |         });
 25 | 
 26 |         particlesOptions = {
 27 |             position: new THREE.Vector3(),
 28 |             positionRandomness: 1.2,
 29 |             velocity: new THREE.Vector3(),
 30 |             velocityRandomness: 3.5,
 31 |             color: 0x001122,
 32 |             colorRandomness: 0.7,
 33 |             turbulence: 1.7,
 34 |             lifetime: 6,
 35 |             size: 12,
 36 |             sizeRandomness: 3
 37 |         };
 38 | 
 39 |         spawnerOptions = {
 40 |             spawnRate: 150000,
 41 |             horizontalSpeed: 1.5,
 42 |             verticalSpeed: 1.33,
 43 |             timeScale: 1
 44 |         };
 45 | 
 46 |         this.changeDestine();
 47 |         group = new THREE.Group();
 48 |         group.add(dot);
 49 |         group.add(particleSystem);
 50 |         parent.add(group);
 51 |     };
 52 | 
 53 |     this.changeDestine = function() {
 54 |         newPos = getRandomPosition();
 55 |     };
 56 | 
 57 |     this.update = function(parent) {
 58 | 
 59 |         if (dot.position.distanceTo(newPos) < 1) {
 60 | 
 61 |             currentPos = dot.position;
 62 |             this.changeDestine();
 63 |             currentLerpTime = 0;
 64 |             speedFactor = getRandomNumber(0.0016, 0.0040);
 65 |         }
 66 | 
 67 |         currentLerpTime += speedFactor;
 68 |         currentLerpTime = (currentLerpTime > lerpTime) ? lerpTime : currentLerpTime;
 69 | 
 70 |         var perc = smoothStepA(currentLerpTime / lerpTime);
 71 | 
 72 |         var newX = lerp(currentPos.x, newPos.x, perc);
 73 |         var newY = lerp(currentPos.y, newPos.y, perc);
 74 |         var newZ = lerp(currentPos.z, newPos.z, perc);
 75 | 
 76 |         //console.log(parent.mousePositionX);
 77 |         dot.position.set(newX, newY, newZ);
 78 | 
 79 |         dot.rotation.x += 0.02;
 80 |         dot.rotation.y += 0.10;
 81 |         dot.rotation.z -= 0.04;
 82 | 
 83 |         var delta = clock.getDelta() * spawnerOptions.timeScale;
 84 |         tick += delta;
 85 |         if (tick < 0) tick = 0;
 86 |         if (delta > 0) {
 87 |             particlesOptions.position.x = dot.position.x;
 88 |             particlesOptions.position.y = dot.position.y;
 89 |             particlesOptions.position.z = dot.position.z;
 90 |             for ( var x = 0; x < spawnerOptions.spawnRate * delta; x++ ) {
 91 |                 particleSystem.spawnParticle( particlesOptions );
 92 |             }
 93 |         }
 94 |         particleSystem.update( tick );
 95 |     };
 96 | };
 97 | 
 98 | function lerp(a, b, t){
 99 |     return a + (b - a) * t;
100 | }
101 | 
102 | function smoothStepA(n) {
103 |     return n * n * n * (n * (6 * n - 15) + 10);
104 | }
105 | 
106 | function smoothStepB(n) {
107 |     return n * n * (3 - 2 * n);
108 | }
109 | 
110 | function getBox(w, h, d) {
111 |     var geometry = new THREE.BoxGeometry(w, h, d);
112 |     var material = new THREE.MeshBasicMaterial({
113 |         color: 0xffffff
114 |     });
115 |     var boxMesh = new THREE.Mesh(geometry, material);
116 |     return boxMesh;
117 | }
118 | 
119 | function getRandomPosition() {
120 |     var x = getRandomNumber(-600, 600);
121 |     var y = getRandomNumber(-250, 250);
122 |     var z = getRandomNumber(-450, 500);
123 |     return new THREE.Vector3(x, y, z);
124 | }
125 | 
126 | function getRandomNumber(min, max) {
127 |     return Math.random() * (max - min) + min;
128 | }
129 | 


--------------------------------------------------------------------------------
/lib/shaders/BloomPass.js:
--------------------------------------------------------------------------------
  1 | THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
  2 | 
  3 | 	THREE.Pass.call( this );
  4 | 
  5 | 	strength = ( strength !== undefined ) ? strength : 1;
  6 | 	kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25;
  7 | 	sigma = ( sigma !== undefined ) ? sigma : 4.0;
  8 | 	resolution = ( resolution !== undefined ) ? resolution : 256;
  9 | 
 10 | 	// render targets
 11 | 
 12 | 	var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
 13 | 
 14 | 	this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars );
 15 | 	this.renderTargetX.texture.name = "BloomPass.x";
 16 | 	this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars );
 17 | 	this.renderTargetY.texture.name = "BloomPass.y";
 18 | 
 19 | 	// copy material
 20 | 
 21 | 	if ( THREE.CopyShader === undefined )
 22 | 		console.error( "THREE.BloomPass relies on THREE.CopyShader" );
 23 | 
 24 | 	var copyShader = THREE.CopyShader;
 25 | 
 26 | 	this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
 27 | 
 28 | 	this.copyUniforms[ "opacity" ].value = strength;
 29 | 
 30 | 	this.materialCopy = new THREE.ShaderMaterial( {
 31 | 
 32 | 		uniforms: this.copyUniforms,
 33 | 		vertexShader: copyShader.vertexShader,
 34 | 		fragmentShader: copyShader.fragmentShader,
 35 | 		blending: THREE.AdditiveBlending,
 36 | 		transparent: true
 37 | 
 38 | 	} );
 39 | 
 40 | 	// convolution material
 41 | 
 42 | 	if ( THREE.ConvolutionShader === undefined )
 43 | 		console.error( "THREE.BloomPass relies on THREE.ConvolutionShader" );
 44 | 
 45 | 	var convolutionShader = THREE.ConvolutionShader;
 46 | 
 47 | 	this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );
 48 | 
 49 | 	this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
 50 | 	this.convolutionUniforms[ "cKernel" ].value = THREE.ConvolutionShader.buildKernel( sigma );
 51 | 
 52 | 	this.materialConvolution = new THREE.ShaderMaterial( {
 53 | 
 54 | 		uniforms: this.convolutionUniforms,
 55 | 		vertexShader:  convolutionShader.vertexShader,
 56 | 		fragmentShader: convolutionShader.fragmentShader,
 57 | 		defines: {
 58 | 			"KERNEL_SIZE_FLOAT": kernelSize.toFixed( 1 ),
 59 | 			"KERNEL_SIZE_INT": kernelSize.toFixed( 0 )
 60 | 		}
 61 | 
 62 | 	} );
 63 | 
 64 | 	this.needsSwap = false;
 65 | 
 66 | 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 67 | 	this.scene  = new THREE.Scene();
 68 | 
 69 | 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
 70 | 	this.quad.frustumCulled = false; // Avoid getting clipped
 71 | 	this.scene.add( this.quad );
 72 | 
 73 | };
 74 | 
 75 | THREE.BloomPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
 76 | 
 77 | 	constructor: THREE.BloomPass,
 78 | 
 79 | 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 80 | 
 81 | 		if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
 82 | 
 83 | 		// Render quad with blured scene into texture (convolution pass 1)
 84 | 
 85 | 		this.quad.material = this.materialConvolution;
 86 | 
 87 | 		this.convolutionUniforms[ "tDiffuse" ].value = readBuffer.texture;
 88 | 		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
 89 | 
 90 | 		renderer.render( this.scene, this.camera, this.renderTargetX, true );
 91 | 
 92 | 
 93 | 		// Render quad with blured scene into texture (convolution pass 2)
 94 | 
 95 | 		this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX.texture;
 96 | 		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY;
 97 | 
 98 | 		renderer.render( this.scene, this.camera, this.renderTargetY, true );
 99 | 
100 | 		// Render original scene with superimposed blur to texture
101 | 
102 | 		this.quad.material = this.materialCopy;
103 | 
104 | 		this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY.texture;
105 | 
106 | 		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
107 | 
108 | 		renderer.render( this.scene, this.camera, readBuffer, this.clear );
109 | 
110 | 	}
111 | 
112 | } );
113 | 
114 | THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
115 | THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );
116 | 


--------------------------------------------------------------------------------
/lib/shaders/EffectComposer.js:
--------------------------------------------------------------------------------
  1 | THREE.EffectComposer = function ( renderer, renderTarget ) {
  2 | 
  3 | 	this.renderer = renderer;
  4 | 
  5 | 	if ( renderTarget === undefined ) {
  6 | 
  7 | 		var parameters = {
  8 | 			minFilter: THREE.LinearFilter,
  9 | 			magFilter: THREE.LinearFilter,
 10 | 			format: THREE.RGBAFormat,
 11 | 			stencilBuffer: false
 12 | 		};
 13 | 
 14 | 		var size = renderer.getDrawingBufferSize();
 15 | 		renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
 16 | 		renderTarget.texture.name = 'EffectComposer.rt1';
 17 | 
 18 | 	}
 19 | 
 20 | 	this.renderTarget1 = renderTarget;
 21 | 	this.renderTarget2 = renderTarget.clone();
 22 | 	this.renderTarget2.texture.name = 'EffectComposer.rt2';
 23 | 
 24 | 	this.writeBuffer = this.renderTarget1;
 25 | 	this.readBuffer = this.renderTarget2;
 26 | 
 27 | 	this.passes = [];
 28 | 
 29 | 	// dependencies
 30 | 
 31 | 	if ( THREE.CopyShader === undefined ) {
 32 | 
 33 | 		console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );
 34 | 
 35 | 	}
 36 | 
 37 | 	if ( THREE.ShaderPass === undefined ) {
 38 | 
 39 | 		console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );
 40 | 
 41 | 	}
 42 | 
 43 | 	this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
 44 | 
 45 | };
 46 | 
 47 | Object.assign( THREE.EffectComposer.prototype, {
 48 | 
 49 | 	swapBuffers: function() {
 50 | 
 51 | 		var tmp = this.readBuffer;
 52 | 		this.readBuffer = this.writeBuffer;
 53 | 		this.writeBuffer = tmp;
 54 | 
 55 | 	},
 56 | 
 57 | 	addPass: function ( pass ) {
 58 | 
 59 | 		this.passes.push( pass );
 60 | 
 61 | 		var size = this.renderer.getDrawingBufferSize();
 62 | 		pass.setSize( size.width, size.height );
 63 | 
 64 | 	},
 65 | 
 66 | 	insertPass: function ( pass, index ) {
 67 | 
 68 | 		this.passes.splice( index, 0, pass );
 69 | 
 70 | 	},
 71 | 
 72 | 	render: function ( delta ) {
 73 | 
 74 | 		var maskActive = false;
 75 | 
 76 | 		var pass, i, il = this.passes.length;
 77 | 
 78 | 		for ( i = 0; i < il; i ++ ) {
 79 | 
 80 | 			pass = this.passes[ i ];
 81 | 
 82 | 			if ( pass.enabled === false ) continue;
 83 | 
 84 | 			pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
 85 | 
 86 | 			if ( pass.needsSwap ) {
 87 | 
 88 | 				if ( maskActive ) {
 89 | 
 90 | 					var context = this.renderer.context;
 91 | 
 92 | 					context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
 93 | 
 94 | 					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
 95 | 
 96 | 					context.stencilFunc( context.EQUAL, 1, 0xffffffff );
 97 | 
 98 | 				}
 99 | 
100 | 				this.swapBuffers();
101 | 
102 | 			}
103 | 
104 | 			if ( THREE.MaskPass !== undefined ) {
105 | 
106 | 				if ( pass instanceof THREE.MaskPass ) {
107 | 
108 | 					maskActive = true;
109 | 
110 | 				} else if ( pass instanceof THREE.ClearMaskPass ) {
111 | 
112 | 					maskActive = false;
113 | 
114 | 				}
115 | 
116 | 			}
117 | 
118 | 		}
119 | 
120 | 	},
121 | 
122 | 	reset: function ( renderTarget ) {
123 | 
124 | 		if ( renderTarget === undefined ) {
125 | 
126 | 			var size = this.renderer.getDrawingBufferSize();
127 | 
128 | 			renderTarget = this.renderTarget1.clone();
129 | 			renderTarget.setSize( size.width, size.height );
130 | 
131 | 		}
132 | 
133 | 		this.renderTarget1.dispose();
134 | 		this.renderTarget2.dispose();
135 | 		this.renderTarget1 = renderTarget;
136 | 		this.renderTarget2 = renderTarget.clone();
137 | 
138 | 		this.writeBuffer = this.renderTarget1;
139 | 		this.readBuffer = this.renderTarget2;
140 | 
141 | 	},
142 | 
143 | 	setSize: function ( width, height ) {
144 | 
145 | 		this.renderTarget1.setSize( width, height );
146 | 		this.renderTarget2.setSize( width, height );
147 | 
148 | 		for ( var i = 0; i < this.passes.length; i ++ ) {
149 | 
150 | 			this.passes[i].setSize( width, height );
151 | 
152 | 		}
153 | 
154 | 	}
155 | 
156 | } );
157 | 
158 | 
159 | THREE.Pass = function () {
160 | 
161 | 	// if set to true, the pass is processed by the composer
162 | 	this.enabled = true;
163 | 
164 | 	// if set to true, the pass indicates to swap read and write buffer after rendering
165 | 	this.needsSwap = true;
166 | 
167 | 	// if set to true, the pass clears its buffer before rendering
168 | 	this.clear = false;
169 | 
170 | 	// if set to true, the result of the pass is rendered to screen
171 | 	this.renderToScreen = false;
172 | 
173 | };
174 | 
175 | Object.assign( THREE.Pass.prototype, {
176 | 
177 | 	setSize: function( width, height ) {},
178 | 
179 | 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
180 | 
181 | 		console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
182 | 
183 | 	}
184 | 
185 | } );
186 | 


--------------------------------------------------------------------------------
/js/setpostprocessingchain.js:
--------------------------------------------------------------------------------
  1 | function setPostProcessingChain() {
  2 |     composer    = new THREE.EffectComposer( renderer );
  3 |     renderPass  = new THREE.RenderPass( scene, camera );
  4 |     effectCopy  = new THREE.ShaderPass( THREE.CopyShader );
  5 |     effectFXAA  = new THREE.ShaderPass( THREE.FXAAShader );
  6 | 
  7 |     effectFXAA.uniforms[ 'resolution' ].value.set(1 / width, 1 / height);
  8 | 
  9 |     effectFilm  = new THREE.FilmPass(
 10 |         filmParams.noiseIntensity,
 11 |         filmParams.scanLinesIntensity,
 12 |         filmParams.scanLinesCount,
 13 |         filmParams.grayScale );
 14 | 
 15 |     effectBloom = new THREE.BloomPass(
 16 |         bloomParams.strength,
 17 |         bloomParams.kernelSize,
 18 |         bloomParams.sigma,
 19 |         bloomParams.resolution );
 20 | 
 21 |     CRTPass = new THREE.ShaderPass( THREE.CRTShader );
 22 |     CRTPass.uniforms[ 'time' ].value = CRTParams.time;
 23 |     CRTPass.uniforms[ 'distortion' ].value = CRTParams.distortion1;
 24 |     CRTPass.uniforms[ 'distortion2' ].value = CRTParams.distortion2;
 25 |     CRTPass.uniforms[ 'speed' ].value = CRTParams.speed;
 26 |     CRTPass.uniforms[ 'rollSpeed' ].value = CRTParams.rollSpeed;
 27 | 
 28 |     rgbShiftShader = new THREE.ShaderPass( THREE.RGBShiftShader );
 29 |     rgbShiftShader.uniforms[ 'amount' ].value = rgbShiftParams.amount;
 30 |     rgbShiftShader.uniforms[ 'angle' ].value = rgbShiftParams.angle;
 31 | 
 32 |     staticPass = new THREE.ShaderPass( THREE.StaticShader );
 33 |     staticPass.uniforms[ 'time' ].value = staticParams.time;
 34 |     staticPass.uniforms[ 'amount' ].value = staticParams.amount;
 35 |     staticPass.uniforms[ 'size' ].value = staticParams.size;
 36 | 
 37 |     vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
 38 |     vignettePass.uniforms[ "offset" ].value = vignetteParams.offset;
 39 |     vignettePass.uniforms[ "darkness" ].value = vignetteParams.darkness;
 40 | 
 41 |     techniColor = new THREE.ShaderPass( THREE.TechnicolorShader );
 42 |     techniColor.uniforms[ 'amount' ].value = techniColorParams.amount;
 43 | 
 44 |     sepiaShader = new THREE.ShaderPass( THREE.SepiaShader );
 45 |     sepiaShader.uniforms[ "amount" ].value = sepiaParams.amount;
 46 | 
 47 |     kaleidoShader = new THREE.ShaderPass( THREE.KaleidoShader );
 48 |     kaleidoShader.uniforms[ "sides" ].value = kaleidoParams.sides;
 49 |     kaleidoShader.uniforms[ "angle" ].value = kaleidoParams.angle;
 50 | 
 51 |     effectFXAA.renderToScreen       = false;
 52 |     effectFilm.renderToScreen       = false;
 53 |     effectBloom.renderToScreen      = false;
 54 |     CRTPass.renderToScreen        = false;
 55 |     rgbShiftShader.renderToScreen   = false;
 56 |     staticPass.renderToScreen       = false;
 57 |     vignettePass.renderToScreen     = false;
 58 |     techniColor.renderToScreen      = false;
 59 |     sepiaShader.renderToScreen      = false;
 60 |     kaleidoShader.renderToScreen    = false;
 61 |     effectCopy.renderToScreen       = true;
 62 | 
 63 |     if (shadersParams.globalSwitch) {
 64 |         effectFXAA.enabled      = shadersParams.effectFXAA;
 65 |         effectFilm.enabled      = shadersParams.effectFilm;
 66 |         effectBloom.enabled     = shadersParams.effectBloom;
 67 |         CRTPass.enabled         = shadersParams.CRTPass;
 68 |         rgbShiftShader.enabled  = shadersParams.rgbShiftShader;
 69 |         staticPass.enabled      = shadersParams.staticPass;
 70 |         vignettePass.enabled    = shadersParams.vignettePass;
 71 |         techniColor.enabled     = shadersParams.techniColor;
 72 |         sepiaShader.enabled     = shadersParams.sepiaShader;
 73 |         kaleidoShader.enabled   = shadersParams.kaleidoShader;
 74 |     } else {
 75 |         effectFXAA.enabled      = false;
 76 |         effectFilm.enabled      = false;
 77 |         effectBloom.enabled     = false;
 78 |         CRTPass.enabled       = false;
 79 |         rgbShiftShader.enabled  = false;
 80 |         staticPass.enabled      = false;
 81 |         vignettePass.enabled    = false;
 82 |         techniColor.enabled     = false;
 83 |         sepiaShader.enabled     = false;
 84 |         kaleidoShader.enabled   = false;
 85 |     }
 86 | 
 87 |     composer.addPass( renderPass );
 88 |     composer.addPass( effectFXAA );
 89 |     composer.addPass( effectFilm );
 90 |     composer.addPass( effectBloom );
 91 |     composer.addPass( CRTPass );
 92 |     composer.addPass( rgbShiftShader );
 93 |     composer.addPass( staticPass );
 94 |     composer.addPass( vignettePass );
 95 |     composer.addPass( techniColor );
 96 |     composer.addPass( sepiaShader );
 97 |     composer.addPass( kaleidoShader );
 98 |     composer.addPass( effectCopy );
 99 | }
100 | 


--------------------------------------------------------------------------------
/js/configuregui.js:
--------------------------------------------------------------------------------
  1 | function configureGUI() {
  2 | 
  3 |     var f0 = threeGUI.add(switchStats, 'enableStats');
  4 | 
  5 |     var f1  = threeGUI.addFolder('Shaders and PostProcess');
  6 | 
  7 |     f1.add(shadersParams, 'globalSwitch').listen();
  8 |     f1.add(shadersParams, 'effectFXAA').listen();
  9 |     f1.add(shadersParams, 'effectFilm').listen();
 10 |     f1.add(shadersParams, 'effectBloom').listen();
 11 |     f1.add(shadersParams, 'CRTPass').listen();
 12 |     f1.add(shadersParams, 'rgbShiftShader').listen();
 13 |     f1.add(shadersParams, 'staticPass').listen();
 14 |     f1.add(shadersParams, 'vignettePass').listen();
 15 |     f1.add(shadersParams, 'kaleidoShader').listen();
 16 |     f1.add(shadersParams, 'techniColor').listen();
 17 |     f1.add(shadersParams, 'sepiaShader').listen();
 18 |     var enableEvery = { EnableEverything:function() {
 19 |             shadersParams.globalSwitch = true;
 20 |             shadersParams.effectFXAA = true;
 21 |             shadersParams.effectFilm = true;
 22 |             shadersParams.effectBloom = true;
 23 |             shadersParams.CRTPass = true;
 24 |             shadersParams.rgbShiftShader = true;
 25 |             shadersParams.staticPass = true;
 26 |             shadersParams.vignettePass = true;
 27 |             shadersParams.techniColor = false;
 28 |             shadersParams.sepiaShader = true;
 29 |         }};
 30 |     var disableEvery = { DisableEverything:function() {
 31 |             shadersParams.globalSwitch = true;
 32 |             shadersParams.effectFXAA = false;
 33 |             shadersParams.effectFilm = false;
 34 |             shadersParams.effectBloom = false;
 35 |             shadersParams.CRTPass = false;
 36 |             shadersParams.rgbShiftShader = false;
 37 |             shadersParams.staticPass = false;
 38 |             shadersParams.vignettePass = false;
 39 |             shadersParams.kaleidoShader = false;
 40 |             shadersParams.techniColor = false;
 41 |             shadersParams.sepiaShader = false;
 42 |         }};
 43 | 
 44 |     f1.add(enableEvery, 'EnableEverything');
 45 |     f1.add(disableEvery, 'DisableEverything');
 46 | 
 47 |     var f2  = f1.addFolder('Film Params');
 48 |     var f3  = f1.addFolder('Bloom Params');
 49 |     var f4  = f1.addFolder('CRT Params');
 50 |     var f5  = f1.addFolder('RGBShift Params');
 51 |     var f6  = f1.addFolder('Static Params');
 52 |     var f7  = f1.addFolder('Vignette Params');
 53 |     var f8  = f1.addFolder('Technicolor Params');
 54 |     var f9 = f1.addFolder('Sepia Params');
 55 |     var f10 = f1.addFolder('Kaleido Params');
 56 | 
 57 |     f2.add(filmParams, 'noiseIntensity', 0.1, 1.5).step(0.01);
 58 |     f2.add(filmParams, 'scanLinesIntensity', 0.1, 1.5).step(0.01);
 59 |     f2.add(filmParams, 'scanLinesCount', height, height * 4).step(1);
 60 |     f2.add(filmParams, 'grayScale');
 61 | 
 62 |     f3.add(bloomParams, 'strength', 0.0, 2.0);
 63 | 
 64 |     f4.add(CRTParams, 'distortion1', 0.01, 9.0).step(0.01);
 65 |     f4.add(CRTParams, 'distortion2', 0.01, 9.0).step(0.01);
 66 |     f4.add(CRTParams, 'speed', 0.001, 0.210).step(0.01);
 67 |     f4.add(CRTParams, 'rollSpeed', -0.90, 0.90).step(0.01);
 68 | 
 69 |     f5.add(rgbShiftParams, 'amount', 0.0, 0.06);
 70 |     f5.add(rgbShiftParams, 'angle', 0.0, 3.0);
 71 | 
 72 |     f6.add(staticParams, 'amount', 0.0, 0.5).step(0.01);
 73 |     f6.add(staticParams, 'size', 1, 6).step(1);
 74 | 
 75 |     f7.add(vignetteParams, 'offset', 0.0, 1.0).step(0.01);
 76 |     f7.add(vignetteParams, 'darkness', 0.0, 1.0).step(0.01);
 77 | 
 78 |     f8.add(techniColorParams, 'amount', 0.0, 1.0).step(0.01);
 79 | 
 80 |     f9.add(sepiaParams, 'amount', 0.0, 1.0).step(0.01);
 81 | 
 82 |     f10.add(kaleidoParams, 'sides', 3.0, 32.0).step(1);
 83 |     f10.add(kaleidoParams, 'angle', 0.0, 6.0).step(0.01);
 84 | 
 85 |     var f11  = threeGUI.addFolder('Main Lights and Tone');
 86 | 
 87 |     f11.add(lightningParams, 'toneMapping', Object.keys((toneMappingTypes)));
 88 |     f11.add(lightningParams, 'hemiLightningPower', Object.keys(ambientIlluminance));
 89 |     f11.add(lightningParams, 'pointLightningPowerA', Object.keys(lmPerWat));
 90 |     f11.add(lightningParams, 'pointLightningPowerB', Object.keys(lampPower));
 91 |     f11.add(lightningParams, 'exposure', 0.0, 1.2).step(0.01);
 92 |     f11.add(lightningParams, 'hemiActive');
 93 |     f11.add(lightningParams, 'pointActive');
 94 |     f11.add(lightningParams, 'shadows');
 95 | 
 96 |     var f12 = threeGUI.addFolder('Plexus Particles');
 97 |     f12.add(plexusParams, 'enable');
 98 | 
 99 |     var f13 = threeGUI.addFolder('Dancing SpotLights');
100 |     f13.add(dancingSpotLightsParams, 'enable');
101 |     f13.add(dancingSpotLightsParams, 'helpers').listen();
102 | 
103 |     threeGUI.close();
104 | }
105 | 


--------------------------------------------------------------------------------
/lib/tween.min.js:
--------------------------------------------------------------------------------
 1 | // tween.js - http://github.com/sole/tween.js
 2 | 'use strict';var TWEEN=TWEEN||function(){var a=[];return{REVISION:"7",getAll:function(){return a},removeAll:function(){a=[]},add:function(c){a.push(c)},remove:function(c){c=a.indexOf(c);-1!==c&&a.splice(c,1)},update:function(c){if(0===a.length)return!1;for(var b=0,d=a.length,c=void 0!==c?c:Date.now();b<d;)a[b].update(c)?b++:(a.splice(b,1),d--);return!0}}}();
 3 | TWEEN.Tween=function(a){var c={},b={},d=1E3,e=0,f=null,h=TWEEN.Easing.Linear.None,r=TWEEN.Interpolation.Linear,k=[],l=null,m=!1,n=null,p=null;this.to=function(a,c){null!==c&&(d=c);b=a;return this};this.start=function(d){TWEEN.add(this);m=!1;f=void 0!==d?d:Date.now();f+=e;for(var g in b)if(null!==a[g]){if(b[g]instanceof Array){if(0===b[g].length)continue;b[g]=[a[g]].concat(b[g])}c[g]=a[g]}return this};this.stop=function(){TWEEN.remove(this);return this};this.delay=function(a){e=a;return this};this.easing=
 4 | function(a){h=a;return this};this.interpolation=function(a){r=a;return this};this.chain=function(){k=arguments;return this};this.onStart=function(a){l=a;return this};this.onUpdate=function(a){n=a;return this};this.onComplete=function(a){p=a;return this};this.update=function(e){if(e<f)return!0;!1===m&&(null!==l&&l.call(a),m=!0);var g=(e-f)/d,g=1<g?1:g,i=h(g),j;for(j in c){var s=c[j],q=b[j];a[j]=q instanceof Array?r(q,i):s+(q-s)*i}null!==n&&n.call(a,i);if(1==g){null!==p&&p.call(a);g=0;for(i=k.length;g<
 5 | i;g++)k[g].start(e);return!1}return!0}};
 6 | TWEEN.Easing={Linear:{None:function(a){return a}},Quadratic:{In:function(a){return a*a},Out:function(a){return a*(2-a)},InOut:function(a){return 1>(a*=2)?0.5*a*a:-0.5*(--a*(a-2)-1)}},Cubic:{In:function(a){return a*a*a},Out:function(a){return--a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a:0.5*((a-=2)*a*a+2)}},Quartic:{In:function(a){return a*a*a*a},Out:function(a){return 1- --a*a*a*a},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a:-0.5*((a-=2)*a*a*a-2)}},Quintic:{In:function(a){return a*a*a*
 7 | a*a},Out:function(a){return--a*a*a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2)}},Sinusoidal:{In:function(a){return 1-Math.cos(a*Math.PI/2)},Out:function(a){return Math.sin(a*Math.PI/2)},InOut:function(a){return 0.5*(1-Math.cos(Math.PI*a))}},Exponential:{In:function(a){return 0===a?0:Math.pow(1024,a-1)},Out:function(a){return 1===a?1:1-Math.pow(2,-10*a)},InOut:function(a){return 0===a?0:1===a?1:1>(a*=2)?0.5*Math.pow(1024,a-1):0.5*(-Math.pow(2,-10*(a-1))+2)}},Circular:{In:function(a){return 1-
 8 | Math.sqrt(1-a*a)},Out:function(a){return Math.sqrt(1- --a*a)},InOut:function(a){return 1>(a*=2)?-0.5*(Math.sqrt(1-a*a)-1):0.5*(Math.sqrt(1-(a-=2)*a)+1)}},Elastic:{In:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return-(b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4))},Out:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return b*Math.pow(2,-10*a)*Math.sin((a-c)*
 9 | 2*Math.PI/0.4)+1},InOut:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return 1>(a*=2)?-0.5*b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4):0.5*b*Math.pow(2,-10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4)+1}},Back:{In:function(a){return a*a*(2.70158*a-1.70158)},Out:function(a){return--a*a*(2.70158*a+1.70158)+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*(3.5949095*a-2.5949095):0.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)}},Bounce:{In:function(a){return 1-
10 | TWEEN.Easing.Bounce.Out(1-a)},Out:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+0.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+0.9375:7.5625*(a-=2.625/2.75)*a+0.984375},InOut:function(a){return 0.5>a?0.5*TWEEN.Easing.Bounce.In(2*a):0.5*TWEEN.Easing.Bounce.Out(2*a-1)+0.5}}};
11 | TWEEN.Interpolation={Linear:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),f=TWEEN.Interpolation.Utils.Linear;return 0>c?f(a[0],a[1],d):1<c?f(a[b],a[b-1],b-d):f(a[e],a[e+1>b?b:e+1],d-e)},Bezier:function(a,c){var b=0,d=a.length-1,e=Math.pow,f=TWEEN.Interpolation.Utils.Bernstein,h;for(h=0;h<=d;h++)b+=e(1-c,d-h)*e(c,h)*a[h]*f(d,h);return b},CatmullRom:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),f=TWEEN.Interpolation.Utils.CatmullRom;return a[0]===a[b]?(0>c&&(e=Math.floor(d=b*(1+c))),f(a[(e-
12 | 1+b)%b],a[e],a[(e+1)%b],a[(e+2)%b],d-e)):0>c?a[0]-(f(a[0],a[0],a[1],a[1],-d)-a[0]):1<c?a[b]-(f(a[b],a[b],a[b-1],a[b-1],d-b)-a[b]):f(a[e?e-1:0],a[e],a[b<e+1?b:e+1],a[b<e+2?b:e+2],d-e)},Utils:{Linear:function(a,c,b){return(c-a)*b+a},Bernstein:function(a,c){var b=TWEEN.Interpolation.Utils.Factorial;return b(a)/b(c)/b(a-c)},Factorial:function(){var a=[1];return function(c){var b=1,d;if(a[c])return a[c];for(d=c;1<d;d--)b*=d;return a[c]=b}}(),CatmullRom:function(a,c,b,d,e){var a=0.5*(b-a),d=0.5*(d-c),f=
13 | e*e;return(2*c-2*b+a+d)*e*f+(-3*c+3*b-2*a-d)*f+a*e+c}}};
14 | 


--------------------------------------------------------------------------------
/js/settings.js:
--------------------------------------------------------------------------------
  1 | var switchStats = {
  2 |     "enableStats" : true
  3 | };
  4 | 
  5 | var lmPerWat = {
  6 |     "Incandescent Bulb" : 15,
  7 |     "Halogen Lamp"      : 20,
  8 |     "Fluorescent Lamp"  : 60,
  9 |     "LED Lamp"          : 90
 10 | };
 11 | 
 12 | var lampPower = {
 13 |     "Off"   : 0,
 14 |     "0.1W"  : 0.1,
 15 |     "0.25W" : 0.25,
 16 |     "0.5W"  : 0.5,
 17 |     "1W"    : 1,
 18 |     "2W"    : 2,
 19 |     "4W"    : 4,
 20 |     "8W"    : 8,
 21 |     "10W"   : 10,
 22 |     "15W"   : 15,
 23 |     "20W"   : 20,
 24 |     "50W"   : 50,
 25 |     "100W"  : 100,
 26 |     "150W"  : 150,
 27 |     "200W"  : 200,
 28 |     "250W"  : 250,
 29 |     "300W"  : 300,
 30 |     "350W"  : 350,
 31 |     "500W"  : 500,
 32 |     "1000W" : 1000
 33 | };
 34 | 
 35 | var ambientIlluminance = {
 36 |     "0.0001 lx  | Moonless, overcast night sky (starlight)(MoonlessNight)"  : 0.0001,
 37 |     "0.002 lx   | Moonless clear night sky with airglow"                    : 0.002,
 38 |     "0.004 lx   | WaningCrescent Moon night sky with airglow"               : 0.004,
 39 |     "0.008 lx   | LastQuarter Moon night sky with airglow"                  : 0.008,
 40 |     "0.016 lx   | LastQuarter Moon night Clear sky with airglow"            : 0.016,
 41 |     "0.25 lx    | Waning Gibbous Moon night sky with airglow"               : 0.25,
 42 |     "0.5 lx     | Full Moon night sky with airglow"                         : 0.5,
 43 |     "3.4 lx     | Civil twilight under a clear sky"                         : 3.4,
 44 |     "35 lx      | Public areas with dark surroundings"                      : 35,
 45 |     "50 lx      | Family living room lights (Australia, 1998)"              : 50,
 46 |     "80 lx      | Office building hallway/toilet lighting"                  : 80,
 47 |     "100 lx     | Very dark overcast day"                                   : 100,
 48 |     "150 lx     | Train station platforms"                                  : 150,
 49 |     "350 lx     | Typical Office Room lightning"                            : 350,
 50 |     "400 lx     | Sunrise / Sunset on a clear day"                          : 400,
 51 |     "1000 lx    | TV Studio Lightning / Overcast day"                       : 1000,
 52 |     "18000 lx   | Full Daylight with Indirect Sun"                          : 18000,
 53 |     "50000 lx   | Direct Sunlight at midday"                                : 50000
 54 | };
 55 | 
 56 | var toneMappingTypes = {
 57 |     "None"          : THREE.NoToneMapping,
 58 |     "Linear"        : THREE.LinearToneMapping,
 59 |     "Reinhard"      : THREE.ReinhardToneMapping,
 60 |     "Uncharted2"    : THREE.Uncharted2ToneMapping,
 61 |     "Cineon"        : THREE.CineonToneMapping
 62 | };
 63 | 
 64 | var lightningParams = {
 65 |     toneMapping             : Object.keys(toneMappingTypes)[3],
 66 |     hemiLightningPower      : Object.keys(ambientIlluminance)[3],
 67 |     pointLightningPowerA    : Object.keys(lmPerWat)[0],
 68 |     pointLightningPowerB    : Object.keys(lampPower)[3],
 69 |     exposure                : 1.0,
 70 |     shadows                 : true,
 71 |     hemiActive              : true,
 72 |     pointActive             : true
 73 | };
 74 | 
 75 | var shadersParams = {
 76 |     globalSwitch        : true,
 77 |     effectFXAA          : false,
 78 |     effectFilm          : true,
 79 |     effectBloom         : true,
 80 |     CRTPass             : true,
 81 |     rgbShiftShader      : true,
 82 |     staticPass          : true,
 83 |     vignettePass        : true,
 84 |     techniColor         : false,
 85 |     sepiaShader         : false,
 86 |     kaleidoShader       : false
 87 | };
 88 | 
 89 | var filmParams = {
 90 |     noiseIntensity      : 0.50,
 91 |     scanLinesIntensity  : 0.21,
 92 |     scanLinesCount      : 2160,
 93 |     grayScale           : false
 94 | };
 95 | 
 96 | var bloomParams = {
 97 |     strength            : 0.6,
 98 |     kernelSize          : 25,
 99 |     sigma               : 4.0,
100 |     resolution          : 256
101 | };
102 | 
103 | var CRTParams = {
104 |     time                : 0,
105 |     distortion1         : 1.12,
106 |     distortion2         : 0.21,
107 |     speed               : 0.12,
108 |     rollSpeed           : 0.00
109 | };
110 | 
111 | var rgbShiftParams = {
112 |     amount              : 0.0012,
113 |     angle               : 1.7
114 | };
115 | 
116 | var staticParams = {
117 |     time                : 0,
118 |     amount              : 0.08,
119 |     size                : 1.0
120 | };
121 | 
122 | var vignetteParams = {
123 |     offset              : 0.6,
124 |     darkness            : 0.6
125 | };
126 | 
127 | var techniColorParams = {
128 |     amount  : 0.3
129 | };
130 | 
131 | var sepiaParams = {
132 |     amount              : 0.21
133 | };
134 | 
135 | var kaleidoParams = {
136 |     sides               : 12.0,
137 |     angle               : 0.0
138 | };
139 | 
140 | var plexusParams = {
141 |     enable : true
142 | };
143 | 
144 | var dancingSpotLightsParams = {
145 |     enable  : true,
146 |     helpers : false
147 | };
148 | 


--------------------------------------------------------------------------------
/js/plexusparticles.js:
--------------------------------------------------------------------------------
  1 | var PlexusParticles = function() {
  2 | 	var radius;
  3 |     var positionY;
  4 | 
  5 |     var group;
  6 |     var particlesData = [];
  7 |     var positions, colors;
  8 |     var particles;
  9 |     var particlePositions;
 10 |     var pointCloud;
 11 |     var linesMesh;
 12 |     var lineColor;
 13 | 
 14 |     var limitConnections = true;
 15 |     var maxConnections = 3;
 16 |     var minDistance = 130;
 17 |     var maxParticleCount = 120;
 18 |     var particleCount = 120;
 19 | 
 20 |     this.init = function(parent) {
 21 | 
 22 |         radius = parent.radius;
 23 |         positionY = parent.positionY;
 24 | 
 25 |         lineColor = new THREE.Color();
 26 |         lineColor.setHSL(0.621212, 0.63, 1);
 27 | 
 28 |         var particleMaterial = new THREE.PointsMaterial( {
 29 |             color: 0xFFFFFF,
 30 |             size: 2,
 31 |             blending: THREE.AdditiveBlending,
 32 |             transparent: true,
 33 |             sizeAttenuation: false
 34 |         } );
 35 | 
 36 |         var lineMaterial = new THREE.LineBasicMaterial( {
 37 |             color: lineColor,
 38 |             linewidth: 1,
 39 |             vertexColors: THREE.AdditiveBlending,
 40 |             blending: THREE.NormalBlending,
 41 |             transparent: true
 42 |         } );
 43 | 
 44 |         var segments = maxParticleCount * maxParticleCount;
 45 | 
 46 |         positions = new Float32Array( segments * 3 );
 47 |         colors = new Float32Array( segments * 3 );
 48 | 
 49 |         particles = new THREE.BufferGeometry();
 50 |         particlePositions = new Float32Array( maxParticleCount * 3 );
 51 | 
 52 |         for ( var i = 0; i < maxParticleCount; i++ ) {
 53 | 
 54 |             var posXYZ = getPointInsideCircle(radius, positionY);
 55 |             particlePositions[ i * 3     ] = posXYZ[0];
 56 |             particlePositions[ i * 3 + 1 ] = posXYZ[1];
 57 |             particlePositions[ i * 3 + 2 ] = posXYZ[2];
 58 | 
 59 |             var velY = 0.21 + Math.abs(Math.random() * 2);
 60 | 
 61 |             particlesData.push( {
 62 |                 velocityY: velY,
 63 |                 numConnections: 0
 64 |             } );
 65 |         }
 66 | 
 67 |         particles.setDrawRange( 0, particleCount );
 68 |         particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setDynamic( true ) );
 69 | 
 70 |         var geometry = new THREE.BufferGeometry();
 71 |         geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );
 72 |         geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
 73 |         geometry.computeBoundingSphere();
 74 |         geometry.setDrawRange( 0, 0 );
 75 | 
 76 |         pointCloud = new THREE.Points( particles, particleMaterial );
 77 | 
 78 |         linesMesh = new THREE.LineSegments( geometry, lineMaterial );
 79 |         linesMesh.castShadow = false;
 80 |         linesMesh.receiveShadow = false;
 81 | 
 82 |         group = new THREE.Group();
 83 |         group.add( pointCloud );
 84 |         group.add( linesMesh );
 85 |         parent.add( group );
 86 |     };
 87 | 
 88 |     this.update = function(parent) {
 89 | 
 90 |         var h = parent.halfHeight;
 91 | 
 92 |         var vertexPosition = 0;
 93 |         var colorPosition = 0;
 94 |         var numConnected = 0;
 95 | 
 96 |         for ( var c = 0; c < particleCount; c++ )
 97 |             particlesData[ c ].numConnections = 0;
 98 | 
 99 |         for ( var i = 0; i < particleCount; i++ ) {
100 | 
101 |             particlePositions[ i * 3 + 1 ] += particlesData[i].velocityY;
102 | 
103 |             if ( particlePositions[ i * 3 + 1 ] > h ) {
104 |                 var posXYZ = getPointInsideCircle(radius, positionY);
105 |                 particlesData[i].velocityY = 0.21 + Math.abs(Math.random() * 2);
106 |                 particlePositions[ i * 3] = posXYZ[0];
107 |                 particlePositions[ i * 3 + 1 ] = posXYZ[1];
108 |                 particlePositions[ i * 3 + 2 ] = posXYZ[2];
109 |             }
110 | 
111 |             if ( limitConnections && particlesData[i].numConnections >= maxConnections )
112 |                 continue;
113 | 
114 |             for ( var j = i + 1; j < particleCount; j++ ) {
115 | 
116 |                 var particleDataB = particlesData[ j ];
117 |                 if ( limitConnections && particleDataB.numConnections >= maxConnections )
118 |                     continue;
119 | 
120 |                 var dx = particlePositions[ i * 3     ] - particlePositions[ j * 3     ];
121 |                 var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
122 |                 var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
123 |                 var dist = Math.sqrt( dx * dx + dy * dy + dz * dz );
124 | 
125 |                 if ( dist < minDistance ) {
126 | 
127 |                     particlesData[i].numConnections++;
128 |                     particleDataB.numConnections++;
129 | 
130 |                     var alpha = 1.0 - dist / minDistance;
131 | 
132 |                     positions[ vertexPosition++ ] = particlePositions[ i * 3     ];
133 |                     positions[ vertexPosition++ ] = particlePositions[ i * 3 + 1 ];
134 |                     positions[ vertexPosition++ ] = particlePositions[ i * 3 + 2 ];
135 | 
136 |                     positions[ vertexPosition++ ] = particlePositions[ j * 3     ];
137 |                     positions[ vertexPosition++ ] = particlePositions[ j * 3 + 1 ];
138 |                     positions[ vertexPosition++ ] = particlePositions[ j * 3 + 2 ];
139 | 
140 |                     colors[ colorPosition++ ] = alpha;
141 |                     colors[ colorPosition++ ] = alpha;
142 |                     colors[ colorPosition++ ] = alpha;
143 | 
144 |                     colors[ colorPosition++ ] = alpha;
145 |                     colors[ colorPosition++ ] = alpha;
146 |                     colors[ colorPosition++ ] = alpha;
147 | 
148 |                     numConnected++;
149 |                 }
150 |             }
151 |         }
152 | 
153 |         linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
154 |         linesMesh.geometry.attributes.position.needsUpdate = true;
155 |         linesMesh.geometry.attributes.color.needsUpdate = true;
156 |         pointCloud.geometry.attributes.position.needsUpdate = true;
157 |     };
158 | 
159 |     this.changeValues = function(value) {
160 |         var newColor = new THREE.Color();
161 |         newColor.setHSL(value, 1, 0.63);
162 |         linesMesh.material.color = newColor;
163 |     };
164 | };
165 | 
166 | function getPointInsideCircle(radius, yPos) {
167 |     var dotAngle = Math.random() * 2 * Math.PI;
168 |     var dotRadiusSq = Math.random() * radius * radius;
169 |     var dotX = Math.sqrt(dotRadiusSq) * Math.cos(dotAngle);
170 |     var dotZ = Math.sqrt(dotRadiusSq) * Math.sin(dotAngle);
171 |     return [dotX, yPos, dotZ];
172 | }
173 | 


--------------------------------------------------------------------------------
/js/spotlights.js:
--------------------------------------------------------------------------------
  1 | var SpotLights = function() {
  2 | 
  3 |     var xRadius, zRadius, yPos;
  4 |     var spotLights;
  5 |     var spotHelpers;
  6 |     var positions = [];
  7 |     var spotBasicColors = [ 0xFF0000, 0x00FF00, 0x0000FF,
  8 |                             0xFFFF00, 0x00FFFF, 0xFF00FF];
  9 |     var mainTarget;
 10 |     var previousTarget;
 11 | 
 12 |     var helpersVisible = false;
 13 |     var previousHelpersState;
 14 | 
 15 |     var waveTarget;
 16 |     var waveRotationSpeed = 0.001;
 17 |     var waveModulationSpeed = 0.003;
 18 | 
 19 |     var waveHeight = 100;
 20 | 
 21 |     var spotIntensity = 2;
 22 |     var spotAngle = 0.5;
 23 |     var spotPenumbra = 0.5;
 24 |     var spotDecay = 3;
 25 |     var spotDistance = 1500;
 26 |     var spotWShadowRes = 1024;
 27 |     var spotHShadowRes = 1024;
 28 | 
 29 |     this.init = function(parent, numberOfSpots, initialRadiusX, initialRadiusZ) {
 30 | 
 31 |         spotLights = new THREE.Group();
 32 |         spotLights.name = "spotLights";
 33 | 
 34 |         spotHelpers = new THREE.Group();
 35 |         spotHelpers.name = "spotHelpers";
 36 |         previousHelpersState = false;
 37 | 
 38 |         xRadius = initialRadiusX;
 39 |         zRadius = initialRadiusZ;
 40 |         yPos = parent.position.y + 250;
 41 | 
 42 |         waveTarget = true;
 43 |         mainTarget = this.createSimpleSpotsTarget(
 44 |             parent.position.x,
 45 |             parent.position.y,
 46 |             parent.position.z);
 47 |         mainTarget.updateMatrixWorld();
 48 |         spotHelpers.add(mainTarget);
 49 |         previousTarget = mainTarget;
 50 | 
 51 |         positions = this.evenInCircle(xRadius, zRadius, yPos, numberOfSpots);
 52 | 
 53 |         for (var l = 0; l < numberOfSpots; l++) {
 54 | 
 55 |             var spot = this.createSpotLight(spotBasicColors[l], mainTarget);
 56 |             spot.name = "spotLight" + l;
 57 | 
 58 |             var spotHelper = new THREE.SpotLightHelper(spot);
 59 |             spotHelper.name = "spotHelper" + l;
 60 | 
 61 |             spot.position.set(
 62 |                 positions[l][0],
 63 |                 positions[l][1],
 64 |                 positions[l][2]);
 65 | 
 66 |             spotHelper.update();
 67 |             spotLights.add(spot);
 68 |             spotHelpers.add(spotHelper);
 69 |             spotHelpers.visible = helpersVisible;
 70 | 
 71 | 
 72 |         }
 73 |         parent.add(spotLights);
 74 |         parent.add(spotHelpers);
 75 |     };
 76 | 
 77 |     this.update = function(parent) {
 78 |         if (safeSet(waveTarget) && waveTarget === true) {
 79 |             var t = Date.now() * waveRotationSpeed;
 80 |             var t2 = Date.now() * waveModulationSpeed;
 81 |             var tSin = Math.sin(t);
 82 |             var tCos = Math.cos(t);
 83 |             var tSinB = Math.sin(t2);
 84 | 
 85 |             mainTarget.position.x = tSin * (xRadius / 1.5);
 86 |             mainTarget.position.z = tCos * (zRadius / 1.5);
 87 |             mainTarget.position.y = waveHeight + (tSinB * waveHeight);
 88 | 
 89 |         }
 90 | 
 91 |         if (safeSet(mainTarget) && previousTarget !== mainTarget) {
 92 |             mainTarget.updateMatrixWorld();
 93 |             for (var spot = 0; spot < spotLights.children.length; spot++) {
 94 |                 console.log(spot);
 95 |                 spotLights.children[spot].target = mainTarget;
 96 |                 spotLights.children[spot].material.update();
 97 |             }
 98 |         }
 99 | 
100 |         if (previousHelpersState !== this.helpersVisible) {
101 |             previousHelpersState = this.helpersVisible;
102 |             spotHelpers.visible = this.helpersVisible;
103 |         }
104 |         if (this.helpersVisible) {
105 |             for (var s = 0; s <= spotLights.children.length; s++) {
106 |                 if (spotHelpers.children[s].type !== "Mesh") {
107 |                     spotHelpers.children[s].update();
108 |                 }
109 |             }
110 |         }
111 |     };
112 | 
113 |     this.createSpotLight = function(color, target) {
114 | 
115 |         var newSpot = new THREE.SpotLight(color, 1);
116 |         // var newSpotGeometry = new THREE.SphereGeometry(5, 8, 6);
117 |         // var newSpotMaterial = new THREE.MeshLambertMaterial({
118 |         //     color: color,
119 |         //     emissive: color,
120 |         //     emissiveIntensity: 8
121 |         // });
122 |         //
123 |         // var newSpotMesh = new THREE.Mesh(newSpotGeometry, newSpotMaterial);
124 |         // newSpot.add(newSpotMesh);
125 | 
126 |         newSpot.intensity = spotIntensity;
127 |         newSpot.angle = spotAngle;
128 |         newSpot.penumbra = spotPenumbra;
129 |         newSpot.decay = spotDecay;
130 |         newSpot.distance = spotDistance;
131 |         newSpot.shadow.mapSize.width = spotWShadowRes;
132 |         newSpot.shadow.mapSize.height = spotHShadowRes;
133 |         newSpot.castShadow = true;
134 |         newSpot.target = target;
135 | 
136 |         return newSpot;
137 |     };
138 | 
139 |     this.evenInCircle = function(radiusX, radiusZ, positionY, points) {
140 |         var positions = [];
141 |         for (var point = 0; point <= points; point++) {
142 |             var p = point / points;
143 |             var angle = p * Math.PI * 2;
144 |             var x = Math.sin(angle) * radiusX;
145 |             var y = positionY;
146 |             var z = Math.cos(angle) * radiusZ;
147 |             positions.push([x, y, z]);
148 |         }
149 |         return positions;
150 |     };
151 | 
152 |     this.createSimpleSpotsTarget = function(posX, posY, posZ) {
153 |         var targetGeometry = new THREE.BoxBufferGeometry(10, 10, 10);
154 |         var targetMaterial = new THREE.MeshBasicMaterial( {color: 0xFFFFFF} );
155 |         var target = new THREE.Mesh(targetGeometry, targetMaterial);
156 |         target.position.set(posX, posY, posZ);
157 |         target.updateMatrixWorld();
158 |         return target;
159 |     };
160 | 
161 |     this.createComplexSpotsTarget = function(posX, posY, posZ) {
162 |         var targetGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
163 |         var targetMaterial = new THREE.MeshStandardMaterial({
164 |             color: 0xFFFFFF,
165 |             emissive: 0xFFFFFF,
166 |             emissiveIntensity: 2
167 |         });
168 |         var targetLight = new THREE.PointLight(0xFFFFFF, 1.0, 150, 2);
169 |         targetLight.add(new THREE.Mesh(targetGeometry, targetMaterial));
170 |         targetLight.position.set(posX, posY, posZ);
171 |         targetLight.updateMatrixWorld();
172 |         targetLight.castShadow = true;
173 |         targetLight.receiveShadow = false;
174 |         return targetLight;
175 |     };
176 | };
177 | 
178 | function safeSet(varToCheck) {
179 |     return (typeof varToCheck !== 'undefined')
180 | }
181 | 
182 | function safeAdd(parent, object) {
183 |     if (safeSet(object) && !parent.getElementsByName(object.name)) {
184 |         parent.add(object);
185 |     }
186 | }
187 | 
188 | function safeRemove(parent, object) {
189 |     if (safeSet(object) && parent.getElementsByName(object.name)) {
190 |         parent.remove(object);
191 |     }
192 | }
193 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
  1 | var camera, scene, renderer, group, disc;
  2 | var width, height, depth;
  3 | var container, statsContainer;
  4 | var threeStats, threeGUI;
  5 | var previousTonemap, previousExposure;
  6 | var previousShadowMap = false;
  7 | var shadersTime = 0.0;
  8 | var startTime, elapsedTime;
  9 | var composer = {};
 10 | var renderPass, effectCopy;
 11 | var effectFXAA, effectFilm, effectBloom, rgbShiftShader;
 12 | var staticPass, CRTPass, vignettePass, kaleidoShader;
 13 | var techniColor, sepiaShader;
 14 | var basicLightning, hemiLight, pointLight;
 15 | var sceneMaterials = [];
 16 | var mouseX = 0;
 17 | var mouseY = 0;
 18 | var windowHalfX;
 19 | var windowHalfY;
 20 | var mouseFocus = false;
 21 | var cameraMoveFactor = 10;
 22 | var particlesGroup;
 23 | var spotLightsGroup;
 24 | var plexusParticles;
 25 | var dancingSpotLights;
 26 | var hedron, circle;
 27 | var fftSize = 128;
 28 | var audioLoader, listener, audio, analyser, uniforms;
 29 | 
 30 | setEvents();
 31 | init();
 32 | animate();
 33 | 
 34 | function init() {
 35 | 
 36 |     startTime       = Date.now();
 37 |     scene           = new THREE.Scene();
 38 |     group           = new THREE.Group();
 39 |     disc            = new THREE.Group();
 40 |     basicLightning  = new THREE.Group();
 41 |     particlesGroup  = new THREE.Group();
 42 |     spotLightsGroup = new THREE.Group();
 43 | 
 44 |     container       = document.getElementById( 'container' );
 45 |     statsContainer  = document.getElementById( 'stats' );
 46 |     recalculateDimensions();
 47 | 
 48 |     camera = new THREE.PerspectiveCamera( 40, width / height, 1, 7000 );
 49 |     camera.position.z = 1000;
 50 |     camera.position.y = 18000;
 51 | 
 52 |     audioLoader     = new THREE.AudioLoader();
 53 |     listener        = new THREE.AudioListener();
 54 | 
 55 |     camera.add(listener);
 56 | 
 57 |     audio           = new THREE.Audio(listener);
 58 | 
 59 |     audioLoader.load('ambientjam.ogg', function(buffer) {
 60 |         audio.setBuffer(buffer);
 61 |         audio.setLoop(true);
 62 |         audio.setVolume(0.7);
 63 |         audio.play();
 64 |     } );
 65 | 
 66 |     analyser = new THREE.AudioAnalyser(audio, fftSize);
 67 | 
 68 |     threeStats = new Stats();
 69 |     if (safeSet(threeStats)) {
 70 |         configureStats();
 71 |     }
 72 | 
 73 |     threeGUI = new dat.GUI( { autoplace: false, width: width / 5 } );
 74 |     if (safeSet(threeGUI)) { configureGUI(); }
 75 |     var guiContainer = document.getElementById('custom-gui');
 76 |     guiContainer.appendChild(threeGUI.domElement);
 77 | 
 78 |     scene.fog = new THREE.Fog( 0x000000, 1500, 5000 );
 79 | 
 80 |     particlesGroup.radius = 512;
 81 |     particlesGroup.positionY = 0;
 82 |     plexusParticles = new PlexusParticles();
 83 |     plexusParticles.init( particlesGroup );
 84 |     group.add( particlesGroup );
 85 | 
 86 |     dancingSpotLights = new SpotLights();
 87 |     dancingSpotLights.init( spotLightsGroup, 3, 500, 500 );
 88 |     dancingSpotLights.helpersVisible = dancingSpotLightsParams.helpers;
 89 |     group.add(spotLightsGroup);
 90 |     spotLightsGroup.visible = dancingSpotLightsParams.enable;
 91 | 
 92 |     renderer = setRenderer();
 93 |     setPostProcessingChain();
 94 |     setupBasicLightning();
 95 | 
 96 |     group.position.y = -100;
 97 |     group.add( disc );
 98 |     group.add( basicLightning );
 99 |     scene.add( group );
100 | 
101 |     var hedronGeometry = new THREE.DodecahedronGeometry(30, 0);
102 |     var hedronMaterial = new THREE.MeshStandardMaterial({color: 0xFFFFFF});
103 |     hedron = new THREE.Mesh(hedronGeometry, hedronMaterial);
104 |     hedron.castShadow = true;
105 |     hedron.receiveShadow = false;
106 |     hedron.position.y = 70;
107 |     hedron.updateMatrixWorld();
108 |     sceneMaterials.push(hedronMaterial);
109 |     group.add(hedron);
110 | 
111 |     var circleRadius = 500;
112 |     var texture = new THREE.TextureLoader().load('vinyl_texture.png');
113 |     var circleGeometry = new THREE.CircleGeometry(circleRadius, 128);
114 |     var circleMaterial = new THREE.MeshStandardMaterial({
115 |         color: 0xFFFFFF,
116 |         metalness: 0,
117 |         map: texture
118 |     });
119 |     circleMaterial.side = THREE.DoubleSide;
120 |     circle = new THREE.Mesh(circleGeometry, circleMaterial);
121 |     circle.castShadow = false;
122 |     circle.receiveShadow = true;
123 |     circle.rotation.x = degToRad(90);
124 |     circle.position.set(0, -10, 0);
125 |     circle.updateMatrixWorld();
126 |     sceneMaterials.push(circleMaterial);
127 |     disc.add(circle);
128 | 
129 |     container.appendChild( renderer.domElement );
130 |     window.addEventListener( 'resize', onWindowResize, false );
131 | }
132 | 
133 | function setupBasicLightning() {
134 |     hemiLight = new THREE.HemisphereLight( 0xDDDDFF, 0xDDDDFF, 0.02 );
135 |     hemiLight.intensity = ambientIlluminance[lightningParams.hemiLightningPower];
136 |     hemiLight.position.set(0, height / 2.5, 0);
137 |     hemiLight.visible = lightningParams.hemiActive;
138 |     basicLightning.add(hemiLight);
139 | 
140 |     var pointLightGeometry = new THREE.DodecahedronGeometry(7, 0);
141 |     var pointLightMaterial = new THREE.MeshStandardMaterial({
142 |         emissive: 0x4477FF,
143 |         emissiveIntensity: 2,
144 |         color: 0xFFFFFF
145 |     });
146 | 
147 |     pointLight = new THREE.SpotLight(0x4477FF, 2);
148 |     pointLight.castShadow = true;
149 |     pointLight.angle = 0.8;
150 |     pointLight.penumbra = 0.8;
151 |     pointLight.decay = 2;
152 |     pointLight.distance = 800;
153 |     pointLight.shadow.mapSize.width = 1024;
154 |     pointLight.shadow.mapSize.height = 1024;
155 |     pointLight.add(new THREE.Mesh(pointLightGeometry, pointLightMaterial));
156 |     pointLight.updateMatrixWorld();
157 |     pointLight.castShadow = true;
158 |     pointLight.intensity =  lmPerWat[lightningParams.pointLightningPowerA] *
159 |                             lampPower[lightningParams.pointLightningPowerB];
160 |     pointLight.position.set(0, height / 3, 0);
161 |     pointLight.visible = lightningParams.pointActive;
162 |     basicLightning.add(pointLight);
163 | }
164 | 
165 | function animate() {
166 |     updateShadersAndLights();
167 |     updatePlexusParticles();
168 |     updateDancingSpotLights();
169 |     updateHedron();
170 |     updateCameraPosition();
171 |     requestAnimationFrame( animate );
172 |     analyser.getFrequencyData();
173 |     if (switchStats.enableStats) {
174 |         threeStats.domElement.style.visibility = 'visible';
175 |         updateStats();
176 |     } else {
177 |         threeStats.domElement.style.visibility = 'hidden';
178 |     }
179 |     composer.render();
180 | }
181 | 
182 | function updateShadersAndLights() {
183 |     shadersTime += 0.01;
184 | 
185 |     staticPass.uniforms[ 'time' ].value = shadersTime;
186 |     CRTPass.uniforms[ 'time' ].value = shadersTime;
187 | 
188 |     if (lightningParams.exposure !== previousExposure) {
189 |         renderer.toneMappingExposure = Math.pow(lightningParams.exposure, 5.0);
190 |         previousExposure = lightningParams.exposure;
191 |     }
192 | 
193 |     renderer.shadowMap.enabled  = lightningParams.shadows;
194 |     renderer.toneMapping        = toneMappingTypes[lightningParams.toneMapping];
195 | 
196 |     if (shadersParams.globalSwitch) {
197 |         effectFXAA.enabled      = shadersParams.effectFXAA;
198 |         effectFilm.enabled      = shadersParams.effectFilm;
199 |         effectBloom.enabled     = shadersParams.effectBloom;
200 |         CRTPass.enabled         = shadersParams.CRTPass;
201 |         rgbShiftShader.enabled  = shadersParams.rgbShiftShader;
202 |         staticPass.enabled      = shadersParams.staticPass;
203 |         vignettePass.enabled    = shadersParams.vignettePass;
204 |         kaleidoShader.enabled   = shadersParams.kaleidoShader;
205 |         techniColor.enabled     = shadersParams.techniColor;
206 |         sepiaShader.enabled     = shadersParams.sepiaShader;
207 |     } else {
208 |         effectFXAA.enabled      = false;
209 |         effectFilm.enabled      = false;
210 |         effectBloom.enabled     = false;
211 |         CRTPass.enabled         = false;
212 |         rgbShiftShader.enabled  = false;
213 |         staticPass.enabled      = false;
214 |         vignettePass.enabled    = false;
215 |         techniColor.enabled     = false;
216 |         sepiaShader.enabled     = false;
217 |         kaleidoShader.enabled   = false;
218 |     }
219 | 
220 |     effectFilm.uniforms.nIntensity.value        = filmParams.noiseIntensity;
221 |     effectFilm.uniforms.sIntensity.value        = filmParams.scanLinesIntensity;
222 |     effectFilm.uniforms.sCount.value            = filmParams.scanLinesCount;
223 |     effectFilm.uniforms.grayscale.value         = filmParams.grayScale ? 1 : 0;
224 |     effectBloom.copyUniforms.opacity.value      = bloomParams.strength;
225 |     effectBloom.kernelSize                      = bloomParams.kernelSize;
226 |     effectBloom.sigma                           = bloomParams.sigma;
227 |     effectBloom.resolution                      = bloomParams.resolution;
228 |     CRTPass.uniforms[ 'distortion' ].value      = CRTParams.distortion1;
229 |     CRTPass.uniforms[ 'distortion2' ].value     = CRTParams.distortion2;
230 |     CRTPass.uniforms[ 'speed' ].value           = CRTParams.speed;
231 |     CRTPass.uniforms[ 'rollSpeed' ].value       = CRTParams.rollSpeed;
232 |     rgbShiftShader.uniforms[ 'amount' ].value   = rgbShiftParams.amount;
233 |     rgbShiftShader.uniforms[ 'angle' ].value    = rgbShiftParams.angle;
234 |     staticPass.uniforms[ 'amount' ].value       = staticParams.amount;
235 |     staticPass.uniforms[ 'size' ].value         = staticParams.size;
236 |     vignettePass.uniforms[ 'offset' ].value     = vignetteParams.offset;
237 |     vignettePass.uniforms[ 'darkness' ].value   = vignetteParams.darkness;
238 |     techniColor.uniforms[ 'amount' ].value      = techniColorParams.amount;
239 |     sepiaShader.uniforms[ 'amount' ].value      = sepiaParams.amount;
240 |     kaleidoShader.uniforms[ "sides" ].value     = kaleidoParams.sides;
241 |     kaleidoShader.uniforms[ "angle" ].value     = kaleidoParams.angle;
242 | 
243 |     if (lightningParams.shadows !== previousShadowMap) {
244 |         updateMaterials();
245 |         previousShadowMap = lightningParams.shadows;
246 |     }
247 | 
248 |     if (lightningParams.toneMapping !== previousTonemap) {
249 |         updateMaterials();
250 |         previousTonemap = lightningParams.toneMapping;
251 |     }
252 | 
253 |     hemiLight.intensity  = ambientIlluminance[lightningParams.hemiLightningPower];
254 |     pointLight.intensity =  lmPerWat[lightningParams.pointLightningPowerA] *
255 |         lampPower[lightningParams.pointLightningPowerB];
256 | 
257 |     hemiLight.visible = lightningParams.hemiActive;
258 |     pointLight.visible = lightningParams.pointActive;
259 | }
260 | 
261 | function updatePlexusParticles() {
262 |     if (plexusParams.enable) {
263 |         particlesGroup.visible = true;
264 |         plexusParticles.update(particlesGroup);
265 |     } else {
266 |         particlesGroup.visible = false;
267 |     }
268 | }
269 | 
270 | function updateDancingSpotLights() {
271 |     if (dancingSpotLightsParams.enable) {
272 |         spotLightsGroup.visible = true;
273 |         dancingSpotLights.helpersVisible = dancingSpotLightsParams.helpers;
274 |         dancingSpotLights.update(spotLightsGroup);
275 |     } else {
276 |         dancingSpotLightsParams.helpers = false;
277 |         spotLightsGroup.visible = false;
278 |     }
279 | }
280 | 
281 | function updateHedron() {
282 |     hedron.rotation.x += 0.05;
283 |     if (hedron.rotation.x >= 360) { hedron.rotation.x = 0; }
284 | 
285 |     hedron.rotation.y += 0.01;
286 |     if (hedron.rotation.y >= 360) { hedron.rotation.y = 0; }
287 | }
288 | 
289 | function updateCameraPosition() {
290 |     group.mousePositionX = mouseX / 10;
291 |     group.mousePositionY = mouseY / 10;
292 | 
293 |     camera.position.x += ( (mouseX / cameraMoveFactor) - camera.position.x ) * .025;
294 |     camera.position.y += ( - (mouseY / (cameraMoveFactor / 2)) - camera.position.y ) * .025;
295 |     camera.position.y = clamp(camera.position.y, 130, 50000);
296 |     camera.position.z = 1000;
297 |     camera.lookAt( scene.position );
298 | 
299 |     if (shadersParams.CRTPass || shadersParams.rgbShiftShader) {
300 | 
301 |         var absMouseX = Math.abs(group.mousePositionX);
302 |         var absMouseY = Math.abs(group.mousePositionY);
303 |         var distortFactor = Math.max(absMouseX, absMouseY);
304 |         var distortThreshold = 80.0;
305 | 
306 |         particlesGroup.rotation.y += 0.005 + ((analyser.data[12] / 168.0) / 100);
307 |         disc.rotation.y += 0.02;
308 | 
309 |         var distortFactorB = (analyser.data[21] <= distortThreshold) ? analyser.data[21] / 1.7 : analyser.data[21];
310 |         CRTPass.uniforms[ 'distortion2' ].value += distortFactorB / 50;
311 |         if (shadersParams.CRTPass) {
312 |             CRTPass.uniforms[ 'distortion' ].value += distortFactor / 1200.;
313 |         }
314 |         if (shadersParams.rgbShiftShader) {
315 |             rgbShiftShader.uniforms[ 'amount' ].value += distortFactorB / 32000;
316 |         }
317 | 
318 |         if (analyser.data[21] >= 130.0) {
319 |             changePlexus();
320 |         }
321 |     }
322 | }
323 | 
324 | function updateStats() {
325 |     if (safeSet(threeStats))
326 |     {
327 |         threeStats.update();
328 |     }
329 | }
330 | 
331 | function setEvents() {
332 |     addEvent(window,"load",function(e) {
333 |         e.parent = null;
334 |         addEvent(document, "mouseout", function(e) {
335 |             e = e ? e : window.event;
336 |             var from = e.relatedTarget || e.toElement;
337 |             if (!from || from.nodeName === "HTML") {
338 |                 mouseFocus = false;
339 |             }
340 |         });
341 |     });
342 | 
343 |     addEvent(document, "mousemove", onDocumentMouseMove);
344 | }
345 | 
346 | function render() {
347 |     renderer.render( scene, camera );
348 | }
349 | 


--------------------------------------------------------------------------------
/lib/simplexnoise.js:
--------------------------------------------------------------------------------
  1 | // Ported from Stefan Gustavson's java implementation
  2 | // http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
  3 | // Read Stefan's excellent paper for details on how this code works.
  4 | //
  5 | // Sean McCullough banksean@gmail.com
  6 | //
  7 | // Added 4D noise
  8 | // Joshua Koo zz85nus@gmail.com 
  9 | 
 10 | /**
 11 |  * You can pass in a random number generator object if you like.
 12 |  * It is assumed to have a random() method.
 13 |  */
 14 | var SimplexNoise = function(r) {
 15 | 	if (r == undefined) r = Math;
 16 | 
 17 | 	this.grad3 = [
 18 | 		[ 1,1,0 ], [ -1,1,0 ], [ 1,-1,0 ], [ -1,-1,0 ], 
 19 | 		[ 1,0,1 ], [ -1,0,1 ], [ 1,0,-1 ], [ -1,0,-1 ], 
 20 | 		[ 0,1,1 ], [ 0,-1,1 ], [ 0,1,-1 ], [ 0,-1,-1 ]]; 
 21 | 
 22 | 	this.grad4 = [
 23 | 		[ 0,1,1,1 ],	[ 0,1,1,-1 ],	[ 0,1,-1,1 ],	[ 0,1,-1,-1 ],
 24 | 		[ 0,-1,1,1 ],	[ 0,-1,1,-1 ],	[ 0,-1,-1,1 ],	[ 0,-1,-1,-1 ],
 25 | 	     [ 1,0,1,1 ],	[ 1,0,1,-1 ],	[ 1,0,-1,1 ],	[ 1,0,-1,-1 ],
 26 | 	     [ -1,0,1,1 ],	[ -1,0,1,-1 ],	[ -1,0,-1,1 ],	[ -1,0,-1,-1 ],
 27 | 	     [ 1,1,0,1 ],	[ 1,1,0,-1 ],	[ 1,-1,0,1 ],	[ 1,-1,0,-1 ],
 28 | 	     [ -1,1,0,1 ],	[ -1,1,0,-1 ],	[ -1,-1,0,1 ],	[ -1,-1,0,-1 ],
 29 | 	     [ 1,1,1,0 ],	[ 1,1,-1,0 ],	[ 1,-1,1,0 ],	[ 1,-1,-1,0 ],
 30 | 	     [ -1,1,1,0 ],	[ -1,1,-1,0 ],	[ -1,-1,1,0 ],	[ -1,-1,-1,0 ]];
 31 | 
 32 | 	this.p = [];
 33 | 	for (var i = 0; i < 256; i ++) {
 34 | 		this.p[i] = Math.floor(r.random() * 256);
 35 | 	}
 36 | 
 37 |   // To remove the need for index wrapping, double the permutation table length 
 38 | 	this.perm = []; 
 39 | 	for (var i = 0; i < 512; i ++) {
 40 | 		this.perm[i] = this.p[i & 255];
 41 | 	} 
 42 | 
 43 |   // A lookup table to traverse the simplex around a given point in 4D. 
 44 |   // Details can be found where this table is used, in the 4D noise method. 
 45 | 	this.simplex = [ 
 46 |     [ 0,1,2,3 ],[ 0,1,3,2 ],[ 0,0,0,0 ],[ 0,2,3,1 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 1,2,3,0 ], 
 47 |     [ 0,2,1,3 ],[ 0,0,0,0 ],[ 0,3,1,2 ],[ 0,3,2,1 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 1,3,2,0 ], 
 48 |     [ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ], 
 49 |     [ 1,2,0,3 ],[ 0,0,0,0 ],[ 1,3,0,2 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 2,3,0,1 ],[ 2,3,1,0 ], 
 50 |     [ 1,0,2,3 ],[ 1,0,3,2 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 2,0,3,1 ],[ 0,0,0,0 ],[ 2,1,3,0 ], 
 51 |     [ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ], 
 52 |     [ 2,0,1,3 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 3,0,1,2 ],[ 3,0,2,1 ],[ 0,0,0,0 ],[ 3,1,2,0 ], 
 53 |     [ 2,1,0,3 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 3,1,0,2 ],[ 0,0,0,0 ],[ 3,2,0,1 ],[ 3,2,1,0 ]]; 
 54 | };
 55 | 
 56 | SimplexNoise.prototype.dot = function(g, x, y) { 
 57 | 	return g[0] * x + g[1] * y;
 58 | };
 59 | 
 60 | SimplexNoise.prototype.dot3 = function(g, x, y, z) {
 61 | 	return g[0] * x + g[1] * y + g[2] * z; 
 62 | };
 63 | 
 64 | SimplexNoise.prototype.dot4 = function(g, x, y, z, w) {
 65 | 	return g[0] * x + g[1] * y + g[2] * z + g[3] * w;
 66 | };
 67 | 
 68 | SimplexNoise.prototype.noise = function(xin, yin) { 
 69 | 	var n0, n1, n2; // Noise contributions from the three corners 
 70 |   // Skew the input space to determine which simplex cell we're in 
 71 | 	var F2 = 0.5 * (Math.sqrt(3.0) - 1.0); 
 72 | 	var s = (xin + yin) * F2; // Hairy factor for 2D 
 73 | 	var i = Math.floor(xin + s); 
 74 | 	var j = Math.floor(yin + s); 
 75 | 	var G2 = (3.0 - Math.sqrt(3.0)) / 6.0; 
 76 | 	var t = (i + j) * G2; 
 77 | 	var X0 = i - t; // Unskew the cell origin back to (x,y) space 
 78 | 	var Y0 = j - t; 
 79 | 	var x0 = xin - X0; // The x,y distances from the cell origin 
 80 | 	var y0 = yin - Y0; 
 81 |   // For the 2D case, the simplex shape is an equilateral triangle. 
 82 |   // Determine which simplex we are in. 
 83 | 	var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords 
 84 | 	if (x0 > y0) {i1 = 1; j1 = 0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1) 
 85 | 	else {i1 = 0; j1 = 1;}      // upper triangle, YX order: (0,0)->(0,1)->(1,1) 
 86 |   // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and 
 87 |   // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where 
 88 |   // c = (3-sqrt(3))/6 
 89 | 	var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords 
 90 | 	var y1 = y0 - j1 + G2; 
 91 | 	var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords 
 92 | 	var y2 = y0 - 1.0 + 2.0 * G2; 
 93 |   // Work out the hashed gradient indices of the three simplex corners 
 94 | 	var ii = i & 255; 
 95 | 	var jj = j & 255; 
 96 | 	var gi0 = this.perm[ii + this.perm[jj]] % 12; 
 97 | 	var gi1 = this.perm[ii + i1 + this.perm[jj + j1]] % 12; 
 98 | 	var gi2 = this.perm[ii + 1 + this.perm[jj + 1]] % 12; 
 99 |   // Calculate the contribution from the three corners 
100 | 	var t0 = 0.5 - x0 * x0 - y0 * y0; 
101 | 	if (t0 < 0) n0 = 0.0; 
102 | 	else { 
103 | 		t0 *= t0; 
104 | 		n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0);  // (x,y) of grad3 used for 2D gradient 
105 | 	} 
106 | 	var t1 = 0.5 - x1 * x1 - y1 * y1; 
107 | 	if (t1 < 0) n1 = 0.0; 
108 | 	else { 
109 | 		t1 *= t1; 
110 | 		n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1); 
111 | 	}
112 | 	var t2 = 0.5 - x2 * x2 - y2 * y2; 
113 | 	if (t2 < 0) n2 = 0.0; 
114 | 	else { 
115 | 		t2 *= t2; 
116 | 		n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2); 
117 | 	} 
118 |   // Add contributions from each corner to get the final noise value. 
119 |   // The result is scaled to return values in the interval [-1,1]. 
120 | 	return 70.0 * (n0 + n1 + n2); 
121 | };
122 | 
123 | // 3D simplex noise 
124 | SimplexNoise.prototype.noise3d = function(xin, yin, zin) { 
125 | 	var n0, n1, n2, n3; // Noise contributions from the four corners 
126 |   // Skew the input space to determine which simplex cell we're in 
127 | 	var F3 = 1.0 / 3.0; 
128 | 	var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D 
129 | 	var i = Math.floor(xin + s); 
130 | 	var j = Math.floor(yin + s); 
131 | 	var k = Math.floor(zin + s); 
132 | 	var G3 = 1.0 / 6.0; // Very nice and simple unskew factor, too 
133 | 	var t = (i + j + k) * G3; 
134 | 	var X0 = i - t; // Unskew the cell origin back to (x,y,z) space 
135 | 	var Y0 = j - t; 
136 | 	var Z0 = k - t; 
137 | 	var x0 = xin - X0; // The x,y,z distances from the cell origin 
138 | 	var y0 = yin - Y0; 
139 | 	var z0 = zin - Z0; 
140 |   // For the 3D case, the simplex shape is a slightly irregular tetrahedron. 
141 |   // Determine which simplex we are in. 
142 | 	var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords 
143 | 	var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords 
144 | 	if (x0 >= y0) { 
145 | 		if (y0 >= z0) 
146 |       { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } // X Y Z order 
147 |       else if (x0 >= z0) { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 0; k2 = 1; } // X Z Y order 
148 | 		else { i1 = 0; j1 = 0; k1 = 1; i2 = 1; j2 = 0; k2 = 1; } // Z X Y order 
149 | 	} 
150 | 	else { // x0<y0 
151 | 		if (y0 < z0) { i1 = 0; j1 = 0; k1 = 1; i2 = 0; j2 = 1; k2 = 1; } // Z Y X order 
152 |     else if (x0 < z0) { i1 = 0; j1 = 1; k1 = 0; i2 = 0; j2 = 1; k2 = 1; } // Y Z X order 
153 | 		else { i1 = 0; j1 = 1; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } // Y X Z order 
154 | 	} 
155 |   // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z), 
156 |   // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and 
157 |   // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where 
158 |   // c = 1/6.
159 | 	var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords 
160 | 	var y1 = y0 - j1 + G3; 
161 | 	var z1 = z0 - k1 + G3; 
162 | 	var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords 
163 | 	var y2 = y0 - j2 + 2.0 * G3; 
164 | 	var z2 = z0 - k2 + 2.0 * G3; 
165 | 	var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords 
166 | 	var y3 = y0 - 1.0 + 3.0 * G3; 
167 | 	var z3 = z0 - 1.0 + 3.0 * G3; 
168 |   // Work out the hashed gradient indices of the four simplex corners 
169 | 	var ii = i & 255; 
170 | 	var jj = j & 255; 
171 | 	var kk = k & 255; 
172 | 	var gi0 = this.perm[ii + this.perm[jj + this.perm[kk]]] % 12; 
173 | 	var gi1 = this.perm[ii + i1 + this.perm[jj + j1 + this.perm[kk + k1]]] % 12; 
174 | 	var gi2 = this.perm[ii + i2 + this.perm[jj + j2 + this.perm[kk + k2]]] % 12; 
175 | 	var gi3 = this.perm[ii + 1 + this.perm[jj + 1 + this.perm[kk + 1]]] % 12; 
176 |   // Calculate the contribution from the four corners 
177 | 	var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0; 
178 | 	if (t0 < 0) n0 = 0.0; 
179 | 	else { 
180 | 		t0 *= t0; 
181 | 		n0 = t0 * t0 * this.dot3(this.grad3[gi0], x0, y0, z0); 
182 | 	}
183 | 	var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1; 
184 | 	if (t1 < 0) n1 = 0.0; 
185 | 	else { 
186 | 		t1 *= t1; 
187 | 		n1 = t1 * t1 * this.dot3(this.grad3[gi1], x1, y1, z1); 
188 | 	} 
189 | 	var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2; 
190 | 	if (t2 < 0) n2 = 0.0; 
191 | 	else { 
192 | 		t2 *= t2; 
193 | 		n2 = t2 * t2 * this.dot3(this.grad3[gi2], x2, y2, z2); 
194 | 	} 
195 | 	var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3; 
196 | 	if (t3 < 0) n3 = 0.0; 
197 | 	else { 
198 | 		t3 *= t3; 
199 | 		n3 = t3 * t3 * this.dot3(this.grad3[gi3], x3, y3, z3); 
200 | 	} 
201 |   // Add contributions from each corner to get the final noise value. 
202 |   // The result is scaled to stay just inside [-1,1] 
203 | 	return 32.0 * (n0 + n1 + n2 + n3); 
204 | };
205 | 
206 | // 4D simplex noise
207 | SimplexNoise.prototype.noise4d = function( x, y, z, w ) {
208 | 	// For faster and easier lookups
209 | 	var grad4 = this.grad4;
210 | 	var simplex = this.simplex;
211 | 	var perm = this.perm;
212 | 	
213 |    // The skewing and unskewing factors are hairy again for the 4D case
214 | 	var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
215 | 	var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
216 | 	var n0, n1, n2, n3, n4; // Noise contributions from the five corners
217 |    // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
218 | 	var s = (x + y + z + w) * F4; // Factor for 4D skewing
219 | 	var i = Math.floor(x + s);
220 | 	var j = Math.floor(y + s);
221 | 	var k = Math.floor(z + s);
222 | 	var l = Math.floor(w + s);
223 | 	var t = (i + j + k + l) * G4; // Factor for 4D unskewing
224 | 	var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
225 | 	var Y0 = j - t;
226 | 	var Z0 = k - t;
227 | 	var W0 = l - t;
228 | 	var x0 = x - X0;  // The x,y,z,w distances from the cell origin
229 | 	var y0 = y - Y0;
230 | 	var z0 = z - Z0;
231 | 	var w0 = w - W0;
232 | 
233 |    // For the 4D case, the simplex is a 4D shape I won't even try to describe.
234 |    // To find out which of the 24 possible simplices we're in, we need to
235 |    // determine the magnitude ordering of x0, y0, z0 and w0.
236 |    // The method below is a good way of finding the ordering of x,y,z,w and
237 |    // then find the correct traversal order for the simplex we’re in.
238 |    // First, six pair-wise comparisons are performed between each possible pair
239 |    // of the four coordinates, and the results are used to add up binary bits
240 |    // for an integer index.
241 | 	var c1 = (x0 > y0) ? 32 : 0;
242 | 	var c2 = (x0 > z0) ? 16 : 0;
243 | 	var c3 = (y0 > z0) ? 8 : 0;
244 | 	var c4 = (x0 > w0) ? 4 : 0;
245 | 	var c5 = (y0 > w0) ? 2 : 0;
246 | 	var c6 = (z0 > w0) ? 1 : 0;
247 | 	var c = c1 + c2 + c3 + c4 + c5 + c6;
248 | 	var i1, j1, k1, l1; // The integer offsets for the second simplex corner
249 | 	var i2, j2, k2, l2; // The integer offsets for the third simplex corner
250 | 	var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
251 |    // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
252 |    // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
253 |    // impossible. Only the 24 indices which have non-zero entries make any sense.
254 |    // We use a thresholding to set the coordinates in turn from the largest magnitude.
255 |    // The number 3 in the "simplex" array is at the position of the largest coordinate.
256 | 	i1 = simplex[c][0] >= 3 ? 1 : 0;
257 | 	j1 = simplex[c][1] >= 3 ? 1 : 0;
258 | 	k1 = simplex[c][2] >= 3 ? 1 : 0;
259 | 	l1 = simplex[c][3] >= 3 ? 1 : 0;
260 |    // The number 2 in the "simplex" array is at the second largest coordinate.
261 | 	i2 = simplex[c][0] >= 2 ? 1 : 0;
262 | 	j2 = simplex[c][1] >= 2 ? 1 : 0;    k2 = simplex[c][2] >= 2 ? 1 : 0;
263 | 	l2 = simplex[c][3] >= 2 ? 1 : 0;
264 |    // The number 1 in the "simplex" array is at the second smallest coordinate.
265 | 	i3 = simplex[c][0] >= 1 ? 1 : 0;
266 | 	j3 = simplex[c][1] >= 1 ? 1 : 0;
267 | 	k3 = simplex[c][2] >= 1 ? 1 : 0;
268 | 	l3 = simplex[c][3] >= 1 ? 1 : 0;
269 |    // The fifth corner has all coordinate offsets = 1, so no need to look that up.
270 | 	var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
271 | 	var y1 = y0 - j1 + G4;
272 | 	var z1 = z0 - k1 + G4;
273 | 	var w1 = w0 - l1 + G4;
274 | 	var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
275 | 	var y2 = y0 - j2 + 2.0 * G4;
276 | 	var z2 = z0 - k2 + 2.0 * G4;
277 | 	var w2 = w0 - l2 + 2.0 * G4;
278 | 	var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
279 | 	var y3 = y0 - j3 + 3.0 * G4;
280 | 	var z3 = z0 - k3 + 3.0 * G4;
281 | 	var w3 = w0 - l3 + 3.0 * G4;
282 | 	var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
283 | 	var y4 = y0 - 1.0 + 4.0 * G4;
284 | 	var z4 = z0 - 1.0 + 4.0 * G4;
285 | 	var w4 = w0 - 1.0 + 4.0 * G4;
286 |    // Work out the hashed gradient indices of the five simplex corners
287 | 	var ii = i & 255;
288 | 	var jj = j & 255;
289 | 	var kk = k & 255;
290 | 	var ll = l & 255;
291 | 	var gi0 = perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32;
292 | 	var gi1 = perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32;
293 | 	var gi2 = perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32;
294 | 	var gi3 = perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32;
295 | 	var gi4 = perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32;
296 |    // Calculate the contribution from the five corners
297 | 	var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
298 | 	if (t0 < 0) n0 = 0.0;
299 | 	else {
300 | 		t0 *= t0;
301 | 		n0 = t0 * t0 * this.dot4(grad4[gi0], x0, y0, z0, w0);
302 | 	}
303 | 	var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
304 | 	if (t1 < 0) n1 = 0.0;
305 | 	else {
306 | 		t1 *= t1;
307 | 		n1 = t1 * t1 * this.dot4(grad4[gi1], x1, y1, z1, w1);
308 | 	}
309 | 	var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
310 | 	if (t2 < 0) n2 = 0.0;
311 | 	else {
312 | 		t2 *= t2;
313 | 		n2 = t2 * t2 * this.dot4(grad4[gi2], x2, y2, z2, w2);
314 | 	}   var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
315 | 	if (t3 < 0) n3 = 0.0;
316 | 	else {
317 | 		t3 *= t3;
318 | 		n3 = t3 * t3 * this.dot4(grad4[gi3], x3, y3, z3, w3);
319 | 	}
320 | 	var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
321 | 	if (t4 < 0) n4 = 0.0;
322 | 	else {
323 | 		t4 *= t4;
324 | 		n4 = t4 * t4 * this.dot4(grad4[gi4], x4, y4, z4, w4);
325 | 	}
326 |    // Sum up and scale the result to cover the range [-1,1]
327 | 	return 27.0 * (n0 + n1 + n2 + n3 + n4);
328 | };
329 | 


--------------------------------------------------------------------------------
/lib/dat.gui.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.dat=t():e.dat=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(1),r=o(i);t.default=r.default,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(2),r=o(i),a=n(6),l=o(a),s=n(3),u=o(s),d=n(7),c=o(d),f=n(8),_=o(f),p=n(10),h=o(p),m=n(11),b=o(m),g=n(12),v=o(g),y=n(13),w=o(y),x=n(14),E=o(x),C=n(15),A=o(C),S=n(16),k=o(S),O=n(9),T=o(O),R=n(17),L=o(R);t.default={color:{Color:r.default,math:l.default,interpret:u.default},controllers:{Controller:c.default,BooleanController:_.default,OptionController:h.default,StringController:b.default,NumberController:v.default,NumberControllerBox:w.default,NumberControllerSlider:E.default,FunctionController:A.default,ColorController:k.default},dom:{dom:T.default},gui:{GUI:L.default},GUI:L.default},e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t,n){Object.defineProperty(e,t,{get:function(){return"RGB"===this.__state.space?this.__state[t]:(h.recalculateRGB(this,t,n),this.__state[t])},set:function(e){"RGB"!==this.__state.space&&(h.recalculateRGB(this,t,n),this.__state.space="RGB"),this.__state[t]=e}})}function a(e,t){Object.defineProperty(e,t,{get:function(){return"HSV"===this.__state.space?this.__state[t]:(h.recalculateHSV(this),this.__state[t])},set:function(e){"HSV"!==this.__state.space&&(h.recalculateHSV(this),this.__state.space="HSV"),this.__state[t]=e}})}t.__esModule=!0;var l=n(3),s=o(l),u=n(6),d=o(u),c=n(4),f=o(c),_=n(5),p=o(_),h=function(){function e(){if(i(this,e),this.__state=s.default.apply(this,arguments),this.__state===!1)throw new Error("Failed to interpret color arguments");this.__state.a=this.__state.a||1}return e.prototype.toString=function(){return(0,f.default)(this)},e.prototype.toHexString=function(){return(0,f.default)(this,!0)},e.prototype.toOriginal=function(){return this.__state.conversion.write(this)},e}();h.recalculateRGB=function(e,t,n){if("HEX"===e.__state.space)e.__state[t]=d.default.component_from_hex(e.__state.hex,n);else{if("HSV"!==e.__state.space)throw new Error("Corrupted color state");p.default.extend(e.__state,d.default.hsv_to_rgb(e.__state.h,e.__state.s,e.__state.v))}},h.recalculateHSV=function(e){var t=d.default.rgb_to_hsv(e.r,e.g,e.b);p.default.extend(e.__state,{s:t.s,v:t.v}),p.default.isNaN(t.h)?p.default.isUndefined(e.__state.h)&&(e.__state.h=0):e.__state.h=t.h},h.COMPONENTS=["r","g","b","h","s","v","hex","a"],r(h.prototype,"r",2),r(h.prototype,"g",1),r(h.prototype,"b",0),a(h.prototype,"h"),a(h.prototype,"s"),a(h.prototype,"v"),Object.defineProperty(h.prototype,"a",{get:function(){return this.__state.a},set:function(e){this.__state.a=e}}),Object.defineProperty(h.prototype,"hex",{get:function(){return"HEX"!==!this.__state.space&&(this.__state.hex=d.default.rgb_to_hex(this.r,this.g,this.b)),this.__state.hex},set:function(e){this.__state.space="HEX",this.__state.hex=e}}),t.default=h,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(4),r=o(i),a=n(5),l=o(a),s=[{litmus:l.default.isString,conversions:{THREE_CHAR_HEX:{read:function(e){var t=e.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);return null!==t&&{space:"HEX",hex:parseInt("0x"+t[1].toString()+t[1].toString()+t[2].toString()+t[2].toString()+t[3].toString()+t[3].toString(),0)}},write:r.default},SIX_CHAR_HEX:{read:function(e){var t=e.match(/^#([A-F0-9]{6})$/i);return null!==t&&{space:"HEX",hex:parseInt("0x"+t[1].toString(),0)}},write:r.default},CSS_RGB:{read:function(e){var t=e.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);return null!==t&&{space:"RGB",r:parseFloat(t[1]),g:parseFloat(t[2]),b:parseFloat(t[3])}},write:r.default},CSS_RGBA:{read:function(e){var t=e.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);return null!==t&&{space:"RGB",r:parseFloat(t[1]),g:parseFloat(t[2]),b:parseFloat(t[3]),a:parseFloat(t[4])}},write:r.default}}},{litmus:l.default.isNumber,conversions:{HEX:{read:function(e){return{space:"HEX",hex:e,conversionName:"HEX"}},write:function(e){return e.hex}}}},{litmus:l.default.isArray,conversions:{RGB_ARRAY:{read:function(e){return 3===e.length&&{space:"RGB",r:e[0],g:e[1],b:e[2]}},write:function(e){return[e.r,e.g,e.b]}},RGBA_ARRAY:{read:function(e){return 4===e.length&&{space:"RGB",r:e[0],g:e[1],b:e[2],a:e[3]}},write:function(e){return[e.r,e.g,e.b,e.a]}}}},{litmus:l.default.isObject,conversions:{RGBA_OBJ:{read:function(e){return!!(l.default.isNumber(e.r)&&l.default.isNumber(e.g)&&l.default.isNumber(e.b)&&l.default.isNumber(e.a))&&{space:"RGB",r:e.r,g:e.g,b:e.b,a:e.a}},write:function(e){return{r:e.r,g:e.g,b:e.b,a:e.a}}},RGB_OBJ:{read:function(e){return!!(l.default.isNumber(e.r)&&l.default.isNumber(e.g)&&l.default.isNumber(e.b))&&{space:"RGB",r:e.r,g:e.g,b:e.b}},write:function(e){return{r:e.r,g:e.g,b:e.b}}},HSVA_OBJ:{read:function(e){return!!(l.default.isNumber(e.h)&&l.default.isNumber(e.s)&&l.default.isNumber(e.v)&&l.default.isNumber(e.a))&&{space:"HSV",h:e.h,s:e.s,v:e.v,a:e.a}},write:function(e){return{h:e.h,s:e.s,v:e.v,a:e.a}}},HSV_OBJ:{read:function(e){return!!(l.default.isNumber(e.h)&&l.default.isNumber(e.s)&&l.default.isNumber(e.v))&&{space:"HSV",h:e.h,s:e.s,v:e.v}},write:function(e){return{h:e.h,s:e.s,v:e.v}}}}}],u=void 0,d=void 0,c=function(){d=!1;var e=arguments.length>1?l.default.toArray(arguments):arguments[0];return l.default.each(s,function(t){if(t.litmus(e))return l.default.each(t.conversions,function(t,n){if(u=t.read(e),d===!1&&u!==!1)return d=u,u.conversionName=n,u.conversion=t,l.default.BREAK}),l.default.BREAK}),d};t.default=c,e.exports=t.default},function(e,t){"use strict";t.__esModule=!0,t.default=function(e,t){var n=e.__state.conversionName.toString(),o=Math.round(e.r),i=Math.round(e.g),r=Math.round(e.b),a=e.a,l=Math.round(e.h),s=e.s.toFixed(1),u=e.v.toFixed(1);if(t||"THREE_CHAR_HEX"===n||"SIX_CHAR_HEX"===n){for(var d=e.hex.toString(16);d.length<6;)d="0"+d;return"#"+d}return"CSS_RGB"===n?"rgb("+o+","+i+","+r+")":"CSS_RGBA"===n?"rgba("+o+","+i+","+r+","+a+")":"HEX"===n?"0x"+e.hex.toString(16):"RGB_ARRAY"===n?"["+o+","+i+","+r+"]":"RGBA_ARRAY"===n?"["+o+","+i+","+r+","+a+"]":"RGB_OBJ"===n?"{r:"+o+",g:"+i+",b:"+r+"}":"RGBA_OBJ"===n?"{r:"+o+",g:"+i+",b:"+r+",a:"+a+"}":"HSV_OBJ"===n?"{h:"+l+",s:"+s+",v:"+u+"}":"HSVA_OBJ"===n?"{h:"+l+",s:"+s+",v:"+u+",a:"+a+"}":"unknown format"},e.exports=t.default},function(e,t){"use strict";t.__esModule=!0;var n=Array.prototype.forEach,o=Array.prototype.slice,i={BREAK:{},extend:function(e){return this.each(o.call(arguments,1),function(t){var n=this.isObject(t)?Object.keys(t):[];n.forEach(function(n){this.isUndefined(t[n])||(e[n]=t[n])}.bind(this))},this),e},defaults:function(e){return this.each(o.call(arguments,1),function(t){var n=this.isObject(t)?Object.keys(t):[];n.forEach(function(n){this.isUndefined(e[n])&&(e[n]=t[n])}.bind(this))},this),e},compose:function(){var e=o.call(arguments);return function(){for(var t=o.call(arguments),n=e.length-1;n>=0;n--)t=[e[n].apply(this,t)];return t[0]}},each:function(e,t,o){if(e)if(n&&e.forEach&&e.forEach===n)e.forEach(t,o);else if(e.length===e.length+0){var i=void 0,r=void 0;for(i=0,r=e.length;i<r;i++)if(i in e&&t.call(o,e[i],i)===this.BREAK)return}else for(var a in e)if(t.call(o,e[a],a)===this.BREAK)return},defer:function(e){setTimeout(e,0)},debounce:function(e,t,n){var o=void 0;return function(){function i(){o=null,n||e.apply(r,a)}var r=this,a=arguments,l=n||!o;clearTimeout(o),o=setTimeout(i,t),l&&e.apply(r,a)}},toArray:function(e){return e.toArray?e.toArray():o.call(e)},isUndefined:function(e){return void 0===e},isNull:function(e){return null===e},isNaN:function(e){function t(t){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}(function(e){return isNaN(e)}),isArray:Array.isArray||function(e){return e.constructor===Array},isObject:function(e){return e===Object(e)},isNumber:function(e){return e===e+0},isString:function(e){return e===e+""},isBoolean:function(e){return e===!1||e===!0},isFunction:function(e){return"[object Function]"===Object.prototype.toString.call(e)}};t.default=i,e.exports=t.default},function(e,t){"use strict";t.__esModule=!0;var n=void 0,o={hsv_to_rgb:function(e,t,n){var o=Math.floor(e/60)%6,i=e/60-Math.floor(e/60),r=n*(1-t),a=n*(1-i*t),l=n*(1-(1-i)*t),s=[[n,l,r],[a,n,r],[r,n,l],[r,a,n],[l,r,n],[n,r,a]][o];return{r:255*s[0],g:255*s[1],b:255*s[2]}},rgb_to_hsv:function(e,t,n){var o=Math.min(e,t,n),i=Math.max(e,t,n),r=i-o,a=void 0,l=void 0;return 0===i?{h:NaN,s:0,v:0}:(l=r/i,a=e===i?(t-n)/r:t===i?2+(n-e)/r:4+(e-t)/r,a/=6,a<0&&(a+=1),{h:360*a,s:l,v:i/255})},rgb_to_hex:function(e,t,n){var o=this.hex_with_component(0,2,e);return o=this.hex_with_component(o,1,t),o=this.hex_with_component(o,0,n)},component_from_hex:function(e,t){return e>>8*t&255},hex_with_component:function(e,t,o){return o<<(n=8*t)|e&~(255<<n)}};t.default=o,e.exports=t.default},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=function(){function e(t,o){n(this,e),this.initialValue=t[o],this.domElement=document.createElement("div"),this.object=t,this.property=o,this.__onChange=void 0,this.__onFinishChange=void 0}return e.prototype.onChange=function(e){return this.__onChange=e,this},e.prototype.onFinishChange=function(e){return this.__onFinishChange=e,this},e.prototype.setValue=function(e){return this.object[this.property]=e,this.__onChange&&this.__onChange.call(this,e),this.updateDisplay(),this},e.prototype.getValue=function(){return this.object[this.property]},e.prototype.updateDisplay=function(){return this},e.prototype.isModified=function(){return this.initialValue!==this.getValue()},e}();t.default=o,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=function(e){function t(n,o){function a(){s.setValue(!s.__prev)}i(this,t);var l=r(this,e.call(this,n,o)),s=l;return l.__prev=l.getValue(),l.__checkbox=document.createElement("input"),l.__checkbox.setAttribute("type","checkbox"),d.default.bind(l.__checkbox,"change",a,!1),l.domElement.appendChild(l.__checkbox),l.updateDisplay(),l}return a(t,e),t.prototype.setValue=function(t){var n=e.prototype.setValue.call(this,t);return this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue()),this.__prev=this.getValue(),n},t.prototype.updateDisplay=function(){return this.getValue()===!0?(this.__checkbox.setAttribute("checked","checked"),this.__checkbox.checked=!0,this.__prev=!0):(this.__checkbox.checked=!1,this.__prev=!1),e.prototype.updateDisplay.call(this)},t}(s.default);t.default=c,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if("0"===e||a.default.isUndefined(e))return 0;var t=e.match(u);return a.default.isNull(t)?0:parseFloat(t[1])}t.__esModule=!0;var r=n(5),a=o(r),l={HTMLEvents:["change"],MouseEvents:["click","mousemove","mousedown","mouseup","mouseover"],KeyboardEvents:["keydown"]},s={};a.default.each(l,function(e,t){a.default.each(e,function(e){s[e]=t})});var u=/(\d+(\.\d+)?)px/,d={makeSelectable:function(e,t){void 0!==e&&void 0!==e.style&&(e.onselectstart=t?function(){return!1}:function(){},e.style.MozUserSelect=t?"auto":"none",e.style.KhtmlUserSelect=t?"auto":"none",e.unselectable=t?"on":"off")},makeFullscreen:function(e,t,n){var o=n,i=t;a.default.isUndefined(i)&&(i=!0),a.default.isUndefined(o)&&(o=!0),e.style.position="absolute",i&&(e.style.left=0,e.style.right=0),o&&(e.style.top=0,e.style.bottom=0)},fakeEvent:function(e,t,n,o){var i=n||{},r=s[t];if(!r)throw new Error("Event type "+t+" not supported.");var l=document.createEvent(r);switch(r){case"MouseEvents":var u=i.x||i.clientX||0,d=i.y||i.clientY||0;l.initMouseEvent(t,i.bubbles||!1,i.cancelable||!0,window,i.clickCount||1,0,0,u,d,!1,!1,!1,!1,0,null);break;case"KeyboardEvents":var c=l.initKeyboardEvent||l.initKeyEvent;a.default.defaults(i,{cancelable:!0,ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1,keyCode:void 0,charCode:void 0}),c(t,i.bubbles||!1,i.cancelable,window,i.ctrlKey,i.altKey,i.shiftKey,i.metaKey,i.keyCode,i.charCode);break;default:l.initEvent(t,i.bubbles||!1,i.cancelable||!0)}a.default.defaults(l,o),e.dispatchEvent(l)},bind:function(e,t,n,o){var i=o||!1;return e.addEventListener?e.addEventListener(t,n,i):e.attachEvent&&e.attachEvent("on"+t,n),d},unbind:function(e,t,n,o){var i=o||!1;return e.removeEventListener?e.removeEventListener(t,n,i):e.detachEvent&&e.detachEvent("on"+t,n),d},addClass:function(e,t){if(void 0===e.className)e.className=t;else if(e.className!==t){var n=e.className.split(/ +/);n.indexOf(t)===-1&&(n.push(t),e.className=n.join(" ").replace(/^\s+/,"").replace(/\s+$/,""))}return d},removeClass:function(e,t){if(t)if(e.className===t)e.removeAttribute("class");else{var n=e.className.split(/ +/),o=n.indexOf(t);o!==-1&&(n.splice(o,1),e.className=n.join(" "))}else e.className=void 0;return d},hasClass:function(e,t){return new RegExp("(?:^|\\s+)"+t+"(?:\\s+|$)").test(e.className)||!1},getWidth:function(e){var t=getComputedStyle(e);return i(t["border-left-width"])+i(t["border-right-width"])+i(t["padding-left"])+i(t["padding-right"])+i(t.width)},getHeight:function(e){var t=getComputedStyle(e);return i(t["border-top-width"])+i(t["border-bottom-width"])+i(t["padding-top"])+i(t["padding-bottom"])+i(t.height)},getOffset:function(e){var t=e,n={left:0,top:0};if(t.offsetParent)do n.left+=t.offsetLeft,n.top+=t.offsetTop,t=t.offsetParent;while(t);return n},isActive:function(e){return e===document.activeElement&&(e.type||e.href)}};t.default=d,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=n(5),f=o(c),_=function(e){function t(n,o,a){i(this,t);var l=r(this,e.call(this,n,o)),s=a,u=l;if(l.__select=document.createElement("select"),f.default.isArray(s)){var c={};f.default.each(s,function(e){c[e]=e}),s=c}return f.default.each(s,function(e,t){var n=document.createElement("option");n.innerHTML=t,n.setAttribute("value",e),u.__select.appendChild(n)}),l.updateDisplay(),d.default.bind(l.__select,"change",function(){var e=this.options[this.selectedIndex].value;u.setValue(e)}),l.domElement.appendChild(l.__select),l}return a(t,e),t.prototype.setValue=function(t){var n=e.prototype.setValue.call(this,t);return this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue()),n},t.prototype.updateDisplay=function(){return d.default.isActive(this.__select)?this:(this.__select.value=this.getValue(),e.prototype.updateDisplay.call(this))},t}(s.default);t.default=_,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=function(e){function t(n,o){function a(){u.setValue(u.__input.value)}function l(){u.__onFinishChange&&u.__onFinishChange.call(u,u.getValue())}i(this,t);var s=r(this,e.call(this,n,o)),u=s;return s.__input=document.createElement("input"),s.__input.setAttribute("type","text"),d.default.bind(s.__input,"keyup",a),d.default.bind(s.__input,"change",a),d.default.bind(s.__input,"blur",l),d.default.bind(s.__input,"keydown",function(e){13===e.keyCode&&this.blur()}),s.updateDisplay(),s.domElement.appendChild(s.__input),s}return a(t,e),t.prototype.updateDisplay=function(){return d.default.isActive(this.__input)||(this.__input.value=this.getValue()),e.prototype.updateDisplay.call(this)},t}(s.default);t.default=c,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e){var t=e.toString();return t.indexOf(".")>-1?t.length-t.indexOf(".")-1:0}t.__esModule=!0;var s=n(7),u=o(s),d=n(5),c=o(d),f=function(e){function t(n,o,a){i(this,t);var s=r(this,e.call(this,n,o)),u=a||{};return s.__min=u.min,s.__max=u.max,s.__step=u.step,c.default.isUndefined(s.__step)?0===s.initialValue?s.__impliedStep=1:s.__impliedStep=Math.pow(10,Math.floor(Math.log(Math.abs(s.initialValue))/Math.LN10))/10:s.__impliedStep=s.__step,s.__precision=l(s.__impliedStep),s}return a(t,e),t.prototype.setValue=function(t){var n=t;return void 0!==this.__min&&n<this.__min?n=this.__min:void 0!==this.__max&&n>this.__max&&(n=this.__max),void 0!==this.__step&&n%this.__step!==0&&(n=Math.round(n/this.__step)*this.__step),e.prototype.setValue.call(this,n)},t.prototype.min=function(e){return this.__min=e,this},t.prototype.max=function(e){return this.__max=e,this},t.prototype.step=function(e){return this.__step=e,this.__impliedStep=e,this.__precision=l(e),this},t}(u.default);t.default=f,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t){var n=Math.pow(10,t);return Math.round(e*n)/n}t.__esModule=!0;var s=n(12),u=o(s),d=n(9),c=o(d),f=n(5),_=o(f),p=function(e){function t(n,o,a){function l(){var e=parseFloat(m.__input.value);_.default.isNaN(e)||m.setValue(e)}function s(){m.__onFinishChange&&m.__onFinishChange.call(m,m.getValue())}function u(){s()}function d(e){var t=b-e.clientY;m.setValue(m.getValue()+t*m.__impliedStep),b=e.clientY}function f(){c.default.unbind(window,"mousemove",d),c.default.unbind(window,"mouseup",f),s()}function p(e){c.default.bind(window,"mousemove",d),c.default.bind(window,"mouseup",f),b=e.clientY}i(this,t);var h=r(this,e.call(this,n,o,a));h.__truncationSuspended=!1;var m=h,b=void 0;return h.__input=document.createElement("input"),h.__input.setAttribute("type","text"),c.default.bind(h.__input,"change",l),c.default.bind(h.__input,"blur",u),c.default.bind(h.__input,"mousedown",p),c.default.bind(h.__input,"keydown",function(e){13===e.keyCode&&(m.__truncationSuspended=!0,this.blur(),m.__truncationSuspended=!1,s())}),h.updateDisplay(),h.domElement.appendChild(h.__input),h}return a(t,e),t.prototype.updateDisplay=function(){return this.__input.value=this.__truncationSuspended?this.getValue():l(this.getValue(),this.__precision),e.prototype.updateDisplay.call(this)},t}(u.default);t.default=p,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t,n,o,i){return o+(i-o)*((e-t)/(n-t))}t.__esModule=!0;var s=n(12),u=o(s),d=n(9),c=o(d),f=function(e){function t(n,o,a,s,u){function d(e){document.activeElement.blur(),c.default.bind(window,"mousemove",f),c.default.bind(window,"mouseup",_),f(e)}function f(e){e.preventDefault();var t=h.__background.getBoundingClientRect();return h.setValue(l(e.clientX,t.left,t.right,h.__min,h.__max)),!1}function _(){c.default.unbind(window,"mousemove",f),c.default.unbind(window,"mouseup",_),h.__onFinishChange&&h.__onFinishChange.call(h,h.getValue())}i(this,t);var p=r(this,e.call(this,n,o,{min:a,max:s,step:u})),h=p;return p.__background=document.createElement("div"),p.__foreground=document.createElement("div"),c.default.bind(p.__background,"mousedown",d),c.default.addClass(p.__background,"slider"),c.default.addClass(p.__foreground,"slider-fg"),p.updateDisplay(),p.__background.appendChild(p.__foreground),p.domElement.appendChild(p.__background),p}return a(t,e),t.prototype.updateDisplay=function(){var t=(this.getValue()-this.__min)/(this.__max-this.__min);return this.__foreground.style.width=100*t+"%",e.prototype.updateDisplay.call(this)},t}(u.default);t.default=f,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=function(e){function t(n,o,a){i(this,t);var l=r(this,e.call(this,n,o)),s=l;return l.__button=document.createElement("div"),l.__button.innerHTML=void 0===a?"Fire":a,d.default.bind(l.__button,"click",function(e){return e.preventDefault(),s.fire(),!1}),d.default.addClass(l.__button,"button"),l.domElement.appendChild(l.__button),l}return a(t,e),t.prototype.fire=function(){this.__onChange&&this.__onChange.call(this),this.getValue().call(this.object),this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue())},t}(s.default);t.default=c,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t,n,o){e.style.background="",g.default.each(y,function(i){e.style.cssText+="background: "+i+"linear-gradient("+t+", "+n+" 0%, "+o+" 100%); "})}function s(e){e.style.background="",e.style.cssText+="background: -moz-linear-gradient(top,  #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);",e.style.cssText+="background: -webkit-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);",e.style.cssText+="background: -o-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);",e.style.cssText+="background: -ms-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);",e.style.cssText+="background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"}t.__esModule=!0;var u=n(7),d=o(u),c=n(9),f=o(c),_=n(2),p=o(_),h=n(3),m=o(h),b=n(5),g=o(b),v=function(e){function t(n,o){function a(e){h(e),f.default.bind(window,"mousemove",h),f.default.bind(window,"mouseup",u)}function u(){f.default.unbind(window,"mousemove",h),f.default.unbind(window,"mouseup",u),_()}function d(){var e=(0,m.default)(this.value);e!==!1?(y.__color.__state=e,y.setValue(y.__color.toOriginal())):this.value=y.__color.toString()}function c(){f.default.unbind(window,"mousemove",b),f.default.unbind(window,"mouseup",c),_()}function _(){y.__onFinishChange&&y.__onFinishChange.call(y,y.__color.toOriginal())}function h(e){e.preventDefault();var t=y.__saturation_field.getBoundingClientRect(),n=(e.clientX-t.left)/(t.right-t.left),o=1-(e.clientY-t.top)/(t.bottom-t.top);return o>1?o=1:o<0&&(o=0),n>1?n=1:n<0&&(n=0),y.__color.v=o,y.__color.s=n,y.setValue(y.__color.toOriginal()),!1}function b(e){e.preventDefault();var t=y.__hue_field.getBoundingClientRect(),n=1-(e.clientY-t.top)/(t.bottom-t.top);return n>1?n=1:n<0&&(n=0),y.__color.h=360*n,y.setValue(y.__color.toOriginal()),!1}i(this,t);var v=r(this,e.call(this,n,o));v.__color=new p.default(v.getValue()),v.__temp=new p.default(0);var y=v;v.domElement=document.createElement("div"),f.default.makeSelectable(v.domElement,!1),v.__selector=document.createElement("div"),v.__selector.className="selector",v.__saturation_field=document.createElement("div"),v.__saturation_field.className="saturation-field",v.__field_knob=document.createElement("div"),v.__field_knob.className="field-knob",v.__field_knob_border="2px solid ",v.__hue_knob=document.createElement("div"),v.__hue_knob.className="hue-knob",v.__hue_field=document.createElement("div"),v.__hue_field.className="hue-field",v.__input=document.createElement("input"),v.__input.type="text",v.__input_textShadow="0 1px 1px ",f.default.bind(v.__input,"keydown",function(e){13===e.keyCode&&d.call(this)}),f.default.bind(v.__input,"blur",d),f.default.bind(v.__selector,"mousedown",function(){f.default.addClass(this,"drag").bind(window,"mouseup",function(){f.default.removeClass(y.__selector,"drag")})});var w=document.createElement("div");return g.default.extend(v.__selector.style,{width:"122px",height:"102px",padding:"3px",backgroundColor:"#222",boxShadow:"0px 1px 3px rgba(0,0,0,0.3)"}),g.default.extend(v.__field_knob.style,{position:"absolute",width:"12px",height:"12px",border:v.__field_knob_border+(v.__color.v<.5?"#fff":"#000"),boxShadow:"0px 1px 3px rgba(0,0,0,0.5)",borderRadius:"12px",zIndex:1}),g.default.extend(v.__hue_knob.style,{position:"absolute",width:"15px",height:"2px",borderRight:"4px solid #fff",zIndex:1}),g.default.extend(v.__saturation_field.style,{width:"100px",height:"100px",border:"1px solid #555",marginRight:"3px",display:"inline-block",cursor:"pointer"}),g.default.extend(w.style,{width:"100%",height:"100%",background:"none"}),l(w,"top","rgba(0,0,0,0)","#000"),g.default.extend(v.__hue_field.style,{width:"15px",height:"100px",border:"1px solid #555",cursor:"ns-resize",position:"absolute",top:"3px",right:"3px"}),s(v.__hue_field),g.default.extend(v.__input.style,{outline:"none",textAlign:"center",color:"#fff",border:0,fontWeight:"bold",textShadow:v.__input_textShadow+"rgba(0,0,0,0.7)"}),f.default.bind(v.__saturation_field,"mousedown",a),f.default.bind(v.__field_knob,"mousedown",a),f.default.bind(v.__hue_field,"mousedown",function(e){b(e),f.default.bind(window,"mousemove",b),f.default.bind(window,"mouseup",c)}),v.__saturation_field.appendChild(w),v.__selector.appendChild(v.__field_knob),v.__selector.appendChild(v.__saturation_field),v.__selector.appendChild(v.__hue_field),v.__hue_field.appendChild(v.__hue_knob),v.domElement.appendChild(v.__input),v.domElement.appendChild(v.__selector),v.updateDisplay(),v}return a(t,e),t.prototype.updateDisplay=function(){var e=(0,m.default)(this.getValue());if(e!==!1){var t=!1;g.default.each(p.default.COMPONENTS,function(n){if(!g.default.isUndefined(e[n])&&!g.default.isUndefined(this.__color.__state[n])&&e[n]!==this.__color.__state[n])return t=!0,{}},this),t&&g.default.extend(this.__color.__state,e)}g.default.extend(this.__temp.__state,this.__color.__state),this.__temp.a=1;var n=this.__color.v<.5||this.__color.s>.5?255:0,o=255-n;g.default.extend(this.__field_knob.style,{marginLeft:100*this.__color.s-7+"px",marginTop:100*(1-this.__color.v)-7+"px",backgroundColor:this.__temp.toHexString(),border:this.__field_knob_border+"rgb("+n+","+n+","+n+")"}),this.__hue_knob.style.marginTop=100*(1-this.__color.h/360)+"px",this.__temp.s=1,this.__temp.v=1,l(this.__saturation_field,"left","#fff",this.__temp.toHexString()),this.__input.value=this.__color.toString(),g.default.extend(this.__input.style,{backgroundColor:this.__color.toHexString(),color:"rgb("+n+","+n+","+n+")",textShadow:this.__input_textShadow+"rgba("+o+","+o+","+o+",.7)"})},t}(d.default),y=["-moz-","-o-","-webkit-","-ms-",""];t.default=v,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t,n){var o=document.createElement("li");return t&&o.appendChild(t),n?e.__ul.insertBefore(o,n):e.__ul.appendChild(o),e.onResize(),o}function r(e,t){var n=e.__preset_select[e.__preset_select.selectedIndex];t?n.innerHTML=n.value+"*":n.innerHTML=n.value}function a(e,t,n){if(n.__li=t,n.__gui=e,U.default.extend(n,{options:function(t){if(arguments.length>1){var o=n.__li.nextElementSibling;return n.remove(),s(e,n.object,n.property,{before:o,factoryArgs:[U.default.toArray(arguments)]})}if(U.default.isArray(t)||U.default.isObject(t)){var i=n.__li.nextElementSibling;return n.remove(),s(e,n.object,n.property,{before:i,factoryArgs:[t]})}},name:function(e){return n.__li.firstElementChild.firstElementChild.innerHTML=e,n},listen:function(){return n.__gui.listen(n),n},remove:function(){return n.__gui.remove(n),n}}),n instanceof N.default){var o=new B.default(n.object,n.property,{
2 | min:n.__min,max:n.__max,step:n.__step});U.default.each(["updateDisplay","onChange","onFinishChange","step"],function(e){var t=n[e],i=o[e];n[e]=o[e]=function(){var e=Array.prototype.slice.call(arguments);return i.apply(o,e),t.apply(n,e)}}),z.default.addClass(t,"has-slider"),n.domElement.insertBefore(o.domElement,n.domElement.firstElementChild)}else if(n instanceof B.default){var i=function(t){if(U.default.isNumber(n.__min)&&U.default.isNumber(n.__max)){var o=n.__li.firstElementChild.firstElementChild.innerHTML,i=n.__gui.__listening.indexOf(n)>-1;n.remove();var r=s(e,n.object,n.property,{before:n.__li.nextElementSibling,factoryArgs:[n.__min,n.__max,n.__step]});return r.name(o),i&&r.listen(),r}return t};n.min=U.default.compose(i,n.min),n.max=U.default.compose(i,n.max)}else n instanceof O.default?(z.default.bind(t,"click",function(){z.default.fakeEvent(n.__checkbox,"click")}),z.default.bind(n.__checkbox,"click",function(e){e.stopPropagation()})):n instanceof R.default?(z.default.bind(t,"click",function(){z.default.fakeEvent(n.__button,"click")}),z.default.bind(t,"mouseover",function(){z.default.addClass(n.__button,"hover")}),z.default.bind(t,"mouseout",function(){z.default.removeClass(n.__button,"hover")})):n instanceof j.default&&(z.default.addClass(t,"color"),n.updateDisplay=U.default.compose(function(e){return t.style.borderLeftColor=n.__color.toString(),e},n.updateDisplay),n.updateDisplay());n.setValue=U.default.compose(function(t){return e.getRoot().__preset_select&&n.isModified()&&r(e.getRoot(),!0),t},n.setValue)}function l(e,t){var n=e.getRoot(),o=n.__rememberedObjects.indexOf(t.object);if(o!==-1){var i=n.__rememberedObjectIndecesToControllers[o];if(void 0===i&&(i={},n.__rememberedObjectIndecesToControllers[o]=i),i[t.property]=t,n.load&&n.load.remembered){var r=n.load.remembered,a=void 0;if(r[e.preset])a=r[e.preset];else{if(!r[Q])return;a=r[Q]}if(a[o]&&void 0!==a[o][t.property]){var l=a[o][t.property];t.initialValue=l,t.setValue(l)}}}}function s(e,t,n,o){if(void 0===t[n])throw new Error('Object "'+t+'" has no property "'+n+'"');var r=void 0;if(o.color)r=new j.default(t,n);else{var s=[t,n].concat(o.factoryArgs);r=C.default.apply(e,s)}o.before instanceof S.default&&(o.before=o.before.__li),l(e,r),z.default.addClass(r.domElement,"c");var u=document.createElement("span");z.default.addClass(u,"property-name"),u.innerHTML=r.property;var d=document.createElement("div");d.appendChild(u),d.appendChild(r.domElement);var c=i(e,d,o.before);return z.default.addClass(c,oe.CLASS_CONTROLLER_ROW),r instanceof j.default?z.default.addClass(c,"color"):z.default.addClass(c,g(r.getValue())),a(e,c,r),e.__controllers.push(r),r}function u(e,t){return document.location.href+"."+t}function d(e,t,n){var o=document.createElement("option");o.innerHTML=t,o.value=t,e.__preset_select.appendChild(o),n&&(e.__preset_select.selectedIndex=e.__preset_select.length-1)}function c(e,t){t.style.display=e.useLocalStorage?"block":"none"}function f(e){var t=e.__save_row=document.createElement("li");z.default.addClass(e.domElement,"has-save"),e.__ul.insertBefore(t,e.__ul.firstChild),z.default.addClass(t,"save-row");var n=document.createElement("span");n.innerHTML="&nbsp;",z.default.addClass(n,"button gears");var o=document.createElement("span");o.innerHTML="Save",z.default.addClass(o,"button"),z.default.addClass(o,"save");var i=document.createElement("span");i.innerHTML="New",z.default.addClass(i,"button"),z.default.addClass(i,"save-as");var r=document.createElement("span");r.innerHTML="Revert",z.default.addClass(r,"button"),z.default.addClass(r,"revert");var a=e.__preset_select=document.createElement("select");if(e.load&&e.load.remembered?U.default.each(e.load.remembered,function(t,n){d(e,n,n===e.preset)}):d(e,Q,!1),z.default.bind(a,"change",function(){for(var t=0;t<e.__preset_select.length;t++)e.__preset_select[t].innerHTML=e.__preset_select[t].value;e.preset=this.value}),t.appendChild(a),t.appendChild(n),t.appendChild(o),t.appendChild(i),t.appendChild(r),q){var l=document.getElementById("dg-local-explain"),s=document.getElementById("dg-local-storage"),f=document.getElementById("dg-save-locally");f.style.display="block","true"===localStorage.getItem(u(e,"isLocal"))&&s.setAttribute("checked","checked"),c(e,l),z.default.bind(s,"change",function(){e.useLocalStorage=!e.useLocalStorage,c(e,l)})}var _=document.getElementById("dg-new-constructor");z.default.bind(_,"keydown",function(e){!e.metaKey||67!==e.which&&67!==e.keyCode||Z.hide()}),z.default.bind(n,"click",function(){_.innerHTML=JSON.stringify(e.getSaveObject(),void 0,2),Z.show(),_.focus(),_.select()}),z.default.bind(o,"click",function(){e.save()}),z.default.bind(i,"click",function(){var t=prompt("Enter a new preset name.");t&&e.saveAs(t)}),z.default.bind(r,"click",function(){e.revert()})}function _(e){function t(t){return t.preventDefault(),e.width+=i-t.clientX,e.onResize(),i=t.clientX,!1}function n(){z.default.removeClass(e.__closeButton,oe.CLASS_DRAG),z.default.unbind(window,"mousemove",t),z.default.unbind(window,"mouseup",n)}function o(o){return o.preventDefault(),i=o.clientX,z.default.addClass(e.__closeButton,oe.CLASS_DRAG),z.default.bind(window,"mousemove",t),z.default.bind(window,"mouseup",n),!1}var i=void 0;e.__resize_handle=document.createElement("div"),U.default.extend(e.__resize_handle.style,{width:"6px",marginLeft:"-3px",height:"200px",cursor:"ew-resize",position:"absolute"}),z.default.bind(e.__resize_handle,"mousedown",o),z.default.bind(e.__closeButton,"mousedown",o),e.domElement.insertBefore(e.__resize_handle,e.domElement.firstElementChild)}function p(e,t){e.domElement.style.width=t+"px",e.__save_row&&e.autoPlace&&(e.__save_row.style.width=t+"px"),e.__closeButton&&(e.__closeButton.style.width=t+"px")}function h(e,t){var n={};return U.default.each(e.__rememberedObjects,function(o,i){var r={},a=e.__rememberedObjectIndecesToControllers[i];U.default.each(a,function(e,n){r[n]=t?e.initialValue:e.getValue()}),n[i]=r}),n}function m(e){for(var t=0;t<e.__preset_select.length;t++)e.__preset_select[t].value===e.preset&&(e.__preset_select.selectedIndex=t)}function b(e){0!==e.length&&D.default.call(window,function(){b(e)}),U.default.each(e,function(e){e.updateDisplay()})}t.__esModule=!0;var g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v=n(18),y=o(v),w=n(19),x=o(w),E=n(20),C=o(E),A=n(7),S=o(A),k=n(8),O=o(k),T=n(15),R=o(T),L=n(13),B=o(L),M=n(14),N=o(M),H=n(16),j=o(H),P=n(21),D=o(P),V=n(22),F=o(V),I=n(9),z=o(I),G=n(5),U=o(G),X=n(23),K=o(X);y.default.inject(K.default);var Y="dg",J=72,W=20,Q="Default",q=function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}(),Z=void 0,$=!0,ee=void 0,te=!1,ne=[],oe=function e(t){function n(){var e=o.getRoot();e.width+=1,U.default.defer(function(){e.width-=1})}var o=this,r=t||{};this.domElement=document.createElement("div"),this.__ul=document.createElement("ul"),this.domElement.appendChild(this.__ul),z.default.addClass(this.domElement,Y),this.__folders={},this.__controllers=[],this.__rememberedObjects=[],this.__rememberedObjectIndecesToControllers=[],this.__listening=[],r=U.default.defaults(r,{closeOnTop:!1,autoPlace:!0,width:e.DEFAULT_WIDTH}),r=U.default.defaults(r,{resizable:r.autoPlace,hideable:r.autoPlace}),U.default.isUndefined(r.load)?r.load={preset:Q}:r.preset&&(r.load.preset=r.preset),U.default.isUndefined(r.parent)&&r.hideable&&ne.push(this),r.resizable=U.default.isUndefined(r.parent)&&r.resizable,r.autoPlace&&U.default.isUndefined(r.scrollable)&&(r.scrollable=!0);var a=q&&"true"===localStorage.getItem(u(this,"isLocal")),l=void 0;if(Object.defineProperties(this,{parent:{get:function(){return r.parent}},scrollable:{get:function(){return r.scrollable}},autoPlace:{get:function(){return r.autoPlace}},closeOnTop:{get:function(){return r.closeOnTop}},preset:{get:function(){return o.parent?o.getRoot().preset:r.load.preset},set:function(e){o.parent?o.getRoot().preset=e:r.load.preset=e,m(this),o.revert()}},width:{get:function(){return r.width},set:function(e){r.width=e,p(o,e)}},name:{get:function(){return r.name},set:function(e){r.name=e,titleRowName&&(titleRowName.innerHTML=r.name)}},closed:{get:function(){return r.closed},set:function(t){r.closed=t,r.closed?z.default.addClass(o.__ul,e.CLASS_CLOSED):z.default.removeClass(o.__ul,e.CLASS_CLOSED),this.onResize(),o.__closeButton&&(o.__closeButton.innerHTML=t?e.TEXT_OPEN:e.TEXT_CLOSED)}},load:{get:function(){return r.load}},useLocalStorage:{get:function(){return a},set:function(e){q&&(a=e,e?z.default.bind(window,"unload",l):z.default.unbind(window,"unload",l),localStorage.setItem(u(o,"isLocal"),e))}}}),U.default.isUndefined(r.parent)){if(r.closed=!1,z.default.addClass(this.domElement,e.CLASS_MAIN),z.default.makeSelectable(this.domElement,!1),q&&a){o.useLocalStorage=!0;var s=localStorage.getItem(u(this,"gui"));s&&(r.load=JSON.parse(s))}this.__closeButton=document.createElement("div"),this.__closeButton.innerHTML=e.TEXT_CLOSED,z.default.addClass(this.__closeButton,e.CLASS_CLOSE_BUTTON),r.closeOnTop?(z.default.addClass(this.__closeButton,e.CLASS_CLOSE_TOP),this.domElement.insertBefore(this.__closeButton,this.domElement.childNodes[0])):(z.default.addClass(this.__closeButton,e.CLASS_CLOSE_BOTTOM),this.domElement.appendChild(this.__closeButton)),z.default.bind(this.__closeButton,"click",function(){o.closed=!o.closed})}else{void 0===r.closed&&(r.closed=!0);var d=document.createTextNode(r.name);z.default.addClass(d,"controller-name");var c=i(o,d),f=function(e){return e.preventDefault(),o.closed=!o.closed,!1};z.default.addClass(this.__ul,e.CLASS_CLOSED),z.default.addClass(c,"title"),z.default.bind(c,"click",f),r.closed||(this.closed=!1)}r.autoPlace&&(U.default.isUndefined(r.parent)&&($&&(ee=document.createElement("div"),z.default.addClass(ee,Y),z.default.addClass(ee,e.CLASS_AUTO_PLACE_CONTAINER),document.body.appendChild(ee),$=!1),ee.appendChild(this.domElement),z.default.addClass(this.domElement,e.CLASS_AUTO_PLACE)),this.parent||p(o,r.width)),this.__resizeHandler=function(){o.onResizeDebounced()},z.default.bind(window,"resize",this.__resizeHandler),z.default.bind(this.__ul,"webkitTransitionEnd",this.__resizeHandler),z.default.bind(this.__ul,"transitionend",this.__resizeHandler),z.default.bind(this.__ul,"oTransitionEnd",this.__resizeHandler),this.onResize(),r.resizable&&_(this),l=function(){q&&"true"===localStorage.getItem(u(o,"isLocal"))&&localStorage.setItem(u(o,"gui"),JSON.stringify(o.getSaveObject()))},this.saveToLocalStorageIfPossible=l,r.parent||n()};oe.toggleHide=function(){te=!te,U.default.each(ne,function(e){e.domElement.style.display=te?"none":""})},oe.CLASS_AUTO_PLACE="a",oe.CLASS_AUTO_PLACE_CONTAINER="ac",oe.CLASS_MAIN="main",oe.CLASS_CONTROLLER_ROW="cr",oe.CLASS_TOO_TALL="taller-than-window",oe.CLASS_CLOSED="closed",oe.CLASS_CLOSE_BUTTON="close-button",oe.CLASS_CLOSE_TOP="close-top",oe.CLASS_CLOSE_BOTTOM="close-bottom",oe.CLASS_DRAG="drag",oe.DEFAULT_WIDTH=245,oe.TEXT_CLOSED="Close Controls",oe.TEXT_OPEN="Open Controls",oe._keydownHandler=function(e){"text"===document.activeElement.type||e.which!==J&&e.keyCode!==J||oe.toggleHide()},z.default.bind(window,"keydown",oe._keydownHandler,!1),U.default.extend(oe.prototype,{add:function(e,t){return s(this,e,t,{factoryArgs:Array.prototype.slice.call(arguments,2)})},addColor:function(e,t){return s(this,e,t,{color:!0})},remove:function(e){this.__ul.removeChild(e.__li),this.__controllers.splice(this.__controllers.indexOf(e),1);var t=this;U.default.defer(function(){t.onResize()})},destroy:function(){this.autoPlace&&ee.removeChild(this.domElement),z.default.unbind(window,"keydown",oe._keydownHandler,!1),z.default.unbind(window,"resize",this.__resizeHandler),this.saveToLocalStorageIfPossible&&z.default.unbind(window,"unload",this.saveToLocalStorageIfPossible)},addFolder:function(e){if(void 0!==this.__folders[e])throw new Error('You already have a folder in this GUI by the name "'+e+'"');var t={name:e,parent:this};t.autoPlace=this.autoPlace,this.load&&this.load.folders&&this.load.folders[e]&&(t.closed=this.load.folders[e].closed,t.load=this.load.folders[e]);var n=new oe(t);this.__folders[e]=n;var o=i(this,n.domElement);return z.default.addClass(o,"folder"),n},open:function(){this.closed=!1},close:function(){this.closed=!0},onResize:function(){var e=this.getRoot();if(e.scrollable){var t=z.default.getOffset(e.__ul).top,n=0;U.default.each(e.__ul.childNodes,function(t){e.autoPlace&&t===e.__save_row||(n+=z.default.getHeight(t))}),window.innerHeight-t-W<n?(z.default.addClass(e.domElement,oe.CLASS_TOO_TALL),e.__ul.style.height=window.innerHeight-t-W+"px"):(z.default.removeClass(e.domElement,oe.CLASS_TOO_TALL),e.__ul.style.height="auto")}e.__resize_handle&&U.default.defer(function(){e.__resize_handle.style.height=e.__ul.offsetHeight+"px"}),e.__closeButton&&(e.__closeButton.style.width=e.width+"px")},onResizeDebounced:U.default.debounce(function(){this.onResize()},50),remember:function(){if(U.default.isUndefined(Z)&&(Z=new F.default,Z.domElement.innerHTML=x.default),this.parent)throw new Error("You can only call remember on a top level GUI.");var e=this;U.default.each(Array.prototype.slice.call(arguments),function(t){0===e.__rememberedObjects.length&&f(e),e.__rememberedObjects.indexOf(t)===-1&&e.__rememberedObjects.push(t)}),this.autoPlace&&p(this,this.width)},getRoot:function(){for(var e=this;e.parent;)e=e.parent;return e},getSaveObject:function(){var e=this.load;return e.closed=this.closed,this.__rememberedObjects.length>0&&(e.preset=this.preset,e.remembered||(e.remembered={}),e.remembered[this.preset]=h(this)),e.folders={},U.default.each(this.__folders,function(t,n){e.folders[n]=t.getSaveObject()}),e},save:function(){this.load.remembered||(this.load.remembered={}),this.load.remembered[this.preset]=h(this),r(this,!1),this.saveToLocalStorageIfPossible()},saveAs:function(e){this.load.remembered||(this.load.remembered={},this.load.remembered[Q]=h(this,!0)),this.load.remembered[e]=h(this),this.preset=e,d(this,e,!0),this.saveToLocalStorageIfPossible()},revert:function(e){U.default.each(this.__controllers,function(t){this.getRoot().load.remembered?l(e||this.getRoot(),t):t.setValue(t.initialValue),t.__onFinishChange&&t.__onFinishChange.call(t,t.getValue())},this),U.default.each(this.__folders,function(e){e.revert(e)}),e||r(this.getRoot(),!1)},listen:function(e){var t=0===this.__listening.length;this.__listening.push(e),t&&b(this.__listening)},updateDisplay:function(){U.default.each(this.__controllers,function(e){e.updateDisplay()}),U.default.each(this.__folders,function(e){e.updateDisplay()})}}),t.default=oe,e.exports=t.default},function(e,t){"use strict";e.exports={load:function(e,t){var n=t||document,o=n.createElement("link");o.type="text/css",o.rel="stylesheet",o.href=e,n.getElementsByTagName("head")[0].appendChild(o)},inject:function(e,t){var n=t||document,o=document.createElement("style");o.type="text/css",o.innerHTML=e;var i=n.getElementsByTagName("head")[0];try{i.appendChild(o)}catch(e){}}}},function(e,t){e.exports="<div id=dg-save class=\"dg dialogue\"> Here's the new load parameter for your <code>GUI</code>'s constructor: <textarea id=dg-new-constructor></textarea> <div id=dg-save-locally> <input id=dg-local-storage type=checkbox /> Automatically save values to <code>localStorage</code> on exit. <div id=dg-local-explain>The values saved to <code>localStorage</code> will override those passed to <code>dat.GUI</code>'s constructor. This makes it easier to work incrementally, but <code>localStorage</code> is fragile, and your friends may not see the same values you do. </div> </div> </div>"},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(10),r=o(i),a=n(13),l=o(a),s=n(14),u=o(s),d=n(11),c=o(d),f=n(15),_=o(f),p=n(8),h=o(p),m=n(5),b=o(m),g=function(e,t){var n=e[t];return b.default.isArray(arguments[2])||b.default.isObject(arguments[2])?new r.default(e,t,arguments[2]):b.default.isNumber(n)?b.default.isNumber(arguments[2])&&b.default.isNumber(arguments[3])?b.default.isNumber(arguments[4])?new u.default(e,t,arguments[2],arguments[3],arguments[4]):new u.default(e,t,arguments[2],arguments[3]):b.default.isNumber(arguments[4])?new l.default(e,t,{min:arguments[2],max:arguments[3],step:arguments[4]}):new l.default(e,t,{min:arguments[2],max:arguments[3]}):b.default.isString(n)?new c.default(e,t):b.default.isFunction(n)?new _.default(e,t,""):b.default.isBoolean(n)?new h.default(e,t):null};t.default=g,e.exports=t.default},function(e,t){"use strict";function n(e){setTimeout(e,1e3/60)}t.__esModule=!0,t.default=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||n,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var r=n(9),a=o(r),l=n(5),s=o(l),u=function(){function e(){i(this,e),this.backgroundElement=document.createElement("div"),s.default.extend(this.backgroundElement.style,{backgroundColor:"rgba(0,0,0,0.8)",top:0,left:0,display:"none",zIndex:"1000",opacity:0,WebkitTransition:"opacity 0.2s linear",transition:"opacity 0.2s linear"}),a.default.makeFullscreen(this.backgroundElement),this.backgroundElement.style.position="fixed",this.domElement=document.createElement("div"),s.default.extend(this.domElement.style,{position:"fixed",display:"none",zIndex:"1001",opacity:0,WebkitTransition:"-webkit-transform 0.2s ease-out, opacity 0.2s linear",transition:"transform 0.2s ease-out, opacity 0.2s linear"}),document.body.appendChild(this.backgroundElement),document.body.appendChild(this.domElement);var t=this;a.default.bind(this.backgroundElement,"click",function(){t.hide()})}return e.prototype.show=function(){var e=this;this.backgroundElement.style.display="block",this.domElement.style.display="block",this.domElement.style.opacity=0,this.domElement.style.webkitTransform="scale(1.1)",this.layout(),s.default.defer(function(){e.backgroundElement.style.opacity=1,e.domElement.style.opacity=1,e.domElement.style.webkitTransform="scale(1)"})},e.prototype.hide=function e(){var t=this,e=function e(){t.domElement.style.display="none",t.backgroundElement.style.display="none",a.default.unbind(t.domElement,"webkitTransitionEnd",e),a.default.unbind(t.domElement,"transitionend",e),a.default.unbind(t.domElement,"oTransitionEnd",e)};a.default.bind(this.domElement,"webkitTransitionEnd",e),a.default.bind(this.domElement,"transitionend",e),a.default.bind(this.domElement,"oTransitionEnd",e),this.backgroundElement.style.opacity=0,this.domElement.style.opacity=0,this.domElement.style.webkitTransform="scale(1.1)"},e.prototype.layout=function(){this.domElement.style.left=window.innerWidth/2-a.default.getWidth(this.domElement)/2+"px",this.domElement.style.top=window.innerHeight/2-a.default.getHeight(this.domElement)/2+"px"},e}();t.default=u,e.exports=t.default},function(e,t,n){t=e.exports=n(24)(),t.push([e.id,".dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{transition:opacity .1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1!important}.dg.main .close-button.drag,.dg.main:hover .close-button{opacity:1}.dg.main .close-button{transition:opacity .1s linear;border:0;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main .close-button.close-top{position:relative}.dg.main .close-button.close-bottom{position:absolute}.dg.main .close-button:hover{background-color:#111}.dg.a{float:right;margin-right:15px;overflow-y:visible}.dg.a.has-save>ul.close-top{margin-top:0}.dg.a.has-save>ul.close-bottom{margin-top:27px}.dg.a.has-save>ul.closed{margin-top:0}.dg.a .save-row{top:0;z-index:1002}.dg.a .save-row.close-top{position:relative}.dg.a .save-row.close-bottom{position:fixed}.dg li{transition:height .1s ease-out;transition:overflow .1s linear}.dg li:not(.folder){cursor:auto;height:27px;line-height:27px;padding:0 4px 0 5px}.dg li.folder{padding:0;border-left:4px solid transparent}.dg li.title{margin-left:-4px}.dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>*{height:0;overflow:hidden;border:0}.dg .cr{clear:both;padding-left:3px;height:27px;overflow:hidden}.dg .property-name{cursor:default;float:left;clear:left;width:40%;overflow:hidden;text-overflow:ellipsis}.dg .c{float:left;width:60%;position:relative}.dg .c input[type=text]{border:0;margin-top:4px;padding:3px;width:100%;float:right}.dg .has-slider input[type=text]{width:30%;margin-left:0}.dg .slider{float:left;width:66%;margin-left:-5px;margin-right:0;height:19px;margin-top:4px}.dg .slider-fg{height:100%}.dg .c input[type=checkbox]{margin-top:7px}.dg .c select{margin-top:5px}.dg .cr.boolean,.dg .cr.boolean *,.dg .cr.function,.dg .cr.function *,.dg .cr.function .property-name{cursor:pointer}.dg .cr.color{overflow:visible}.dg .selector{display:none;position:absolute;margin-left:-9px;margin-top:23px;z-index:10}.dg .c:hover .selector,.dg .selector.drag{display:block}.dg li.save-row{padding:0}.dg li.save-row .button{display:inline-block;padding:0 6px}.dg.dialogue{background-color:#222;width:460px;padding:15px;font-size:13px;line-height:15px}#dg-new-constructor{padding:10px;color:#222;font-family:Monaco,monospace;font-size:10px;border:0;resize:none;box-shadow:inset 1px 1px 1px #888;word-wrap:break-word;margin:12px 0;display:block;width:440px;overflow-y:scroll;height:100px;position:relative}#dg-local-explain{display:none;font-size:11px;line-height:17px;border-radius:3px;background-color:#333;padding:8px;margin-top:10px}#dg-local-explain code{font-size:10px}#dat-gui-save-locally{display:none}.dg{color:#eee;font:11px Lucida Grande,sans-serif;text-shadow:0 -1px 0 #111}.dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.dg.main::-webkit-scrollbar-corner{height:0;display:none}.dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.dg li:not(.folder){background:#1a1a1a;border-bottom:1px solid #2c2c2c}.dg li.save-row{line-height:25px;background:#dad5cb;border:0}.dg li.save-row select{margin-left:5px;width:108px}.dg li.save-row .button{margin-left:5px;margin-top:1px;border-radius:2px;font-size:9px;line-height:7px;padding:4px 4px 5px;background:#c5bdad;color:#fff;text-shadow:0 1px 0 #b0a58f;box-shadow:0 -1px 0 #b0a58f;cursor:pointer}.dg li.save-row .button.gears{background:#c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;height:7px;width:8px}.dg li.save-row .button:hover{background-color:#bab19e;box-shadow:0 -1px 0 #b0a58f}.dg li.folder{border-bottom:0}.dg li.title{padding-left:16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;cursor:pointer;border-bottom:1px solid hsla(0,0%,100%,.2)}.dg .closed li.title{background-image:url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)}.dg .cr.boolean{border-left:3px solid #806787}.dg .cr.color{border-left:3px solid}.dg .cr.function{border-left:3px solid #e61d5f}.dg .cr.number{border-left:3px solid #2fa1d6}.dg .cr.number input[type=text]{color:#2fa1d6}.dg .cr.string{border-left:3px solid #1ed36f}.dg .cr.string input[type=text]{color:#1ed36f}.dg .cr.boolean:hover,.dg .cr.function:hover{background:#111}.dg .c input[type=text]{background:#303030;outline:none}.dg .c input[type=text]:hover{background:#3c3c3c}.dg .c input[type=text]:focus{background:#494949;color:#fff}.dg .c .slider{background:#303030;cursor:ew-resize}.dg .c .slider-fg{background:#2fa1d6;max-width:100%}.dg .c .slider:hover{background:#3c3c3c}.dg .c .slider:hover .slider-fg{background:#44abda}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}}])});


--------------------------------------------------------------------------------