1(function () { 2 //------------------------------ 3 // Mesh Properties 4 //------------------------------ 5 var MESH = { 6 width: 1.2, 7 height: 1.2, 8 depth: 10, 9 segments: 16, 10 slices: 8, 11 xRange: 0.8, 12 yRange: 0.1, 13 zRange: 1.0, 14 ambient: '#555555', 15 diffuse: '#FFFFFF', 16 speed: 0.0002 17 }; 18 19 //------------------------------ 20 // Light Properties 21 //------------------------------ 22 var LIGHT = { 23 count: 2, 24 xyScalar: 1, 25 zOffset: 53, 26 ambient: '#621ab3', 27 diffuse: '#14ed2e', 28 speed: 0.001, 29 gravity: 1200, 30 dampening: 0.95, 31 minLimit: 10, 32 maxLimit: null, 33 minDistance: 20, 34 maxDistance: 400, 35 autopilot: true, 36 draw: true, 37 bounds: FSS.Vector3.create(), 38 step: FSS.Vector3.create( 39 Math.randomInRange(0.2, 1.0), 40 Math.randomInRange(0.2, 1.0), 41 Math.randomInRange(0.2, 1.0) 42 ) 43 }; 44 45 //------------------------------ 46 // Render Properties 47 //------------------------------ 48 var WEBGL = 'webgl'; 49 var CANVAS = 'canvas'; 50 var SVG = 'svg'; 51 var RENDER = { 52 renderer: CANVAS 53 }; 54 55 //------------------------------ 56 // Global Properties 57 //------------------------------ 58 var now, start = Date.now(); 59 var center = FSS.Vector3.create(); 60 var attractor = FSS.Vector3.create(); 61 var container = document.getElementById('triangles'); 62 var output = document.getElementById('output'); 63 var renderer, scene, mesh, geometry, material; 64 var webglRenderer, canvasRenderer, svgRenderer; 65 var gui, autopilotController; 66 67 //------------------------------ 68 // Methods 69 //------------------------------ 70 function initialise() { 71 createRenderer(); 72 createScene(); 73 createMesh(); 74 createLights(); 75 addEventListeners(); 76 resize(container.offsetWidth, container.offsetHeight); 77 animate(); 78 } 79 80 function createRenderer() { 81 webglRenderer = new FSS.WebGLRenderer(); 82 canvasRenderer = new FSS.CanvasRenderer(); 83 svgRenderer = new FSS.SVGRenderer(); 84 setRenderer(RENDER.renderer); 85 } 86 87 function setRenderer(index) { 88 if (renderer) { 89 output.removeChild(renderer.element); 90 } 91 switch (index) { 92 case WEBGL: 93 renderer = webglRenderer; 94 break; 95 case CANVAS: 96 renderer = canvasRenderer; 97 break; 98 case SVG: 99 renderer = svgRenderer; 100 break; 101 } 102 renderer.setSize(container.offsetWidth, container.offsetHeight); 103 output.appendChild(renderer.element); 104 } 105 106 function createScene() { 107 scene = new FSS.Scene(); 108 } 109 110 function createMesh() { 111 scene.remove(mesh); 112 renderer.clear(); 113 geometry = new FSS.Plane(MESH.width * renderer.width, MESH.height * renderer.height, MESH.segments, MESH.slices); 114 material = new FSS.Material(MESH.ambient, MESH.diffuse); 115 mesh = new FSS.Mesh(geometry, material); 116 scene.add(mesh); 117 118 // Augment vertices for animation 119 var v, vertex; 120 for (v = geometry.vertices.length - 1; v >= 0; v--) { 121 vertex = geometry.vertices[v]; 122 vertex.anchor = FSS.Vector3.clone(vertex.position); 123 vertex.step = FSS.Vector3.create( 124 Math.randomInRange(0.2, 1.0), 125 Math.randomInRange(0.2, 1.0), 126 Math.randomInRange(0.2, 1.0) 127 ); 128 vertex.time = Math.randomInRange(0, Math.PIM2); 129 } 130 } 131 132 function createLights() { 133 var l, light; 134 for (l = scene.lights.length - 1; l >= 0; l--) { 135 light = scene.lights[l]; 136 scene.remove(light); 137 } 138 renderer.clear(); 139 for (l = 0; l < LIGHT.count; l++) { 140 light = new FSS.Light(LIGHT.ambient, LIGHT.diffuse); 141 light.ambientHex = light.ambient.format(); 142 light.diffuseHex = light.diffuse.format(); 143 scene.add(light); 144 145 // Augment light for animation 146 light.mass = Math.randomInRange(0.5, 1); 147 light.velocity = FSS.Vector3.create(); 148 light.acceleration = FSS.Vector3.create(); 149 light.force = FSS.Vector3.create(); 150 151 // Ring SVG Circle 152 153 154 // Core SVG Circle 155 156 } 157 } 158 159 function resize(width, height) { 160 renderer.setSize(width, height); 161 FSS.Vector3.set(center, renderer.halfWidth, renderer.halfHeight); 162 createMesh(); 163 } 164 165 function animate() { 166 now = Date.now() - start; 167 update(); 168 render(); 169 requestAnimationFrame(animate); 170 } 171
172 function update() { 173 var ox, oy, oz, l, light, v, vertex, offset = MESH.depth / 2; 174 175 // Update Bounds 176 FSS.Vector3.copy(LIGHT.bounds, center); 177 FSS.Vector3.multiplyScalar(LIGHT.bounds, LIGHT.xyScalar); 178 179 // Update Attractor 180 FSS.Vector3.setZ(attractor, LIGHT.zOffset); 181 182 // Overwrite the Attractor position 183 if (LIGHT.autopilot) { 184 ox = Math.sin(LIGHT.step[0] * now * LIGHT.speed); 185 oy = Math.cos(LIGHT.step[1] * now * LIGHT.speed); 186 FSS.Vector3.set(attractor, 187 LIGHT.bounds[0] * ox, 188 LIGHT.bounds[1] * oy, 189 LIGHT.zOffset); 190 } 191 192 // Animate Lights 193 for (l = scene.lights.length - 1; l >= 0; l--) { 194 light = scene.lights[l]; 195 196 // Reset the z position of the light 197 FSS.Vector3.setZ(light.position, LIGHT.zOffset); 198 199 // Calculate the force Luke! 200 var D = Math.clamp(FSS.Vector3.distanceSquared(light.position, attractor), LIGHT.minDistance, LIGHT.maxDistance); 201 var F = LIGHT.gravity * light.mass / D; 202 FSS.Vector3.subtractVectors(light.force, attractor, light.position); 203 FSS.Vector3.normalise(light.force); 204 FSS.Vector3.multiplyScalar(light.force, F); 205 206 // Update the light position 207 FSS.Vector3.set(light.acceleration); 208 FSS.Vector3.add(light.acceleration, light.force); 209 FSS.Vector3.add(light.velocity, light.acceleration); 210 FSS.Vector3.multiplyScalar(light.velocity, LIGHT.dampening); 211 FSS.Vector3.limit(light.velocity, LIGHT.minLimit, LIGHT.maxLimit); 212 FSS.Vector3.add(light.position, light.velocity); 213 } 214 215 // Animate Vertices 216 for (v = geometry.vertices.length - 1; v >= 0; v--) { 217 vertex = geometry.vertices[v]; 218 ox = Math.sin(vertex.time + vertex.step[0] * now * MESH.speed); 219 oy = Math.cos(vertex.time + vertex.step[1] * now * MESH.speed); 220 oz = Math.sin(vertex.time + vertex.step[2] * now * MESH.speed); 221 FSS.Vector3.set(vertex.position, 222 MESH.xRange * geometry.segmentWidth * ox, 223 MESH.yRange * geometry.sliceHeight * oy, 224 MESH.zRange * offset * oz - offset); 225 FSS.Vector3.add(vertex.position, vertex.anchor); 226 } 227 228 // Set the Geometry to dirty 229 //geometry.dirty = true; 230 } 231 232 function render() { 233 renderer.render(scene); 234 235 // Draw Lights 236 if (LIGHT.draw) { 237 var l, lx, ly, light; 238 for (l = scene.lights.length - 1; l >= 0; l--) { 239 light = scene.lights[l]; 240 lx = light.position[0]; 241 ly = light.position[1]; 242 switch (RENDER.renderer) { 243 case CANVAS: 244 245 break; 246 case SVG: 247 lx += renderer.halfWidth; 248 ly = renderer.halfHeight - ly; 249 light.core.setAttributeNS(null, 'fill', light.diffuseHex); 250 light.core.setAttributeNS(null, 'cx', lx); 251 light.core.setAttributeNS(null, 'cy', ly); 252 renderer.element.appendChild(light.core); 253 254 //renderer.element.appendChild(light.ring); 255 break; 256 } 257 } 258 } 259 } 260 261 function addEventListeners() { 262 window.addEventListener('resize', onWindowResize); 263 } 264 265 //------------------------------ 266 // Callbacks 267 //------------------------------ 268 function onWindowResize(event) { 269 resize(container.offsetWidth, container.offsetHeight); 270 render(); 271 } 272 273 if (container && output) { 274 initialise(); 275 } else { 276 console.warn('No #container and #output elements found for triangles'); 277 } 278 279})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.