1/* ============================================== 2 FSS init 3 =============================================== */ 4var fssinitSolid = function() { 5 6 7 //------------------------------ 8 // Mesh Properties 9 //------------------------------ 10 var MESH = { 11 width: 1.2, 12 height: 1, 13 depth: 2, 14 segments: 10, 15 slices: 1, 16 xRange: 0.5, 17 yRange: 0, 18 zRange: 1.0, 19 ambient: '#000000', 20 diffuse: '#FFFFFF', 21 speed: 0.002 22 }; 23 //------------------------------ 24 // Light Properties 25 //------------------------------ 26 var LIGHT = { 27 count: 4, 28 xyScalar: 1, 29 zOffset: 30, 30 ambient: '#363A45', 31 // change below color 32 diffuse: '#34D2A8', 33 speed: 0.0015, 34 gravity: 1200, 35 dampening: 0.95, 36 minLimit: 10, 37 maxLimit: null, 38 minDistance: 20, 39 maxDistance: 400, 40 autopilot: false, 41 draw: false, 42 bounds: FSS.Vector3.create(), 43 step: FSS.Vector3.create( 44 Math.randomInRange(0.2, 1.0), 45 Math.randomInRange(0.2, 1.0), 46 Math.randomInRange(0.2, 1.0) 47 ) 48 }; 49 //------------------------------ 50 // Render Properties 51 //------------------------------ 52 var WEBGL = 'webgl'; 53 var CANVAS = 'canvas'; 54 var SVG = 'svg'; 55 var RENDER = { 56 renderer: CANVAS 57 }; 58 //------------------------------ 59 // UI Properties 60 //------------------------------ 61 var UI = { 62 show: true 63 }; 64 65 //------------------------------ 66 // Global Properties 67 //------------------------------ 68 var now, start = Date.now(); 69 var center = FSS.Vector3.create(); 70 var attractor = FSS.Vector3.create(); 71 var container = document.getElementById('fss-solid'); 72 // var controls = document.getElementById('controls'); 73 var output = document.getElementById('fss-solid'); 74 var renderer, scene, mesh, geometry, material; 75 var webglRenderer, canvasRenderer, svgRenderer; 76 var gui, autopilotController; 77 78 79 80 81 //------------------------------ 82 // Methods 83 //------------------------------ 84 function initialise() { 85 createRenderer(); 86 createScene(); 87 createMesh(); 88 createLights(); 89 addEventListeners(); 90 // addControls(); 91 resize(container.offsetWidth, container.offsetHeight); 92 animate(); 93 } 94 95 function createRenderer() { 96 webglRenderer = new FSS.WebGLRenderer(); 97 canvasRenderer = new FSS.CanvasRenderer(); 98 svgRenderer = new FSS.SVGRenderer(); 99 setRenderer(RENDER.renderer); 100 } 101 102 function setRenderer(index) { 103 if (renderer) { 104 output.removeChild(renderer.element); 105 } 106 switch (index) { 107 case WEBGL: 108 renderer = webglRenderer; 109 break; 110 case CANVAS: 111 renderer = canvasRenderer; 112 break; 113 case SVG: 114 renderer = svgRenderer; 115 break; 116 } 117 renderer.setSize(container.offsetWidth, container.offsetHeight); 118 output.appendChild(renderer.element); 119 } 120 121 function createScene() { 122 scene = new FSS.Scene(); 123 } 124 125 function createMesh() { 126 scene.remove(mesh); 127 renderer.clear(); 128 geometry = new FSS.Plane(MESH.width * renderer.width, MESH.height * renderer.height, MESH.segments, MESH.slices); 129 material = new FSS.Material(MESH.ambient, MESH.diffuse); 130 mesh = new FSS.Mesh(geometry, material); 131 scene.add(mesh); 132 133 // Augment vertices for animation 134 var v, vertex; 135 for (v = geometry.vertices.length - 1; v >= 0; v--) { 136 vertex = geometry.vertices[v]; 137 vertex.anchor = FSS.Vector3.clone(vertex.position); 138 vertex.step = FSS.Vector3.create( 139 Math.randomInRange(0.2, 1.0), 140 Math.randomInRange(0.2, 1.0), 141 Math.randomInRange(0.2, 1.0) 142 ); 143 vertex.time = Math.randomInRange(0, Math.PIM2); 144 } 145 } 146 147 function createLights() { 148 var l, light; 149 for (l = scene.lights.length - 1; l >= 0; l--) { 150 light = scene.lights[l]; 151 scene.remove(light); 152 } 153 renderer.clear(); 154 for (l = 0; l < LIGHT.count; l++) { 155 light = new FSS.Light(LIGHT.ambient, LIGHT.diffuse); 156 light.ambientHex = light.ambient.format(); 157 light.diffuseHex = light.diffuse.format(); 158 scene.add(light); 159 160 // Augment light for animation 161 light.mass = Math.randomInRange(0.5, 1); 162 light.velocity = FSS.Vector3.create(); 163 light.acceleration = FSS.Vector3.create(); 164 light.force = FSS.Vector3.create(); 165 } 166 } 167 168 function resize(width, height) { 169 renderer.setSize(width, height); 170 FSS.Vector3.set(center, renderer.halfWidth, renderer.halfHeight); 171 createMesh(); 172 } 173 174 function animate() { 175 now = Date.now() - start; 176 update(); 177 render(); 178 requestAnimationFrame(animate); 179 } 180
181 function update() { 182 var ox, oy, oz, l, light, v, vertex, offset = MESH.depth / 2; 183 184 // Update Bounds 185 FSS.Vector3.copy(LIGHT.bounds, center); 186 FSS.Vector3.multiplyScalar(LIGHT.bounds, LIGHT.xyScalar); 187 188 // Update Attractor 189 FSS.Vector3.setZ(attractor, LIGHT.zOffset); 190 191 // Overwrite the Attractor position 192 if (LIGHT.autopilot) { 193 ox = Math.sin(LIGHT.step[0] * now * LIGHT.speed); 194 oy = Math.cos(LIGHT.step[1] * now * LIGHT.speed); 195 FSS.Vector3.set(attractor, 196 LIGHT.bounds[0] * ox, 197 LIGHT.bounds[1] * oy, 198 LIGHT.zOffset); 199 } 200 201 // Animate Lights 202 for (l = scene.lights.length - 1; l >= 0; l--) { 203 light = scene.lights[l]; 204 205 // Reset the z position of the light 206 FSS.Vector3.setZ(light.position, LIGHT.zOffset); 207 208 // Calculate the force Luke! 209 var D = Math.clamp(FSS.Vector3.distanceSquared(light.position, attractor), LIGHT.minDistance, LIGHT.maxDistance); 210 var F = LIGHT.gravity * light.mass / D; 211 FSS.Vector3.subtractVectors(light.force, attractor, light.position); 212 FSS.Vector3.normalise(light.force); 213 FSS.Vector3.multiplyScalar(light.force, F); 214 215 // Update the light position 216 FSS.Vector3.set(light.acceleration); 217 FSS.Vector3.add(light.acceleration, light.force); 218 FSS.Vector3.add(light.velocity, light.acceleration); 219 FSS.Vector3.multiplyScalar(light.velocity, LIGHT.dampening); 220 FSS.Vector3.limit(light.velocity, LIGHT.minLimit, LIGHT.maxLimit); 221 FSS.Vector3.add(light.position, light.velocity); 222 } 223 224 // Animate Vertices 225 for (v = geometry.vertices.length - 1; v >= 0; v--) { 226 vertex = geometry.vertices[v]; 227 ox = Math.sin(vertex.time + vertex.step[0] * now * MESH.speed); 228 oy = Math.cos(vertex.time + vertex.step[1] * now * MESH.speed); 229 oz = Math.sin(vertex.time + vertex.step[2] * now * MESH.speed); 230 FSS.Vector3.set(vertex.position, 231 MESH.xRange * geometry.segmentWidth * ox, 232 MESH.yRange * geometry.sliceHeight * oy, 233 MESH.zRange * offset * oz - offset); 234 FSS.Vector3.add(vertex.position, vertex.anchor); 235 } 236 237 // Set the Geometry to dirty 238 geometry.dirty = true; 239 } 240 241 function render() { 242 renderer.render(scene); 243 244 // Draw Lights 245 if (LIGHT.draw) { 246 var l, lx, ly, light; 247 for (l = scene.lights.length - 1; l >= 0; l--) { 248 light = scene.lights[l]; 249 lx = light.position[0]; 250 ly = light.position[1]; 251 switch (RENDER.renderer) { 252 case CANVAS: 253 renderer.context.lineWidth = 0.5; 254 renderer.context.beginPath(); 255 renderer.context.arc(lx, ly, 10, 0, Math.PIM2); 256 renderer.context.strokeStyle = light.ambientHex; 257 renderer.context.stroke(); 258 renderer.context.beginPath(); 259 renderer.context.arc(lx, ly, 4, 0, Math.PIM2); 260 renderer.context.fillStyle = light.diffuseHex; 261 renderer.context.fill(); 262 break; 263 case SVG: 264 lx += renderer.halfWidth; 265 ly = renderer.halfHeight - ly; 266 light.core.setAttributeNS(null, 'fill', light.diffuseHex); 267 light.core.setAttributeNS(null, 'cx', lx); 268 light.core.setAttributeNS(null, 'cy', ly); 269 renderer.element.appendChild(light.core); 270 light.ring.setAttributeNS(null, 'stroke', light.ambientHex); 271 light.ring.setAttributeNS(null, 'cx', lx); 272 light.ring.setAttributeNS(null, 'cy', ly); 273 renderer.element.appendChild(light.ring); 274 break; 275 } 276 } 277 } 278 } 279 280 function addEventListeners() { 281 window.addEventListener('resize', onWindowResize); 282 container.addEventListener('click', onMouseClick); 283 container.addEventListener('mousemove', onMouseMove); 284 } 285 286
287 function addControls() { 288 var i, l, light, folder, controller; 289 290 // Create GUI 291 gui = new dat.GUI({ 292 autoPlace: false 293 }); 294 controls.appendChild(gui.domElement); 295 296 // Create folders 297 //renderFolder = gui.addFolder('Render'); 298 meshFolder = gui.addFolder('Mesh'); 299 lightFolder = gui.addFolder('Light'); 300 301 // Open folders 302 //renderFolder.open(); 303 // meshFolder.open(); 304 lightFolder.open(); 305 306 // Add Mesh Controls 307 controller = meshFolder.addColor(MESH, 'ambient'); 308 controller.onChange(function(value) { 309 for (i = 0, l = scene.meshes.length; i < l; i++) { 310 scene.meshes[i].material.ambient.set(value); 311 } 312 }); 313 controller = meshFolder.addColor(MESH, 'diffuse'); 314 controller.onChange(function(value) { 315 for (i = 0, l = scene.meshes.length; i < l; i++) { 316 scene.meshes[i].material.diffuse.set(value); 317 } 318 }); 319 controller = meshFolder.add(MESH, 'width', 0.05, 2); 320 controller.onChange(function(value) { 321 if (geometry.width !== value * renderer.width) { 322 createMesh(); 323 } 324 }); 325 controller = meshFolder.add(MESH, 'height', 0.05, 2); 326 controller.onChange(function(value) { 327 if (geometry.height !== value * renderer.height) { 328 createMesh(); 329 } 330 }); 331 controller = meshFolder.add(MESH, 'depth', 0, 50); 332 controller = meshFolder.add(MESH, 'segments', 1, 20); 333 controller.step(1); 334 controller.onChange(function(value) { 335 if (geometry.segments !== value) { 336 createMesh(); 337 } 338 }); 339 controller = meshFolder.add(MESH, 'slices', 1, 20); 340 controller.step(1); 341 controller.onChange(function(value) { 342 if (geometry.slices !== value) { 343 createMesh(); 344 } 345 }); 346 controller = meshFolder.add(MESH, 'xRange', 0, 1); 347 controller = meshFolder.add(MESH, 'yRange', 0, 1); 348 controller = meshFolder.add(MESH, 'speed', 0, 0.01); 349 350 // Add Light Controls 351 autopilotController = lightFolder.add(LIGHT, 'autopilot'); 352 controller = lightFolder.addColor(LIGHT, 'ambient'); 353 controller.onChange(function(value) { 354 for (i = 0, l = scene.lights.length; i < l; i++) { 355 light = scene.lights[i]; 356 light.ambient.set(value); 357 light.ambientHex = light.ambient.format(); 358 } 359 }); 360 controller = lightFolder.addColor(LIGHT, 'diffuse'); 361 controller.onChange(function(value) { 362 for (i = 0, l = scene.lights.length; i < l; i++) { 363 light = scene.lights[i]; 364 light.diffuse.set(value); 365 light.diffuseHex = light.diffuse.format(); 366 } 367 }); 368 controller = lightFolder.add(LIGHT, 'count', 0, 5); 369 controller.step(1); 370 controller.onChange(function(value) { 371 if (scene.lights.length !== value) { 372 createLights(); 373 } 374 }); 375 controller = lightFolder.add(LIGHT, 'zOffset', 0, 500); 376 controller.step(1); 377 378 } 379 380 381 //------------------------------ 382 // Callbacks 383 //------------------------------ 384 function onMouseClick(event) { 385 FSS.Vector3.set(attractor, event.x, renderer.height - event.y); 386 FSS.Vector3.subtract(attractor, center); 387 LIGHT.autopilot = !LIGHT.autopilot; 388 //autopilotController.updateDisplay(); 389 } 390 391 function onMouseMove(event) { 392 FSS.Vector3.set(attractor, event.x, renderer.height - event.y); 393 FSS.Vector3.subtract(attractor, center); 394 } 395 396 function onWindowResize(event) { 397 resize(container.offsetWidth, container.offsetHeight); 398 render(); 399 } 400 401 // Let there be light! 402 initialise(); 403 404}; 405 406if ($("#fss-solid").length) { 407 fssinitSolid(); 408};
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.