created by http://livecoding.io/3688703

README.md

View this code at http://livecoding.io/3688703

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)"
}

water.css

#red {
  width: 100px;
  height: 100px;
  background: #FF0000;
}

#blue {
  width: 100px;
  height: 100px;
  background: #0000FF;
}

water.html

<!--background(0, 0, 0);
noStroke();

// draw Chompy
var chompyX = 331;
fill(255, 255, 0);
ellipse(chompyX, 200, 100, 100);
fill(0, 0, 0);
triangle(chompyX, 200, chompyX + 61, 163, chompyX + 77, 233);

var ghostWidth = 80;

// set up ghost feet variables
var footWidth = ghostWidth / 3;
var firstOffset = footWidth / 2;
var secondOffset = 3 * footWidth / 2;
var thirdOffset = 5 * footWidth / 2;

// Pinky's variables
var pinkyCenterX = 200;
var pinkyLeftX = pinkyCenterX - ghostWidth / 2;

// draw Pinky's body
fill(255, 148, 187);
ellipse(pinkyCenterX, 195, ghostWidth, ghostWidth + 10);
rect(pinkyLeftX, 197, ghostWidth, 43);

// draw Pinky's feet
ellipse(pinkyLeftX + firstOffset, 240, footWidth, footWidth);
ellipse(pinkyLeftX + secondOffset, 240, footWidth, footWidth);
ellipse(pinkyLeftX + thirdOffset, 240, footWidth, footWidth);

// draw Pinky's eyes
fill(255, 255, 255);
ellipse(pinkyCenterX - 20, 200, 20, 30);
ellipse(pinkyCenterX + 20, 200, 20, 30);
fill(92, 179, 255);
ellipse(pinkyCenterX - 16, 200, 12, 20);
ellipse(pinkyCenterX + 24, 200, 12, 20);

// Inky's variables
var InkyCenterX = 78;
var InkyLeftX = InkyCenterX - ghostWidth / 2;

// draw Inky's body
fill(150, 239, 255);
ellipse(InkyCenterX, 195, ghostWidth, ghostWidth + 10);
rect(InkyLeftX, 197, ghostWidth, 43);

// draw Inky's feet
ellipse(InkyLeftX + firstOffset, 240, footWidth, footWidth);
ellipse(InkyLeftX + secondOffset, 240, footWidth, footWidth);
ellipse(InkyLeftX + thirdOffset, 240, footWidth, footWidth);

// draw Inky's eyes
fill(255, 255, 255);
ellipse(InkyCenterX - 20, 200, 20, 30);
ellipse(InkyCenterX + 20, 200, 20, 30);
fill(92, 179, 255);
ellipse(InkyCenterX - 16, 200, 12, 20);
ellipse(InkyCenterX + 24, 200, 12, 20);
-->

water.js

var enter = function(selection)
    {
      var g = selection.append("g")
          .attr("transform", "translate(60,0) scale(0.5)");
 
      drawGhost(g, 0, 80, false);
    }
    ;

var drawGhost = function(selection, center, ghostWidth, lookingRight){
  //Size Variables
  var footWidth = Math.floor(ghostWidth / 3);
  var firstOffset = Math.floor(footWidth / 2),
     secondOffset = Math.floor(3 * footWidth / 2),
     thirdOffset = Math.floor(5 * footWidth / 2),
     ghostLeft = center - ghostWidth / 2;
  
  var colors = ["rgb(255,148,187)", "red", "green"];
  color=Math.floor((Math.random()-0.01)*colors.length);
  color=colors[color];
  
  //Body
  ellipse(selection, color, center, 195, ghostWidth, ghostWidth + 10);
  rect(selection, "purple", ghostLeft, 187, ghostWidth, 43);
  
  //Feet
  ellipse(selection, color, ghostLeft + firstOffset, 240, footWidth, footWidth);
  ellipse(selection, color, ghostLeft + secondOffset, 240, footWidth, footWidth);
  ellipse(selection, color, ghostLeft + thirdOffset, 240, footWidth, footWidth);
  
  //Eye Direction
  var pupils = (lookingRight === true) ? [-16,24] : [-24, 16];
      
  //Left Eye
  ellipse(selection, "rgb(255,255,255)", center-20, 200, 20, 30);
  ellipse(selection, "rgb(92,179,255)", center+pupils[0], 200, 12, 20);
      
  //Right Eye
  ellipse(selection, "rgb(255,255,255)", center+20, 200, 20, 30);
  ellipse(selection, "rgb(92,179,255)", center+pupils[1], 200, 12, 20);
}

var ellipse = function(selection, fill, cx, cy, rx, ry) {
  selection.append("ellipse")
        .attr("fill",fill).attr("cx",cx).attr("cy",cy) 
        .attr("rx",rx).attr("ry",ry);
} 
    
var rect = function(selection, fill, x, y, width,height) {
  selection.append("rect")
        .attr("fill",fill).attr("x",x).attr("y",y) 
        .attr("width",width).attr("height",height);
}
    
var svg = d3.select("body").selectAll(".chaser")
    .data(livecoding.json.data);  
   
//ENTER
svg.enter().append("svg")
      .attr("class", "chaser")
      .style("width", 300)
      .style("height", 300)
      .style("background", "blue")
      .call(enter); 
         
//UPDATE
svg.call(enter);
   
//EXIT
svg.exit().remove();
      
/*
 
enter = function(selection)
        {
         //START DEBUG
          selection
            .append("button")
              .text("Delete").style("float", "right")
              .on("click", slipDelete);
          selection.append("button")
              .text("Edit").style("float", "right")
              .on("click", function(d,i){});
          selection.filter(function(d, i) { return d.type == "manual" })
              .append("button")
              .text("Add 10").style("float", "right")
              .on("click", updateData);
         selection.filter(function(d, i) { return d.type == "timer" })
           .append("button")
           .attr("class", "timer-toggle")
           //.text(function(d){ if(d.progress.start){return "Pause"} else return {"Start"}})
           .text("Start/Pause")
           .style("float", "right")
           .on("click", toggleTimer);
}

*/

water.json

{
  "data" : [1,2]
}