pastebin

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