1D Flat Foldability

Folding a 1-dimensional line with a random crease pattern (mountains and valleys).

It is not guaranteed that every crease pattern is flat-foldable, but it is possible to turn a pattern that is not flat-foldable into one that is by adding creases.

Blue and Red creases are valley and mountain creases, respectively.
Green creases are added to ensure flat-foldability with an appropriate mountain or valley direction.

// Create random creases in a unit interval [0, 1].
var data = d3.range(d3.randomUniform(seedLo, seedHi)() | 0).map((d, i, arr) => {
  return d3.randomUniform()();
}).sort((a, b) => a - b).filter((d, i, arr) => {
  // Ensure minimum distance between creases to avoid vertex overlaps.
  return i === 0 || (X(d) - X(arr[i - 1]) > 4 * radius);
});

// True for mountain fold; false for valley fold.
var creases = data.map((d, i) => d3.randomUniform()() >= 0.2);

data = [0].concat(data).concat([1]);

var chain = svg;

var folding = FlatFold(data, creases);

var foldedOrder = folding.order();

var foldedLine = folding.line();

var foldedCreases = folding.creases();

var max = d3.max(foldedOrder);
var lastIndex = foldedOrder.indexOf(max);

// Create nested chain of groups.
for (let i = 0; i < foldedLine.length - 1; i++) {
  chain = chain.selectAll("g")
      .data([foldedLine[i]])
    .enter().append("g")
      .attr("transform", translate((i > 0
          ? X(foldedLine[i] - foldedLine[i - 1])
          : X(foldedLine[i])), 0));

chain.append("line")
      .attr("x1", 0)
      .attr("y1", 0)
      .attr("y2", 0)
      .attr("x2", X(foldedLine[i + 1]) - X(foldedLine[i]));

// The endpoints are not creases.
  if (i > 0 && i < foldedLine.length - 1) {
    chain.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", radius);
  }
}

var stopped = false;

// Keep the segments centered in the viewport.
var timer = d3.timer(function(elapsed) {
  let bbox = svg.node().getBBox(),
      center = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2],
      dx = width / 2 - center[0],
      dy = height / 2 - center[1];

svg.transition()
    .ease(d3.easeLinear)
    // Provide a little hysteresis.
    .duration(500)
    .attr("transform", (d, i) => {
      return translate(dx, dy);
    });
  
  if (stopped) timer.stop();
});

svg.select("g").selectAll("g")
  .style("fill", (d, i) => {
    if (data.indexOf(foldedLine[i]) === -1) return "#00FF00";
    return (foldedCreases[i]) ? "#FF0000" : "#0000FF";
  })
  .transition()
    .duration(2500)
    .delay((d, i) => 2500 * foldedOrder[i])
    .attr("transform", (d, i) => {
      let dx = i > 0 ? X(foldedLine[i + 1] - foldedLine[i]) : X(foldedLine[i + 1]);
      return translate(dx, 0) + rotate(180 * ((foldedCreases[i]) ? 1 : -1));
    })
    .style("fill", "#000000")
    .on("end", function(d, i) {
      // The last crease has finished folding.
      if (i === lastIndex) {
        window.setTimeout(() => { stopped = true; }, 1000);
      }
    });

svg.select("g").selectAll("circle")
  .transition()
    .duration(2500)
    .delay((d, i) => 2500 * foldedOrder[i])
    .attr("r", radius / 2);

function translate(x, y) {
  return "translate(" + x + "," + y + ")";
}

function rotate(degrees) {
  return "rotate(" + degrees + ")";
}

</script>

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