BP Plot

by jmcjc5u

HTML

<div id="info">BP Plot
</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, cameraHUD, sceneHUD, renderer;
var startDate = 1;
var bpdata;
var keyboard = new KeyboardState();
var offset;

init();
animate();

function createBPData() {
  bpdata = [];
  bpdata.push([1, 130, 80])
  bpdata.push([2, 140, 70])
  bpdata.push([3, 120, 90])
  bpdata.push([4, 110, 70])
  bpdata.push([5, 130, 93])
  bpdata.push([6, 140, 88])
  bpdata.push([7, 110, 80])
  bpdata.push([8, 120, 78])
  bpdata.push([9, 130, 98])
  bpdata.push([10, 122, 88])
}

function buildBPPlot(startDate) {
  var caret = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({
    color: 0xff00ff
  }));

  // start from 0,
  // for each date: add a vertical line at x = 0
  // plot 
  function plot(i) {
    //add DateLine (i)
    let geometry = new THREE.BufferGeometry();
    let points = [];
    points.push(new THREE.Vector3(10 * (i + 0), 0, 0), new THREE.Vector3(10 * (i + 0), 40, 0));
    geometry.setFromPoints (points);
    let dateLine = new THREE.Line(geometry, new THREE.LineBasicMaterial({
      color: 0xffff00
    }));
    scene.add(dateLine);
//    scene.add(writeNum(bpdata[i+offset][0], 10 * (i + 0), 3));

    //add BPData (i)
    let cc = caret.clone();
    cc.position.set(10 * (i + 0.5), BP2Y(bpdata[i+offset][1]), 0)
    scene.add(cc);
    cc = caret.clone();
    cc.position.set(10 * (i + 0.5), BP2Y(bpdata[i+offset][2]), 0)
    scene.add(cc);
  }

  function BP2Y(bp) { // [20,180] -> [0, 40]
    return (bp - 20) / 4
  }
  
  ////////////////////////////////////
  let geometry, i, line;
 
  for (var ii = 0; ii < bpdata.length; ii++) {
  	if (bpdata[ii][0] >= startDate) {
    	offset = ii;
      break;
    }
 	}
  
  for (i = 0; i < bpdata.length - offset; i++) {
    plot(i)
  }
  // connect the SYSTOLIC
  geometry = new THREE.BufferGeometry();
  points = [];
  for (i = 0; i < bpdata.length-offset; i++)
    points.push(new THREE.Vector3(10 * (i + 0.5), BP2Y(bpdata[i+offset][1]), 0))
  geometry.setFromPoints(points);
  line = new...