Bottled Gas Animation

This bottle of bubbles demonstrates the use of d3.timer for animation. The molecule reflections are computed using functions in the geoemetry_methods.js file. See the previous Path-Line Intersection and Path-Line Reflection blocks for details.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.molecule {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.button {
  float: right;
}

.controls {
  position: absolute;
  width: 940px;
  padding: 10px;
  z-index: 1;
}

</style>

<body>

<div class="controls">
<input id="slider" type="range" min="0.1" max="10" value="2.5" step="0.1">Speed
<input class="button" id="button" type="button" name="updateButton" value="Add Molecule"> 
</div>

var speed = 2.5;
var n_molecules = 17;
var n_segments = 100;

var svg = d3.select("svg");
var molecules_g = svg.append("g");
var highlights = svg.append("g");

// bottle path
var path = svg.select("path");
var pathEl = path.node();
var pathLength = pathEl.getTotalLength();

// uses functions in geoemetry_methods.js 
// to find where and how the molecule will bounce next
function compute_next_bounce(d, pathEl, n_segments) {
  var init_pt = {x: d.x, y: d.y};
  var dir_line = {x1: d.x + 0.0001 * d.dx, y1: d.y + 0.0001 * d.dy, 
                  x2: d.x + 2000 * d.dx, y2: d.y + 2000 * d.dy};
  
  var intersection = first_path_line_intersection(pathEl, dir_line, n_segments);

if (typeof(intersection) != "string") {
    var int_pt = intersection[0];
    var int_seg = intersection[1];
    var angle = angle_btwn_lines(dir_line, int_seg);
    var reflection_vector = compute_reflection( int_pt, angle, int_seg );
    var dir_length = dist_btwn_pts(init_pt, int_pt);
  } else {
    var int_pt = {x: 'out', y: 'out'};
    var reflection_vector = {dx: 'out', dy: 'out'};
    var dir_length = 1000;
  }
  d.int_x = int_pt.x;
  d.int_y = int_pt.y;
  d.refl_dx = reflection_vector.dx;
  d.refl_dy = reflection_vector.dy;
  d.dir_length = dir_length;
  d.dir_length_run = 0;
}

// adding a new molecule and setting its initial values
// (for animation convenience, we also pre-compute its next bounce)
var molecule_count = 0;
function add_molecule() {

molecule_data.push(d);
  molecule_count += 1;

}

// initial molecule data
var molecule_data = [];
for (var i=0; i<n_molecules; i++) {
  add_molecule();
}

// animation with d3.timer
var previous_time = 0;
d3.timer(function(elapsed) {
  var t = elapsed - previous_time;
  
  // update data
  molecule_data.forEach(function(d) {
    d.dir_length_run += speed;
    if (d.dir_length_run >= d.dir_length) {
      d.x = d.int_x;
      d.y = d.int_y;
      d.dx = d.refl_dx;
      d.dy = d.refl_dy;
      if (d.y > 0) {
        compute_next_bounce(d, pathEl, n_segments);
      }
    }
    d.x = d.x + speed * d.dx;
    d.y = d.y + speed * d.dy;
  });
  molecule_data = molecule_data.filter(function(d){ 
    return ((d.y > 0) && (d.x > 0) && (d.x < 960)); 
  });

// update circles  
  var m = molecules_g.selectAll(".molecule")
    .data(molecule_data, function(d){ return d.id; });

m.enter().append("circle")
    .attr("class", "molecule")
    .attr("r", 3);

m
    .attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; });

m.exit().remove();    
  
  // loop
  previous_time = elapsed;
});

// slider and button updates
d3.select("#slider").on("change", function() {
  speed = +this.value;
});
d3.select("#button").on("click", function() {
  add_molecule(molecule_count);
  molecule_count += 1;
});

</script>

https://d3js.org/d3.v3.min.js