steltenpower/README.md

## README.md

      
    Raw
  

              README.md
            
          
    My first block built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg  { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    function myFunction(){
      var sq2=Math.sqrt(2), pi=Math.PI;

      // actually want to do this for many i,j combinations at the same time, for which D3 should be particularly handy
      var i=10, j=30; // 0<n<40,i<>j

      // defining the 4 control points to start with
      var P0={start:{x:i-0.5,  					y:0}};
      var P1={start:{x:P0.start.x, 			y:j-1}};
      var P2={start:{x:P1.start.x-0.5, 	y:P1.start.y+0.5}};
      var P3={start:{x:0, 							y:P2.start.y}};

      // calculating different parameters to describe the same path
      function av(a,b){
        return {x:(a.x+b.x)/2,
                y:(a.y+b.y)/2};}
      var Pmid={start:av(P1.start,P2.start)};
      Pmid.end={x: sq2/4*(i+j-1)};
      Pmid.end.y = Pmid.end.x;
      var r={start:0.5,
             end : Math.abs(i-j)*sq2/2};
      var angle={start: -pi/4};
          angle.end   = angle.start+pi/2*Math.sign(j-i);
      var L0={start:(P1.start.y-P0.start.y),
              end:0},
          L1={start:(P2.start.x-P3.start.x),
              end:0};
      return function(d, i, a) {
        return function(t){
          function interpolate_scalar(ip,t){
            ip.move =  ip.start * (1-t)+ip.end * t;
            return ip;}
          function interpolate(ip,t){
            ip.move={x:ip.start.x*(1-t)+ip.end.x*t,
                     y:ip.start.y*(1-t)+ip.end.y*t};
            return ip;}
          Pmid=interpolate(Pmid,t);
          angle=interpolate_scalar(angle,t);
          L0=interpolate_scalar(L0,t);
          L1=interpolate_scalar(L1,t);
          r=interpolate_scalar(r,t);
          // just some trigonometry
          var c=Math.cos(angle.move), s=Math.sin(angle.move);
          var Pc={move:{x:Pmid.move.x-r.move/sq2*c,
                        y:Pmid.move.y+r.move/sq2*s}};
          var a=angle.move-pi/4;
          var sa=Math.sin(a), ca=Math.cos(a);
          var rs=r.move*sa, rc=r.move*ca;
          P1.move={x:Pc.move.x-rs,
                   y:Pc.move.y-rc};
          P2.move={x:Pc.move.x+rc,
                   y:Pc.move.y-rs};
          P0.move={x:P1.move.x-L0.move*ca,
                   y:P1.move.y+L0.move*sa};
          P3.move={x:P2.move.x+L1.move*sa,
                   y:P2.move.y+L1.move*ca};
          return ("M"+P0.move.x+","+P0.move.y+
                  " L"+P1.move.x+","+P1.move.y+
                  " A"+r.move+","+r.move+" 0 0,1 "+P2.move.x+","+P2.move.y+
                  " L"+P3.move.x+","+P3.move.y);
        };
      };
    }

    // generating some SVG
    var svg = d3.select("body").append("svg");
    svg.append("rect")
      .attr({x: 0, y: 0, width: 400, height: 400})
      .style({ fill: "#a72d1a"});
    var g=svg.append("g").attr("transform","scale(10)");
    g.append("path")
    	.style({ stroke: "yellow",fill:"none", "stroke-width":0.2})
    	.transition()
    	.duration(5000)
    	.attrTween("d",myFunction());
    // also see http://bl.ocks.org/cloudshapes/5662135
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width:100%; height: 100% }
	</style>
	</head>

	<body>
	<script>
	function myFunction(){
	var sq2=Math.sqrt(2), pi=Math.PI;

	// actually want to do this for many i,j combinations at the same time, for which D3 should be particularly handy
	var i=10, j=30; // 0<n<40,i<>j

	// defining the 4 control points to start with
	var P0={start:{x:i-0.5, y:0}};
	var P1={start:{x:P0.start.x, y:j-1}};
	var P2={start:{x:P1.start.x-0.5, y:P1.start.y+0.5}};
	var P3={start:{x:0, y:P2.start.y}};

	// calculating different parameters to describe the same path
	function av(a,b){
	return {x:(a.x+b.x)/2,
	y:(a.y+b.y)/2};}
	var Pmid={start:av(P1.start,P2.start)};
	Pmid.end={x: sq2/4*(i+j-1)};
	Pmid.end.y = Pmid.end.x;
	var r={start:0.5,
	end : Math.abs(i-j)*sq2/2};
	var angle={start: -pi/4};
	angle.end = angle.start+pi/2*Math.sign(j-i);
	var L0={start:(P1.start.y-P0.start.y),
	end:0},
	L1={start:(P2.start.x-P3.start.x),
	end:0};
	return function(d, i, a) {
	return function(t){
	function interpolate_scalar(ip,t){
	ip.move = ip.start * (1-t)+ip.end * t;
	return ip;}
	function interpolate(ip,t){
	ip.move={x:ip.start.x(1-t)+ip.end.xt,
	y:ip.start.y(1-t)+ip.end.yt};
	return ip;}
	Pmid=interpolate(Pmid,t);
	angle=interpolate_scalar(angle,t);
	L0=interpolate_scalar(L0,t);
	L1=interpolate_scalar(L1,t);
	r=interpolate_scalar(r,t);
	// just some trigonometry
	var c=Math.cos(angle.move), s=Math.sin(angle.move);
	var Pc={move:{x:Pmid.move.x-r.move/sq2*c,
	y:Pmid.move.y+r.move/sq2*s}};
	var a=angle.move-pi/4;
	var sa=Math.sin(a), ca=Math.cos(a);
	var rs=r.movesa, rc=r.moveca;
	P1.move={x:Pc.move.x-rs,
	y:Pc.move.y-rc};
	P2.move={x:Pc.move.x+rc,
	y:Pc.move.y-rs};
	P0.move={x:P1.move.x-L0.move*ca,
	y:P1.move.y+L0.move*sa};
	P3.move={x:P2.move.x+L1.move*sa,
	y:P2.move.y+L1.move*ca};
	return ("M"+P0.move.x+","+P0.move.y+
	" L"+P1.move.x+","+P1.move.y+
	" A"+r.move+","+r.move+" 0 0,1 "+P2.move.x+","+P2.move.y+
	" L"+P3.move.x+","+P3.move.y);
	};
	};
	}

	// generating some SVG
	var svg = d3.select("body").append("svg");
	svg.append("rect")
	.attr({x: 0, y: 0, width: 400, height: 400})
	.style({ fill: "#a72d1a"});
	var g=svg.append("g").attr("transform","scale(10)");
	g.append("path")
	.style({ stroke: "yellow",fill:"none", "stroke-width":0.2})
	.transition()
	.duration(5000)
	.attrTween("d",myFunction());
	// also see http://bl.ocks.org/cloudshapes/5662135
	</script>
	</body>