bricof · April 11, 2017 14:27
diff --git a/.block b/.block
diff --git a/README.md b/README.md
diff --git a/events.csv b/events.csv
diff --git a/events.py b/events.py
 import pandas as pd
 import numpy as np

 speed = 0.00015
 outer_r = 210
 inner_r = 160

 events_data = []

 for p in range(150):

  rad = inner_r + (outer_r - inner_r) * np.random.uniform()
  sil = int(np.random.uniform() * 3)

  n_events = 2 + int(np.random.uniform() * 10)

  next_time = np.random.uniform() * 0.01 * p
  next_event = 0

  for i in range(n_events - 1):

    start_time = next_time
    next_time = start_time + 0.5 * ( 0.3 + np.random.uniform() * 0.4 )

    start_event = next_event
    next_event = start_event + 1
    if next_event > 3:
      next_event = 1

    events_data.append({
        'particle_id': p, 'rad': rad, 'sil': sil,
        't1': start_time,
        't2': next_time,
        'e1': start_event,
        'e2': next_event
      })

  # add final event
  events_data.append({
      'particle_id': p, 'rad': rad, 'sil': sil,
      't1': next_time,
      't2': next_time + 0.5 * ( 0.3 + np.random.uniform() * 0.4 ),
      'e1': next_event,
      'e2': 4
    })


 df = pd.DataFrame.from_records(events_data)

 df = df.sort_values(by="t1")

 df.to_csv("events.csv", index=False)

diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style>

 .first-point-rect {
  fill: #fff;
  stroke: #000;
  stroke-miterlimit: 10;
 }

 .later-points-rect {
  fill: #fff;
  stroke: #939598;
  stroke-miterlimit: 10;
  stroke-dasharray: 4.023,4.023;
 }

 .label {
  fill: #939598;
  font-size: 14px;
 }

 </style>

 <body>

 <svg width="960" height="500" viewBox="-150 0 960 665">

 <g id="inventory-cycle">
 </g>

 <g id="point-1">
  <rect class="first-point-rect" x="200" y="133.4" width="176" height="144"/>
  <text class="label" transform="matrix(1 0 0 1 200.4859 297.0509)">point 1</text>
 </g>

 <g id="point-2">
  <rect class="later-points-rect" x="392.1" y="429.2" width="38" height="144" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -233.9965 437.497)"/>
  <text class="label" transform="matrix(0.7 -0.7 0.7 0.7 341 458)">point 2</text>
 </g>

 <g id="point-3">
  <rect class="later-points-rect" x="269" y="480.2" width="38" height="144"/>
  <text class="label" transform="matrix(1 0 0 1 269 472.3668)">point 3</text>
 </g>

 </svg>

 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="inventory-cycle.js"></script>

 <script>

 start_inventory_animation()

 </script>
