viSFest logo: small multiples canvas

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

forked from enjalot's block: viSFest logo: small multiples

<!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 numSamples = 50;
    var numRays = 250;
    var numLines = 8;
    var scale = 1.2;
    
    var cx = 40;
    var cy = 40;
    
    var color = "#ff005d";

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

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)
      })
      
      ctx.clearRect(0, 0, fsize, fsize);

ctx.strokeStyle = color;
      ctx.lineWidth = 1.5;
      ctx.lineJoin = "round";

ctx.beginPath();
      lines.forEach(function(line) {
        ctx.moveTo(line[0].x, line[0].y)
        line.forEach(function(point) {
          ctx.lineTo(point.x, point.y)
        })
        ctx.lineTo(line[0].x, line[0].y)
        
      })
      ctx.stroke()

}
    
    anim.style({
      width: fsize + "px",
      height: fsize + "px",
      margin: "5px"
    })
    var animCanvas = anim.append("canvas").node()
    animCanvas.width = fsize;
    animCanvas.height = fsize;
    var animSvg = anim.append("svg")
    .style({
        width: fsize + "px",
        height: fsize + "px",
    	})
    
    var dt = 0;
    var ainTheta = Math.sin(dt * Math.PI * 2) * 90;
    var aoutTheta = dt * 360;

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 pause = false;

var animCtx = animCanvas.getContext("2d");

d3.timer(function(elapsed) {

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, animCtx, ainTheta, aoutTheta)
      
      return pause;
    });

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