morph experiment #1

playing with the viSFest logo

forked from enjalot's block: visfest logo - technical experiment #2

forked from enjalot's block: visfest logo - technical experiment #3

forked from enjalot's block: visfest logo - technical experiment #4

forked from enjalot's block: visfest logo - technical experiment #5

forked from enjalot's block: visfest experiment #3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="sampler.js"></script>
  <script src="matrix.js"></script>
  <script src="polyk.js"></script>
</head>
<style>
  body {
    background-color: #192247;
  }
</style>

ins.forEach(function(d) {
        transformer(d, zeroer)
        transformer(d, placer)
      })

outs.forEach(function(d) {
        transformer(d, zeroer);
        transformer(d, morpher)
        transformer(d, placer);
      })
      
      var lines = [];
      d3.range(numLines+1).forEach(function(index) {
        var samples = []
        var ratio = index / numLines;
        var i, x, y;
        var last;
        if(index === 0) {
          last = ins;
        } else {
          last = lines[index - 1];
        }
        for(i = 0; i < last.length; i++) {
          // TODO: better interpolation?
          x = ins[i].x * (1 - ratio) + outs[i].x * ratio;
          y = ins[i].y * (1 - ratio) + outs[i].y * ratio;
          var p = {x: x, y: y}
          samples.push(p)
        }
        lines.push(samples)
      })
      
      //verify center
      transformer(c, zeroer)
      transformer(c, placer)
      output.append("circle")
      .attr({
        r: 5,
        fill: "orange",
        cx: c.x,
        cy: c.y
      })
    
      // draw the lines we are interpolating along
      var interps = output.selectAll("line")
      .data(ins)
      interps
      	.enter().append("line")
      interps
        .attr({
          x1: function(d,i) { return d.x },
          y1: function(d,i) { return d.y },
          x2: function(d,i) { return outs[i].x },
          y2: function(d,i) { return outs[i].y },
          stroke: "#6c95cf",
          "stroke-width": 1
        })
      
      var blended = output.selectAll("path.blend")
      	.data(lines)
      blended
      	.enter()
      	.append("path").classed("blend", true)
      blended
        .attr({
          d: function(d) { return line(d) },
          fill: "none",
          stroke: "#ff005d",
          "stroke-width": 2,
        })
      
      var groups = output.selectAll("g.line").data(lines)
      groups
      	.enter().append("g").classed("line", true)
      var circles = groups
        .selectAll("circle")
        .data(function(d) { return d })
      circles
        .enter().append("circle")
      circles
        .attr({
          r: 3,
          fill: "white",
          cx: function(d) { return d.x },
          cy: function(d) { return d.y }
        })
    }
    
    interpolate(90);

var electron = svg.append("circle")
    .attr({
      cx: cx + radius,
      cy: cy,
      r: 10,
      fill: "#3dfbff"
    });

var drag = d3.behavior.drag()
    .on("drag", function() {
      var mx = d3.mouse(this)[0];
      var my = d3.mouse(this)[1];
      var omega = Math.atan2(mx - cx, my - cy);
      var nx = radius * Math.sin(omega);
      var ny = radius * Math.cos(omega);
      electron.attr({
        cx: cx + nx,
        cy: cy + ny
      })
      interpolate(omega*180/Math.PI)
    })

electron.call(drag);
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js