AMI - Lesson 03

Visualize 2D. author(s): Nicolas Rannou (github)

by nicolasrannou

HTML

<div id="my-gui-container"></div>
<div id="container" tabindex='1'></div>

<!-- We load the scripts here because JSFIddle external resources are loaded
in random order, which is problematic because AMI relies on THREEJS to be
loaded -->
<!-- Tools -->
<script src="//use.edgefonts.net/source-code-pro.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/fnndsc/vjs/master/external/scripts/babel/polyfill.min.js"></script>
<!-- THREEJS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>
<!-- AMI -->
<script type="text/javascript" src="https://cdn.rawgit.com/fnndsc/ami/master/dist/ami.js"></script>
<!-- ANALYTICS -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-39303022-3', 'auto');
  var page = '/ami/lessons/03';
  ga('send', 'pageview', page);

</script>

CSS

body{
  font-family: source-code-pro, sans-serif;
  color:#F9F9F9;
  background-color: #212121
}

#container {
  background-color: #000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow:hidden;
}

#my-gui-container {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index:1;
}

JavaScript

/* globals Stats, dat, AMI*/

// VJS classes we will be using in this lesson
var LoadersVolume         = AMI.default.Loaders.Volume;
var CamerasOrthographic   = AMI.default.Cameras.Orthographic;
var ControlsOrthographic  = AMI.default.Controls.TrackballOrtho;
var HelpersStack          = AMI.default.Helpers.Stack;

var drag =  {
  x: null,
  y: null
}

var stack, stackHelper, shiftDown = false;

// Setup renderer
var container = document.getElementById('container');
var renderer = new THREE.WebGLRenderer({
    antialias: true
  });
renderer.setSize(container.offsetWidth, container.offsetHeight);
renderer.setClearColor(0x353535, 1);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);

// Setup scene
var scene = new THREE.Scene();

// Setup camera
var camera = new CamerasOrthographic(container.clientWidth / -2, container.clientWidth / 2, container.clientHeight / 2, container.clientHeight / -2, 0.1, 10000);

// Setup controls
var controls = new ControlsOrthographic(camera, container);
controls.staticMoving = true;
controls.noRotate = true;

// handle resize
function onWindowResize() {

  camera.canvas = {
    width: container.offsetWidth,
    height: container.offsetHeight
  };
  camera.fitBox(2);

  renderer.setSize(container.offsetWidth, container.offsetHeight);

}
window.addEventListener('resize', onWindowResize, false);

function onKeyPressed(event){

  shiftDown = event.shiftKey;
  
  if(!shiftDown){
    drag.x = null;
    drag.y = null;
  }

}
container.addEventListener('keydown', onKeyPressed);
container.addEventListener('keyup', onKeyPressed);

function onMouseMove(event){

   container.focus();

  if(!shiftDown || !stack || !stackHelper){
    return;
  }
  
  if(drag.x === null){
    drag.x = event.offsetX;
    drag.y = event.offsetY;
  }
  
  var threshold = 15;
  var dynamicRange = stack.minMax[1] - stack.minMax[0];
  dynamicRange /= container.clientWidth;
  
    if(Math.abs(event.offsetX - drag.x) > threshold){
   ...