diff --git a/inventory-cycle.js b/inventory-cycle.js

 function form_outline_d(form_n, x, y){

  // square
  if (form_n == 0) {
    return "M" + (x) + "," + (y) + "l10,0 l0,10 l-10,0 z"
  }

  // triangle
  if (form_n == 1) {
    return "M" + (x) + "," + (y + 10) + "l5,-10 l5,10 z"
  }

  // circle
  if (form_n == 2) {
    return "M" + (x) + "," + (y + 5) + "a 5 5 0 1 0 0.01 0 z"
  }

 }


 function start_inventory_animation() {

  // vis config variables

  var svg = d3.select("#inventory-cycle")

  var speed = 0.00015 // ticks per millisecond

  var outer_r = 210
  var inner_r = 160

  var center_x = 289
  var center_y_main = 380
  var center_y_in = -30

  // mapping functions

  var coord_x_in = function(r,a) { return center_x + r * Math.cos(a) }
  var coord_y_in = function(r,a) { return center_y_in+ r * Math.sin(a) }

  var coord_x_main = function(r,a) { return center_x + r * Math.cos(a) }
  var coord_y_main = function(r,a) { return center_y_main + r * Math.sin(a) }

  var angle_in = function(t, t1, t2) {
    var rel_t
    if (t2 == t1) { rel_t = 1 }
    else { rel_t = (t - t1) / (t2 - t1) }
    var a = (180.0 - 90.0 * rel_t) * (Math.PI/180.0)
    return a
  }

  var angle_main = function(t, t1, t2, e1, e2) {
    // compute angle in circle for a dot,
    // given its previous and next events, their timestamps, and the current time
    var rel_t
    if (t2 == t1) { rel_t = 1 }
    else { rel_t = (t - t1) / (t2 - t1) }

    if (e2 == 1) {
      return (90.0 + 180.0 * rel_t) * (Math.PI/180.0)
    }

    if (e2 == 2) {
      return (-90.0 + 135.0 * rel_t) * (Math.PI/180.0)
    }

    if (e2 == 3) {
      return (-90.0 + 135.0 + 45.0 * rel_t) * (Math.PI/180.0)
    }

  }

  d3.csv("events.csv", function(events_data){

    var current_events = []

    d3.timer(function(t_ms) {
        var t = t_ms * speed

        // *** SIMULATION ***

        var current_events = []
        events_data.forEach(function(d){
          if ((d.t1 <= t) && (d.t2 > t)) {
            current_events.push(d)
          }
        })

        // *** UPDATE SVG ANIMATION ***

        var inventory_items = svg.selectAll(".inventory-cycle-silhouette")
                          .data(current_events, function(d) { return d.particle_id })

        inventory_items.enter().append("path")
          .attr("class", "inventory-cycle-silhouette")
          .attr("fill", "#fff")
          .attr("stroke", "#000")
          .attr("stroke-width", 0.5)
          .attr("opacity", 1)
          .attr("d", function(d) { return form_outline_d(d.sil, 290, 0) })

        inventory_items
          .attr("d", function(d){

              var tx, ty

              if (d.e1 == 0) {
                var new_rad = inner_r + (outer_r - d.rad)
                if (coord_y_in(new_rad, angle_in(t, d.t1, d.t2, d.e1, d.e2)) > center_y_main - outer_r + new_rad) {
                  tx = coord_x_in(new_rad, angle_in(t, d.t1, d.t2, d.e1, d.e2))
                } else {
                  tx = -90 + d.rad * 2
                }
                ty = coord_y_in(new_rad, angle_in(t, d.t1, d.t2, d.e1, d.e2))
              } else if (d.e2 == 4) {
                tx = 280
                ty = 550
              } else {
                tx = coord_x_main(d.rad, angle_main(t, d.t1, d.t2, d.e1, d.e2))
                ty = coord_y_main(d.rad, angle_main(t, d.t1, d.t2, d.e1, d.e2))
              }

              return form_outline_d(d.sil, tx, ty)

            })

        inventory_items.exit().remove()

    })

  })

 }
