Graph 3D | Animation Moving Dots

by denvut

HTML

<script src="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"></script>
<div style="float:left">
<p>
  <label for="xBarWidth">
    Ширина шкафа:
    <input type="text" id="xBarWidth" value style="width:50px;" /> см
  </label>
</p>
<p>
  <label for="yBarWidth">
    Глубина шкафа:
    <input type="text" id="yBarWidth" value style="width:50px;" /> см
  </label>
</p>
<p>
  <label for="zBarWidth">
    Высота шкафа:
    <input type="text" id="zBarWidth" value style="width:50px;" /> см
  </label>
</p>

</div>

<div style="float:right">
<p>
  <label for="xWidth">
    Ширина комнаты:
    <input type="text" id="xWidth" value style="width:50px;" /> см
  </label>
</p>
<p>
  <label for="yWidth">
    Длина комнаты:
    <input type="text" id="yWidth" value style="width:50px;" /> см
  </label>
</p>
<p>
  <label for="zWidth">
    Высота комнаты:
    <input type="text" id="zWidth" value style="width:50px;" /> см
  </label>
</p>
</div>
<Br>
<div id="mygraph"></div>

<div id="info"></div>

CSS

body {
  font: 10pt arial;
  background: #e8d0ca url(https://i.loli.net/2018/04/07/5ac8505922be2.jpg) no-repeat;
    background-position: center top;
}

JavaScript

var data = null;
var graph = null;

// Called when the Visualization API is loaded.
function drawVisualization() {
  // create the data table.
  data = new vis.DataSet();
  
  var xBarWidth =
    parseFloat(document.getElementById("xBarWidth").value) || undefined;
  var yBarWidth =
    parseFloat(document.getElementById("yBarWidth").value) || undefined;
  var zBarWidth =
    parseFloat(document.getElementById("zBarWidth").value) || undefined;
    
  var xWidth =
    parseFloat(document.getElementById("xWidth").value) || undefined;
  var yWidth =
    parseFloat(document.getElementById("yWidth").value) || undefined;
  var zWidth =
    parseFloat(document.getElementById("zWidth").value) || undefined;
  

  // create some shortcuts to math functions
  var sin = Math.sin;
  var cos = Math.cos;
  var pi = Math.PI;

  // create the animation data
  var tmax = 2.0 * pi;
  var tstep = tmax / 75;
  var dotCount = 1; // set this to 1, 2, 3, 4, ...
  for (var t = 0; t < tmax; t += tstep) {
    var tgroup = parseFloat(t.toFixed(2));
    var value = t;

    // a dot in the center
    data.add({ x: 0, y: 0, z: 0, filter: tgroup, style: value });

    // one or multiple dots moving around the center
    for (var dot = 0; dot < dotCount; dot++) {
      var tdot = t + (2 * pi * dot) / dotCount;
      data.add({
        x: sin(tdot),
        y: cos(tdot),
        z: sin(tdot),
        filter: tgroup,
        style: value
      });
      data.add({
        x: sin(tdot),
        y: -cos(tdot),
        z: sin(tdot + (tmax * 10) / 22),
        filter: tgroup,
        style: value
      });
    }
  }

  // specify options
  console.log(data);
  var options = {
    width: "800px",
    height: "600px",
    style: "dot-color",
    xMax: xWidth,
    zMax: zWidth,
    yMax: yWidth,
    xBarWidth: xBarWidth,
    yBarWidth: yBarWidth,
    zBarWidth: zBarWidth,
    showPerspective: true,
    showGrid: true,
    keepAspectRatio: true,
    verticalRatio: 1.0,
    animationInterval: 35, //...