just another inlet to tributary

_.md

[ Launch Inlet ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.6238653001464132,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var w = 600, h = 600;
var blockH = 30, blockW = 60, blockN = 76, 
    posX = 0, posY = 0;
var energyX = 20, energyY = 20; 


var cnvs = d3.select("svg")
    .attr("width",w)
    .attr("height",h)
    .style("background","AntiqueWhite");

var blocks = new Array();
var block;

for (var i = 0; i < blockN; i++) {
  if(posX < w && posY < h) {
    block = createBlock(posX, posY);
    blocks.push(block);
    posX += blockW;
  }
  else {
  	posY += blockH;
    posX = 0;
  }
};

function createBlock(posX, posY) {
  var block = cnvs.append("svg:rect")
      .attr("x", posX)
      .attr("y", posY)
      .attr("width", blockW)
      .attr("height", blockH)
      .style("fill", "grey")
      .style("stroke","black")
      .style("stroke-width", 4);
  
  return {"element": block}	
}

var bar = cnvs.append("rect")
    .attr("x", w/2)
    .attr("y", h-30)
    .attr("height",20)
    .attr("width",100)
    .style("fill", "blue");

var ball = cnvs.append("circle")
    .attr("r",10)
    .attr("cx",w/3)
    .attr("cy",h-200)
    .style("fill","darkred");

keypress = function() {
      var i = 0;
      console.log('Hello',this,d3.event)
      var keyChar = d3.event.keyCode;
      console.log(keyChar);
      
        if(keyChar == 100) {   
        bar.transition()
          .duration(50)
          .attr("x",function(d,i){
            return d3.select(this).attr("x")*1.2;  
          });
          var toRemove = blocks[i].element;
          console.log(toRemove);
          d3.select(toRemove).remove();
          i++;
      };
  
  	  if(keyChar == 97){   
        bar.transition()
          .duration(50)
          .attr("x",function(d,i){
            return d3.select(this).attr("x")*0.8;  
          });
        blocks.pop().d3.select(this).remove();
      }
};

function moveBall() {
  	var i = 0;
 	ball.transition().duration()
      .attr("cx", function(d,i){return d3.select(this).attr("cx")*i*0.2})
      .attr("cy", function(d,i){return d3.select(this).attr("cy")*i*0.2});
}


function keyup() {}
function keydown() {}

function play() {};




d3.select(window).on("keypress", keypress);
/*
d3.select(window).on("keyup", keyup);
d3.select(window).on("keydown", keydown);


tributary.run = function(g,t) {
  moveBall(g);
}
*/