1. let scene, camera, renderer, controls,
2.     geometry, material, anim,
3.     dirLight, ambLight, pointCount;
4.  
5. let dt, dx, dy, dz, x, y, z, a, b, c,
6.     lorenz, lorenzMat, lorenzGeo,
7.     positions, index;
8.  
9. let MAX_POINTS = 50000,
10.     drawCount = 1;
11. // --------------------------------------------------------------------- INITIALIZE BEGIN ----- //
12. scene = new THREE.Scene();
13. camera = new THREE.PerspectiveCamera(
14.     35,
15.     window.innerWidth / window.innerHeight,
16.     0.1,
17.     10000
18. );
19. camera.position.z = 100;
20.  
21. renderer = new THREE.WebGLRenderer( {
22.     antialias: true
23. } );
24. renderer.setPixelRatio( window.devicePixelRatio );
25. renderer.setClearColor( 0x131112 );
26. renderer.setSize(
27.     window.innerWidth,
28.     window.innerHeight
29. );
30.  
31. document.body.appendChild( renderer.domElement );
32. controls = new THREE.OrbitControls( camera, renderer.domElement );
33. // --------------------------------------------------------------------- INITIALIZE END ----- //
34.  
35. // --------------------------------------------------------------------- LIGHTING BEGIN ----- //
36. ambLight = new THREE.AmbientLight(
37.     0xffffff,
38.     0
39. );
40. scene.add( ambLight );
41. // ---------------------------------------------------------------------- LIGHTING END ----- //
42.  
43. // ------------------------------------------------------------ LORENZ ATTRACTOR BEGIN ----- //
44.  
45. function randColor( a = 1.0 ) {
46.     let red = Math.round( Math.random() * 100 ),
47.         green = Math.round( Math.random() * 100 ),
48.         blue = Math.round( Math.random() * 100 ),
49.         alpha = a;
50.    
51.     const r = "red: " + red + "\n";
52.     const g = "green: " + green + "\n";
53.     const b = "blue: " + blue + "\n";
54.    
55.     let color = {
56.         red: red,
57.         green: green,
58.         blue: blue
59.     }
60.    
61.     const clr = new RColor();
62.     RColor.red = red;
63.     RColor.green = green;
64.     RColor.blue = blue;
65.     RColor.alpha = alpha;
66. }
67. /*
68. function rn( min = 0, max = 255 ) {
69.     let mn = Math.floor( Math.random() * Math.floor( min ));
70.     let mx = Math.ceil( Math.random() * Math.ceil( max ));
71.    
72.     function( mn, mx ) {
73.         return Math.round( Math.random() *  );
74.     }
75. }
76. console.log( rn() );
77. */
78. function color( min = 0, max = 255 ) {
79.     let mn, mx, hx, arr, num, r, g, b;
80.    
81.     // Unused
82.     mn = Math.floor( Math.random() * min);
83.     mx = Math.ceil( Math.random() * max);
84.    
85.     // Random integer between min & max parameters
86.     hx = () => {
87.         let val = Math.floor( Math.random() * ( max - min )) + min;
88.         return val;
89.     };
90.     arr = [];
91.     num = 3;
92.    
93.     for ( let j = 0; j < num; ++j ) {
94.         // arr.push( hx );
95.         arr[j] = hx();
96.     }
97.     r = arr[0];
98.     g = arr[1];
99.     b = arr[2];
100.    
101.     let i, s, h,
102.         rmg, rmb, gmb;
103.  
104.     rmg = ( r - g );
105.     rmb = ( r - b );
106.     gmb = ( g - b );
107.    
108.     // RGB in relation to HSI
109.     i = ( r + g + b ) / 3;
110.     s = 1 - ( 3 / ( r + g + b )) * Math.min( r, g, b );
111.     h = Math.acos( Math.abs( rmg + rmb ) / Math.sqrt( Math.pow( rmg, 2 ) + Math.abs( rmb * gmb )));
112.    
113.     if ( b > g ) {
114.         h = 360 - h;
115.     }
116.    
117.     console.log( "hsi: " + h + ", " + s + ", " + i );
118.     console.log( "r: " + r + "\ng: " + g + "\nb: " + b );
119. }
120. color();
121.  
122. lorenzGeo = new THREE.BufferGeometry();
123. positions = new Float32Array( MAX_POINTS * 3);
124. lorenzGeo.setAttribute( "position", new THREE.BufferAttribute( positions, 3));
125.  
126. lorenzGeo.setDrawRange( 0, drawCount );
127.  
128. lorenzMat = new THREE.LineBasicMaterial({
129.     color: 0xff0000,
130.     linewidth: 0.1
131. });
132.  
133. attractor = new THREE.Line( lorenzGeo, lorenzMat );
134. scene.add( attractor );
135.  
136. //lorenzOrbital();
137.  
138. lorenzUpdate();
139.  
140. function lorenzUpdate() {
141.     positions = attractor.geometry.attributes.position.array;
142.     index = 0;
143.     x = y = z = 0.01;
144.    
145.     a = 10;
146.     b = 28;
147.     c = 8.0 / 3.0;
148.    
149.     dt = 0.01;
150.    
151.     for ( let i = 0, l = MAX_POINTS; i < l; ++i ) {
152.         positions[ index ++ ] = x;
153.         positions[ index ++ ] = y;
154.         positions[ index ++ ] = z;
155.        
156.         dx = ( a * ( y - x )) * dt;
157.         dy = ( x * ( b - z ) - y ) * dt;
158.         dz = ( x * y - c * z ) * dt;
159.        
160.         x += dx;
161.         y += dy;
162.         z += dz;
163.     }
164.    
165. }
166.  
167. // -------------------------------------------------------------- LORENZ ATTRACTOR END ----- //
168.  
169. /*
170. function lorenzOrbital() {
171.     positions = attractor.geometry.attributes.position.array;
172.     index = 0;
173.     x = y = z = 0.01;
174.  
175.     a = 0.96;
176.     b = 0.13;
177.     c = -0.67;
178.     d = 0;
179.     dt = 0.04;
180.     let h = 1.678;
181.    
182.     for ( let i = 0, l = MAX_POINTS; i < l; ++i ) {
183.         positions[ index ++ ] = x;
184.         positions[ index ++ ] = y;
185.         positions[ index ++ ] = z;
186.        
187.         dx = Math.sin( Math.cos( y ));
188.         dy = Math.sin( Math.sin( Math.cos( a )) / x );
189.         dz = Math.sin( y - z );
190.        
191.         x += dx * dt;
192.         y += dy * dt;
193.         z += dz * dt;
194.        
195.     }
196.    
197.     x += x + dx;
198.     y += y + dy;
199.     z += z + dz;
200. }
201. */
202. // ------------------------------------------------------------ RENDER FUNCTIONS BEGIN ----- //
203. function animate() {
204.     anim = requestAnimationFrame( animate );
205.    
206.     drawCount = ( drawCount + 1 ) % MAX_POINTS;
207.     attractor.geometry.setDrawRange( 0, drawCount );
208.    
209.     if ( drawCount == ( MAX_POINTS - 2 )) {
210.         cancelAnimationFrame( anim );
211.         //lorenz.geometry.attributes.position.needsUpdate = false;
212.     } else {
213.         render();
214.     }
215.  
216.     counter.innerHTML = `<span id="s1">` + ( drawCount + 1 ) % MAX_POINTS + `</span>`
217.  
218.     controls.update();
219. }
220.  
221. function render() {
222.     if ( displayChanged( renderer )) {
223.         const canvas = renderer.domElement;
224.         camera.aspect = canvas.clientWidth / canvas.clientHeight;
225.         camera.updateProjectionMatrix();
226.     }
227.     renderer.render( scene, camera );
228. }
229.  
230. function displayChanged( renderer ) {
231.     const canvas = renderer.domElement;
232.     const width = canvas.clientWidth;
233.     const height = canvas.clientHeight;
234.     const needResize = canvas.width !== width || canvas.height !== height;
235.     if ( needResize ) {
236.         renderer.setSize( width, height, false );
237.     }
238.     return needResize;
239. }
240. // ----------------------------------------------------------- RENDER FUNCTIONS END ----- //
241.  
242. // ------------------------------------------------------------ MISCELLANEOUS BEGIN ----- //
243. controls.addEventListener( "change", render );
244. window.addEventListener( "resize", render );
245.  
246. let counter;
247. counter = document.querySelector( "#counter" );
248.  
249. // render();
250. animate();
251.