Fire JS Bin - Animator

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

INITIAL = [{
  "segments": [{
    "start": [20, 147],
    "end": [227, 228]
  },
  {
    "start": [285, 119],
    "end": [133, 84]
  },
  {
    "start": [23, 146],
    "end": [132, 87]
  },
  {
    "start": [227, 229],
    "end": [297, 156]
  },
  {
    "start": [299, 154],
    "end": [286, 120]
  }],
  "prototype": {}
},
{
  "segments": [{
    "start": [42, 145],
    "end": [226, 200]
  },
  {
    "start": [254, 99],
    "end": [139, 102]
  },
  {
    "start": [40, 147],
    "end": [139, 103]
  },
  {
    "start": [227, 203],
    "end": [280, 148]
  },
  {
    "start": [276, 151],
    "end": [257, 99]
  }]
},
{
  "segments": [{
    "start": [110, 139],
    "end": [247, 175]
  },
  {
    "start": [230, 74],
    "end": [123, 112]
  },
  {
    "start": [109, 138],
    "end": [125, 110]
  },
  {
    "start": [246, 177],
    "end": [285, 130]
  },
  {
    "start": [285, 132],
    "end": [229, 74]
  }]
},
{
  "segments": [{
    "start": [147, 133],
    "end": [243, 151]
  },
  {
    "start": [226, 91],
    "end": [139, 111]
  },
  {
    "start": [146, 133],
    "end": [140, 112]
  },
  {
    "start": [244, 152],
    "end": [263, 131]
  },
  {
    "start": [263, 131],
    "end": [225, 91]
  }]
},
{
  "segments": [{
    "start": [145, 133],
    "end": [243, 151]
  },
  {
    "start": [225, 92],
    "end": [186, 96]
  },
  {
    "start": [168, 107],
    "end": [185, 97]
  },
  {
    "start": [244, 152],
    "end": [268, 126]
  },
  {
    "start": [268, 126],
    "end": [223, 91]
  },
  {
    "start": [148, 113],
    "end": [145, 133]
  }]
},
{
  "segments": [{
    "start": [145, 133],
    "end": [243, 151]
  },
  {
    "start": [268, 89],
    "end": [227, 57]
  },
  {
    "start": [207, 59],
    "end": [227, 57]
  },
  {
    "start": [244, 152],
    "end": [290, 143]
  },
  {
    "start": [289, 144],
    "end": [268, 90]
  },
  {
    "start": [133, 120],
    "end": [145, 133]
  }]
}]

State = function () {
  this.segments = [];
}
StateFunctions = {
  copy: function () {
    var s = new State();
    s.segments = JSON.parse(JSON.stringify(this.segments));
    return s;
  }
}
State.prototype = StateFunctions;

StateDisplay = function (state) {
  this.state = state;
  this.preview = null;
  this.prev_canvas = null;
  this.canvas = document.createElement('canvas');
  this.w = this.canvas.width = 400;
  this.h = this.canvas.height = 300;
}
StateDisplay.prototype = {
  set_as_main: function () {
    var m = document.getElementById('main');
    while (m.childNodes.length > 0) {
      m.removeChild(m.childNodes[0]);
    }
    m.appendChild(this.canvas);
    U.setup_controls();
  },
  render: function () {
    ctx = this.canvas.getContext('2d');
    if (this.prev_canvas && !D.display_mode) {
      ctx.fillStyle = "rgba(240,240,240,.8)";
      ctx.putImageData(this.prev_canvas, 0, 0);
    } else {
      ctx.fillStyle = "#f0f0f0";
    }
    ctx.fillRect(0, 0, this.w, this.h);
    ctx.strokeStyle = "#777";
    ctx.lineWidth = 4;
    ctx.beginPath();
    for (var i in this.state.segments) {
      var s = this.state.segments[i];
      ctx.moveTo(s.start[0], s.start[1]);
      ctx.lineTo(s.end[0], s.end[1]);
    }
    ctx.stroke();
  }
}
D = {
  states: [],
  main_display: null,
  display_mode: false,
  new_project: function () {
    if (sessionStorage.states) {
      D.states = JSON.parse(sessionStorage.states);
    } else {
      D.states = INITIAL;
    }
    D.states.forEach(function (s) {
      s.__proto__ = StateFunctions;
    });
    D.main_display = new StateDisplay(D.states[0]);
  },
  save: function () {
    sessionStorage.states = JSON.stringify(D.states);
  }
}
window.onload = function () {
  D.new_project();
  D.main_display.render();
  U.init();
  $(document).mousedown(function () {
    return false;
  });
}

