viSFest logo: small multiples

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

forked from enjalot's block: morph experiment #1

forked from enjalot's block: morph experiment #2

forked from enjalot's block: morph 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;
  }
  .frame, .anim {
    float: left;
    border: 1px solid white;
  }
  canvas {
    position:absolute;
  }
  svg {
    position:absolute;
  }
</style>

var inner = d3.select("#inner")
    var outer = d3.select("#outer")

var ainnerElectron = new electron()
      .cx(cx).cy(cy)
      .radius(15).dialRadius(3)
      .color("#fff")
      .update(animSvg)
      //.rotateMe(ainTheta)
    var aouterElectron = new electron()
      .cx(cx).cy(cy)
      .radius(30).dialRadius(3)
      .color("#fff")
      .update(animSvg)
      //.rotateMe(aoutTheta);
    
    var start = Date.now();
    var duration = 20;
    var pause = false;

d3.timer(function(elapsed) {
      var now = Date.now();
      if(now - start > duration) {
        start = now;
      } else {
        return false;
      }
      dt = (elapsed * 0.0005 % 10) / 10;
			ainTheta = Math.sin(dt * Math.PI * 2) * 90;
    	aoutTheta = dt * 360;
			ainnerElectron.rotateMe(ainTheta);
      aouterElectron.rotateMe(aoutTheta); 
      
      interpolate(animSvg, null, ainTheta, aoutTheta)
      
      return pause;
    });

function interpolate(svg, canvas, inTheta, outTheta) {
      var ins = Sampler.getSamples(inner.node(), numSamples);
      var outs = Sampler.getSamples(outer.node(), numSamples);
      
       var c = centroid(ins);
      // we center our shapes on 0,0 to rotate about center
      var zeroer = new Matrix()
        .translate(-c.x, -c.y) 
        .scale(1)
      var inmorph = new Matrix()
        .scale(scale)
        .rotate(inTheta)
      var morpher = new Matrix()
        .scale(scale)
        .rotate(-outTheta)
      var placer = new Matrix()
        .translate(fsize/2, fsize/2)

ins.forEach(function(d) {
        transformer(d, zeroer)
        transformer(d, inmorph)
        transformer(d, placer)
      })
      outs.forEach(function(d) {
        transformer(d, zeroer);
        transformer(d, morpher)
        transformer(d, placer);
      })
      
      //verify center
      transformer(c, zeroer)
      transformer(c, placer)
      
      var rayd = generateRays(numRays);
            
      var inpoly = toPolyK(ins)
      var ind = rayd.map(function(ray) {
        var point = PolyK.Raycast(inpoly, c.x, c.y, ray.dx, ray.dy);
        return {
          x: c.x + ray.dx * point.dist,
          y: c.y + ray.dy * point.dist,
          perp: point.norm
        }
      })
      
      var outpoly = toPolyK(outs)
      var outd = rayd.map(function(ray) {
        var point = PolyK.Raycast(outpoly, c.x, c.y, ray.dx, ray.dy);
        return {
          x: c.x + ray.dx * point.dist,
          y: c.y + ray.dy * point.dist,
          perp: point.norm
        }
      })
      //console.log(outd)
      
  
      var lines = [];
      d3.range(numLines+1).forEach(function(index) {
        var samples = []
        var ratio = index / numLines;
        var i, x, y;
        var last;
        for(i = 0; i < ind.length; i++) {
          x = ind[i].x * (1 - ratio) + outd[i].x * (ratio);
          y = ind[i].y * (1 - ratio) + outd[i].y * (ratio);
          var p = {x: x, y: y}
          samples.push(p)
        }
        lines.push(samples)
      })

dial = g.append("circle")
          .attr({
            cx: cx + radius - dialRadius,
            cy: cy,
            r: dialRadius,
            fill: color
          });
        return this;
      }
      this.cb = function(arg) {
        if(arg) {
          cb = arg; return this;
        }
        return cb;
      }
      this.cx = function(arg) {
        if(arg) {
          cx = arg; return this;
        }
        return cx;
      }
      this.cy = function(arg) {
        if(arg) {
          cy = arg; return this;
        }
        return cy;
      }
      this.radius = function(arg) {
        if(arg) {
          radius = arg; return this;
        }
        return radius;
      }
      this.dialRadius = function(arg) {
        if(arg) {
          dialRadius = arg; return this;
        }
        return dialRadius;
      }
      this.color = function(arg) {
        if(arg) {
          color = arg; return this;
        }
        return color;
      }
      this.rotateMe = function(omega) {
        rotateDial(omega);
        cb(omega)
      };
      return this;
    }

</script>
</body>

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