diff --git a/thumbnail.png b/thumbnail.png
	import pandas as pd
	import numpy as np

	speed = 0.00015
	outer_r = 210
	inner_r = 160

	events_data = []

	for p in range(150):

	rad = inner_r + (outer_r - inner_r) * np.random.uniform()
	sil = int(np.random.uniform() * 3)

	n_events = 2 + int(np.random.uniform() * 10)

	next_time = np.random.uniform() * 0.01 * p
	next_event = 0

	for i in range(n_events - 1):

	start_time = next_time
	next_time = start_time + 0.5 * ( 0.3 + np.random.uniform() * 0.4 )

	start_event = next_event
	next_event = start_event + 1
	if next_event > 3:
	next_event = 1

	events_data.append({
	'particle_id': p, 'rad': rad, 'sil': sil,
	't1': start_time,
	't2': next_time,
	'e1': start_event,
	'e2': next_event
	})

	# add final event
	events_data.append({
	'particle_id': p, 'rad': rad, 'sil': sil,
	't1': next_time,
	't2': next_time + 0.5 * ( 0.3 + np.random.uniform() * 0.4 ),
	'e1': next_event,
	'e2': 4
	})


	df = pd.DataFrame.from_records(events_data)

	df = df.sort_values(by="t1")

	df.to_csv("events.csv", index=False)
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>

	.first-point-rect {
	fill: #fff;
	stroke: #000;
	stroke-miterlimit: 10;
	}

	.later-points-rect {
	fill: #fff;
	stroke: #939598;
	stroke-miterlimit: 10;
	stroke-dasharray: 4.023,4.023;
	}

	.label {
	fill: #939598;
	font-size: 14px;
	}

	</style>

	<body>

	<svg width="960" height="500" viewBox="-150 0 960 665">

	<g id="inventory-cycle">
	</g>

	<g id="point-1">
	<rect class="first-point-rect" x="200" y="133.4" width="176" height="144"/>
	<text class="label" transform="matrix(1 0 0 1 200.4859 297.0509)">point 1</text>
	</g>

	<g id="point-2">
	<rect class="later-points-rect" x="392.1" y="429.2" width="38" height="144" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -233.9965 437.497)"/>
	<text class="label" transform="matrix(0.7 -0.7 0.7 0.7 341 458)">point 2</text>
	</g>

	<g id="point-3">
	<rect class="later-points-rect" x="269" y="480.2" width="38" height="144"/>
	<text class="label" transform="matrix(1 0 0 1 269 472.3668)">point 3</text>
	</g>

	</svg>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="inventory-cycle.js"></script>

	<script>

	start_inventory_animation()

	</script>

	function form_outline_d(form_n, x, y){

	// square
	if (form_n == 0) {
	return "M" + (x) + "," + (y) + "l10,0 l0,10 l-10,0 z"
	}

	// triangle
	if (form_n == 1) {
	return "M" + (x) + "," + (y + 10) + "l5,-10 l5,10 z"
	}

	// circle
	if (form_n == 2) {
	return "M" + (x) + "," + (y + 5) + "a 5 5 0 1 0 0.01 0 z"
	}

	}


	function start_inventory_animation() {

	// vis config variables

	var svg = d3.select("#inventory-cycle")

	var speed = 0.00015 // ticks per millisecond

	var outer_r = 210
	var inner_r = 160

	var center_x = 289
	var center_y_main = 380
	var center_y_in = -30

	// mapping functions

	var coord_x_in = function(r,a) { return center_x + r * Math.cos(a) }
	var coord_y_in = function(r,a) { return center_y_in+ r * Math.sin(a) }

	var coord_x_main = function(r,a) { return center_x + r * Math.cos(a) }
	var coord_y_main = function(r,a) { return center_y_main + r * Math.sin(a) }

	var angle_in = function(t, t1, t2) {
	var rel_t
	if (t2 == t1) { rel_t = 1 }
	else { rel_t = (t - t1) / (t2 - t1) }
	var a = (180.0 - 90.0 * rel_t) * (Math.PI/180.0)
	return a
	}

	var angle_main = function(t, t1, t2, e1, e2) {
	// compute angle in circle for a dot,
	// given its previous and next events, their timestamps, and the current time
	var rel_t
	if (t2 == t1) { rel_t = 1 }
	else { rel_t = (t - t1) / (t2 - t1) }

	if (e2 == 1) {
	return (90.0 + 180.0 * rel_t) * (Math.PI/180.0)
	}

	if (e2 == 2) {
	return (-90.0 + 135.0 * rel_t) * (Math.PI/180.0)
	}

	if (e2 == 3) {
	return (-90.0 + 135.0 + 45.0 * rel_t) * (Math.PI/180.0)
	}

	}

	d3.csv("events.csv", function(events_data){

	var current_events = []

	d3.timer(function(t_ms) {
	var t = t_ms * speed

	// * SIMULATION *

	var current_events = []
	events_data.forEach(function(d){
	if ((d.t1 <= t) && (d.t2 > t)) {
	current_events.push(d)
	}
	})

	// * UPDATE SVG ANIMATION *

	var inventory_items = svg.selectAll(".inventory-cycle-silhouette")
	.data(current_events, function(d) { return d.particle_id })

	inventory_items.enter().append("path")
	.attr("class", "inventory-cycle-silhouette")
	.attr("fill", "#fff")
	.attr("stroke", "#000")
	.attr("stroke-width", 0.5)
	.attr("opacity", 1)
	.attr("d", function(d) { return form_outline_d(d.sil, 290, 0) })

	inventory_items
	.attr("d", function(d){

	var tx, ty

	if (d.e1 == 0) {
	var new_rad = inner_r + (outer_r - d.rad)
	if (coord_y_in(new_rad, angle_in(t, d.t1, d.t2, d.e1, d.e2)) > center_y_main - outer_r + new_rad) {
	tx = coord_x_in(new_rad, angle_in(t, d.t1, d.t2, d.e1, d.e2))
	} else {
	tx = -90 + d.rad * 2
	}
	ty = coord_y_in(new_rad, angle_in(t, d.t1, d.t2, d.e1, d.e2))
	} else if (d.e2 == 4) {
	tx = 280
	ty = 550
	} else {
	tx = coord_x_main(d.rad, angle_main(t, d.t1, d.t2, d.e1, d.e2))
	ty = coord_y_main(d.rad, angle_main(t, d.t1, d.t2, d.e1, d.e2))
	}

	return form_outline_d(d.sil, tx, ty)

	})

	inventory_items.exit().remove()

	})

	})

	}