U = {
  append_from_state: function (s) {
    var lst = document.getElementById('states');
    var mtool = document.getElementById('move_tool');
    var actions = document.getElementById('actions');
    var p = new StateDisplay(s);
    p.render();
    var li = document.createElement('li');
    li.appendChild(p.canvas);
    lst.appendChild(li);
    var select = function () {
      if (li.className == "current") {
        return;
      }
      D.main_display = new StateDisplay(p.state);
      var cvs = $('canvas', $(li).prev())[0];
      if (cvs) {
        D.main_display.prev_canvas = cvs.getContext('2d').getImageData(0, 0, p.w, p.h);
      }
      D.main_display.render();
      D.main_display.preview = p;
      D.main_display.set_as_main();
      for (var i in lst.children) {
        lst.children[i].className = "";
      }
      li.className = "current";
      li.appendChild(mtool);
      li.insertBefore(actions, li.firstChild);
    }
    $(li).click(select);
    if (p.state == D.main_display.state) {
      select();
    }
    return select;
  },
  init: function () {
    $(document).mousemove(this.move);
    $(document).mouseup(this.up);
    var lst = document.getElementById('states');
    var mtool = document.getElementById('move_tool');
    var actions = document.getElementById('actions');
    D.states.forEach(U.append_from_state);
    var mleft = function () {
      mright(null, $(mtool.parentElement).prev()[0]);
      D.save();
      return false;
    }
    var mright = function (event, e) {
      var e = e || mtool.parentElement;
      if (!e.nextElementSibling) {
        return false;
      }
      var i = $(e).index();
      var s = D.states.splice(i, 1)[0];
      D.states.splice(i + 1, 0, s);
      lst.insertBefore(e.nextElementSibling, e);
      D.save();
      return false;
    }
    $("[href=#mleft]").click(mleft);
    $("[href=#mright]").click(mright);
    var delete_state = function () {
      var e = mtool.parentElement;
      if (e.parentElement.children.length == 1) {
        return false;
      }
      D.states.splice($(e).index(), 1);
      if (e.nextElementSibling) {
        $(e.nextElementSibling).trigger('click');
      } else {
        $(e).prev().trigger('click');
      }
      $(e).remove();
      D.save();
      return false;
    }
    $("[href=#delete]").click(delete_state);
    var duplicate = function () {
      var s = D.main_display.state.copy();
      D.states.push(s);
      U.append_from_state(s)();
      D.save();
      return false;
    }
    $("[href=#duplicate]").click(duplicate);
    $("[href=#new]").click(function () {
      var s = new State();
      D.states.push(s);
      U.append_from_state(s)();
      D.save();
      return false;
    });
    $("[href=#line]").click(function () {
      D.main_display.state.segments.push({
        start: [20, 200],
        end: [200, 200]
      });
      D.main_display.render();
      D.main_display.preview.render();
      U.setup_controls();
      return false;
    });
    $("[href=#circle]").click(function () {
      return false;
    });
    $("[href=#square]").click(function () {
      return false;
    });
    $("[href=#play]").click(function () {
      D.display_mode = true;
      var fps = 15;
      var e = $(lst).children(":first");
      e.click();
      var tick = function () {
        e = e.next();
        if (e.length) {
          e.click();
          setTimeout(tick, 1000 / fps);
        } else {
          D.display_mode = false;
        }
      }
      setTimeout(tick, 1000 / fps);
      return false;
    });
  },
  control_map: {},
  setup_controls: function () {
    if (D.display_mode) {
      return false;
    }
    var id = 1;
    this.control_map = {};
    var m = document.getElementById('main');
    $('.control').remove();
    var add_control = function (segment, pos) {
      var c = document.createElement('div');
      c.className = 'control';
      c.id = 'control' + id;
      id++;
      m.appendChild(c);
      var o = $(c).offset();
      o.left += pos[0] - 8;
      o.top += pos[1] - 8;
      $(c).offset(o);
      U.control_map[c.id] = [segment, pos];
      return c;
    }
    D.main_display.state.segments.forEach(function (s) {
      add_control(s, s.start);
      add_control(s, s.end);
    });
    $('.control').mousedown(this.down);
  },
  off: {
    left: 0,
    top: 0
  },
  down: function (e) {
    $('.active').removeClass('active');
    U.off.left = $(this).offset().left - e.pageX;
    U.off.top = $(this).offset().top - e.pageY;
    $(this).addClass('active');
  },
  up: function () {
    if ($("#trash").hasClass("hovering")) {
      $("#trash").removeClass("hovering");
      var c = $(".control.active");
      var i = D.main_display.state.segments.indexOf(U.control_map[c[0].id][0]);
      D.main_display.state.segments.splice(i, 1);
      D.main_display.render();
      U.setup_controls();
    }
    $('.active').removeClass('active');
    D.main_display.preview.render();
    D.save();
  },
  move: function (e) {
    var c = $(".control.active");
    if (c.length) {
      var o = c.offset();
      o.left = e.pageX + U.off.left;
      o.top = e.pageY + U.off.top;
      c.offset(o);
      var o = c.position();
      U.control_map[c[0].id][1][0] = o.left + 8;
      U.control_map[c[0].id][1][1] = o.top + 8;
      D.main_display.render();
      if (e.pageX > $("#trash").position().left && e.pageY < $("#trash").position().top + 250) {
        $("#trash").addClass("hovering");
      } else {
        $("#trash").removeClass("hovering");
      }
    }
  },
}

