FSS minus autopilot

_.md

[ Launch: FSS canvas + LEAP ] 7314805 by ptvans
[ Launch: FSS canvas + LEAP ] 6788527 by ptvans
[ Launch: FSS canvas + LEAP ] 6108498 by ptvans
[ Launch: FSS canvas + LEAP ] 6076998 by enjalot
[ Launch: FSS canvas + LEAP ] 5279204 by enjalot
[ Launch: FSS canvas example ] 5250737 by enjalot
[ Launch: basic FSS canvas ] 5250708 by enjalot

config.json

{"description":"FSS minus autopilot","endpoint":"","display":"div","public":true,"require":[{"name":"fss","url":"https://raw.github.com/wagerfield/flat-surface-shader/master/deploy/fss.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"leap.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/GylJgS3.gif"}

index.html

<div id="output" class="container">
</div>
<div id="vignette" class="overlay vignette">
</div>
<div id="noise" class="overlay noise">

inlet.js

//http://wagerfield.github.com/flat-surface-shader/
//https://github.com/wagerfield/flat-surface-shader

//set new x and y position for all lights - paul
var xpos = -305;
var ypos = 160;


//------------------------------
// Mesh Properties
//------------------------------
var MESH = {
  width: 1.2,
  height: 1.2,
  depth: 10,
  segments: 16,
  slices: 8,
  xRange: 0.8,
  yRange: 0.1,
  zRange: 1.0,
  ambient: '#555555',
  diffuse: '#A6C6E4',
  speed: 0.0005
};

//------------------------------
// Light Properties
//------------------------------
var LIGHT = {
  count: 1,
  xyScalar: 1,
  zOffset: 100,
  ambient: '#C49595',
  diffuse: '#D2D5D4',
  autopilot: false,
  draw: true,
  bounds: FSS.Vector3.create(),
  step: FSS.Vector3.create(
    Math.randomInRange(0.2, 1.0),
    Math.randomInRange(0.2, 1.0),
    Math.randomInRange(0.2, 1.0)
  )
};

var LIGHT2 = {
  count: 1,
  xyScalar: 1,
  zOffset: 20,
  ambient: '#F52F5F',
  diffuse: '#174D40',
  autopilot: false,
  draw: true,
  bounds: FSS.Vector3.create(),
  step: FSS.Vector3.create(
    Math.randomInRange(0.2, 1.0),
    Math.randomInRange(0.2, 1.0),
    Math.randomInRange(0.2, 1.0)
  )
};

//------------------------------
// Render Properties
//------------------------------
var SVG = 'svg';
var CANVAS = 'canvas';
var RENDER = {
  renderer: CANVAS
};



//------------------------------
// UI Properties
//------------------------------
var UI = {
  show: false
};


//------------------------------
// Global Properties
//------------------------------
var now, start = Date.now();
var center = FSS.Vector3.create();
var attractor = FSS.Vector3.create();
var renderer, scene, mesh, geometry, material;
var canvasRenderer, svgRenderer;
var gui, autopilotController;

var container = d3.select("#display").node();
var output = d3.select("#output").node();
var noise = d3.select("#noise").node();


//------------------------------
// Methods
//------------------------------

tributary.run = function(g,t) {
  now = Date.now() - start;
  update();
  render();
}

function initialise() {
  createRenderer();
  createScene();
  createMesh();
  createLights();
  //addEventListeners();
  //addControls();
  resize(tributary.sw, tributary.sh)
  
  //resize(container.offsetWidth, container.offsetHeight);
  //animate();
}

function createRenderer() {
  svgRenderer = new FSS.SVGRenderer();
  canvasRenderer = new FSS.CanvasRenderer();
  setRenderer(RENDER.renderer);
}

function setRenderer(index) {
  if (renderer) {
    output.removeChild(renderer.element);
  }
  switch(index) {
    case CANVAS:
      renderer = canvasRenderer;
      break;
    case SVG:
      renderer = svgRenderer;
      break;
  }
  renderer.setSize(container.offsetWidth, container.offsetHeight);
  output.appendChild(renderer.element);
}

function createScene() {
  scene = new FSS.Scene();
}

function createMesh() {
  scene.remove(mesh);
  renderer.clear();
  geometry = new FSS.Plane(MESH.width * renderer.width, MESH.height * renderer.height, MESH.segments, MESH.slices);
  material = new FSS.Material(MESH.ambient, MESH.diffuse);
  mesh = new FSS.Mesh(geometry, material);
  scene.add(mesh);

  // Augment vertices for animation
  var v, vertex;
  for (v = geometry.vertices.length - 1; v >= 0; v--) {
    vertex = geometry.vertices[v];
    vertex.anchor = FSS.Vector3.clone(vertex.position);
    vertex.step = FSS.Vector3.create(
      Math.randomInRange(0.2, 1.0),
      Math.randomInRange(0.2, 1.0),
      Math.randomInRange(0.2, 1.0)
    );
    vertex.time = Math.randomInRange(0, Math.PIM2);
  }
}

function createLights() {
  var l, light, light2;
  for (l = scene.lights.length - 1; l >= 0; l--) {
    light = scene.lights[l];
    light2 = scene.lights[l];
    scene.remove(light);
    scene.remove(light2);
  }
  renderer.clear();
  
  //FIRST LIGHT
  for (l = 0; l < LIGHT.count; l++) {
    light = new FSS.Light(LIGHT.ambient, LIGHT.diffuse);
    light.ambientHex = light.ambient.format();
    light.diffuseHex = light.diffuse.format();
    scene.add(light);

    // Ring SVG Circle
    light.ring = document.createElementNS(FSS.SVGNS, 'circle');
    light.ring.setAttributeNS(null, 'stroke', light.ambientHex);
    light.ring.setAttributeNS(null, 'stroke-width', '0.5');
    light.ring.setAttributeNS(null, 'fill', 'none');
    light.ring.setAttributeNS(null, 'r', '16');

    // Core SVG Circle
    light.core = document.createElementNS(FSS.SVGNS, 'circle');
    light.core.setAttributeNS(null, 'fill', light.diffuseHex);
    light.core.setAttributeNS(null, 'r', '8');
  }
  
  //SECOND LIGHT
  for (l = 0; l < LIGHT2.count; l++) {
    light2 = new FSS.Light(LIGHT2.ambient, LIGHT2.diffuse);
    light2.ambientHex = light.ambient.format();
    light2.diffuseHex = light.diffuse.format();
    scene.add(light);

    // Ring SVG Circle
    light2.ring = document.createElementNS(FSS.SVGNS, 'circle');
    light2.ring.setAttributeNS(null, 'stroke', light2.ambientHex);
    light2.ring.setAttributeNS(null, 'stroke-width', '0.5');
    light2.ring.setAttributeNS(null, 'fill', 'none');
    light2.ring.setAttributeNS(null, 'r', '16');

    // Core SVG Circle
    light2.core = document.createElementNS(FSS.SVGNS, 'circle');
    light2.core.setAttributeNS(null, 'fill', light2.diffuseHex);
    light2.core.setAttributeNS(null, 'r', '8');
  }
     console.log(light);
		console.log(light2);

}


	


function resize(width, height) {
  renderer.setSize(width, height);
  FSS.Vector3.set(center, renderer.halfWidth, renderer.halfHeight);
  createMesh();
}



function update() {
  var ox, oy, oz, l, light, light2, v, vertex, offset = MESH.depth/2;

  // Update Bounds
  //FSS.Vector3.copy(LIGHT.bounds, center);
  //FSS.Vector3.multiplyScalar(LIGHT.bounds, LIGHT.xyScalar);

  // Update Attractor
  //FSS.Vector3.setZ(attractor, LIGHT.zOffset);

  // Overwrite the Attractor position
  //if (LIGHT.autopilot) {
    //ox = Math.sin(LIGHT.step[0] * now * LIGHT.speed);
    //oy = Math.cos(LIGHT.step[1] * now * LIGHT.speed);
  //  FSS.Vector3.set(attractor,
  //    LIGHT.bounds[0]*ox,
  //    LIGHT.bounds[1]*oy,
  //    LIGHT.zOffset);
  //}
	
//FSS.Vector3.set(attractor,
  //    LIGHT.bounds[0],
  //    LIGHT.bounds[1],
  //    LIGHT.zOffset);
  //console.log(LIGHT.bounds);
  //console.log(ox);
  
  
  //set position - PAUL
  
  
  // Animate Lights
  for (l = scene.lights.length - 1; l >= 0; l--) {
    light = scene.lights[0];
    light2 = scene.lights[1];
	console.log(light);
    console.log(light2);
    
    
    // Reset the z position of the light
    FSS.Vector3.setZ(light.position, LIGHT.zOffset);
    
    FSS.Vector3.setX(light.position, xpos);
    FSS.Vector3.setY(light.position, ypos);
    
    //FSS.Vector3.setX(light2.position, xpos);
    //FSS.Vector3.setY(light2.position, ypos);
    
    // Update the light position
    //FSS.Vector3.add(light.position, light.velocity);
  }

  // Animate Vertices
  for (v = geometry.vertices.length - 1; v >= 0; v--) {
    vertex = geometry.vertices[v];
    ox = Math.sin(vertex.time + vertex.step[0] * now * MESH.speed);
    oy = Math.cos(vertex.time + vertex.step[1] * now * MESH.speed);
    oz = Math.sin(vertex.time + vertex.step[2] * now * MESH.speed);
    FSS.Vector3.set(vertex.position,
      MESH.xRange*geometry.segmentWidth*ox,
      MESH.yRange*geometry.sliceHeight*oy,
      MESH.zRange*offset*oz - offset);
    FSS.Vector3.add(vertex.position, vertex.anchor);
  }

  // Set the Geometry to dirty
  geometry.dirty = true;
}


function render() {
  renderer.render(scene);

  // Draw Lights
  if (LIGHT.draw) {
    var l, lx, ly, light;
    for (l = scene.lights.length - 1; l >= 0; l--) {
      light = scene.lights[l];
      lx = light.position[0];
      ly = light.position[1];
      switch(RENDER.renderer) {
        case CANVAS:
          renderer.context.lineWidth = 0.5;
          renderer.context.beginPath();
          renderer.context.arc(lx, ly, 12, 0, Math.PIM2);
          renderer.context.strokeStyle = light.ambientHex;
          renderer.context.stroke();
          renderer.context.beginPath();
          renderer.context.arc(lx, ly, 4, 0, Math.PIM2);
          renderer.context.fillStyle = light.diffuseHex;
          renderer.context.fill();
          break;
        case SVG:
          lx += renderer.halfWidth;
          ly = renderer.halfHeight - ly;
          light.core.setAttributeNS(null, 'cx', lx);
          light.core.setAttributeNS(null, 'cy', ly);
          renderer.element.appendChild(light.core);
          light.ring.setAttributeNS(null, 'cx', lx);
          light.ring.setAttributeNS(null, 'cy', ly);
          renderer.element.appendChild(light.ring);
          break;
      }
    }
  }
}

//------------------------------
// Callbacks
//------------------------------
d3.select("#display").on("click", onMouseClick);
function onMouseClick() {
  //FSS.Vector3.set(attractor, d3.event.x, renderer.height - d3.event.y);
  //FSS.Vector3.set(attractor, 100, 500);
  //FSS.Vector3.subtract(attractor, center);
  //LIGHT.autopilot = !LIGHT.autopilot;
  //autopilotController.updateDisplay();
}
/*
d3.select("#display").on("mousemove", onMouseMove);
function onMouseMove() {
  FSS.Vector3.set(attractor, d3.event.x, renderer.height - d3.event.y);
  FSS.Vector3.subtract(attractor, center);
}*/

var xscale = d3.scale.linear()
.domain([-200, 200])
.range([0, tributary.sw])
var yscale = d3.scale.linear()
.domain([-100, 150])
.range([tributary.sh, 0]);
var zscale = d3.scale.linear()
.domain([100, 400])
.range([20, 400]);





// Let there be light!
initialise();