<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <div id="wrapper">
      <div id="trash" title="Drag lines here to delete them">Trash</div>
      <div id="wrapper2">
        <a href="#delete" title="Delete this frame">X</a>
        <div class="actions">
          <a href="#line" title="Line Tool" class="action"></a>
          <a href="#circle" title="Circle Tool" class="action disabled"></a>
          <a href="#square" title="Square Tool" class="action disabled"></a>
        </div>
        <div id="main"></div>
      </div>
    </div>
    <div id="actions">
      <a href="#duplicate" title="Duplicate">Dup</a>
    </div>
    <div id="move_tool">
      <a href="#mleft" title="move left">«</a>
      <a href="#mright" title="move right">»</a>
    </div>
    <ul id="states"></ul>
    <a href="#new" title="New blank frame">+</a>
    <a href="#play" title="Play animation" class="action"></a>
    <div id="footer">
      © 2010 | <a href="http://arcticpaint.com">Joseph Marshall</a>
    </div>
  </body>

</html>

a:link, a:visited { color:blue; text-decoration:none; border:1px solid #aaa; background:#eee; padding:0 5px; }
a:hover { border-color:#eee; }
body, html { margin:0; padding:0; font-family:Helvetica; }
#wrapper { background:#ddd; padding:20px 0; }
#trash { position:absolute; right:0; top:50px; background:url(/attach/trash.png); width:125px; height:202px; font-size:30px; color:#ccc; text-align:center; padding-top:30px; text-shadow:0 0 5px white; }
#trash.hovering { color:#d33; }
#wrapper2 { width:460px; margin:0 auto; height:300px; }
#main { margin-left:26px; }
canvas { border:1px solid #aaa; }
#states { margin:0 30px; padding:0; list-style-type:none; }
#states li { float:left; margin:20px 4px 20px 0; }
#states li.current { margin-top:0px; margin-bottom:1px; }
#states li canvas { width:80px; height:60px; cursor:pointer; }
#states li.current canvas { border-color:black; cursor:default; }
#move_tool { width:80px; text-align:center; color:#777; }
#actions { height:20px; background:#ddd; padding:0 4px; }
a[href="#delete"] { float:right; }
a[href="#delete"]:hover { background:red; color:white; }
.actions { float:left; width:32px; }
a.action { background:white url(/attach/icons.png) 0 0; width:16px; height:16px; padding:0; margin-bottom:4px; display:block; }
a.action[href="#circle"] { background-position:0 -16px; }
a.action[href="#square"] { background-position:0 -32px; }
a.action[href="#play"] { background-position:0 -48px; }
a.action.disabled { background-color:gray; cursor:default; }
a.action.disabled:hover { border-color:#aaa; }
#main, #main canvas { position:absolute; }
.control { border:2px solid black; border-radius:20px; background:rgba(255, 255, 255, .3); width:14px; height:14px; position:absolute; cursor:move; }
.active { border-color:blue; }
#footer { text-align:center; font-size:12px; color:#aaa; clear:both; float:left; margin-top:40px; width:100%; }
#footer a { border:0; color: #77f; }

Pop out