Fire JS Bin - Magnetic

Magnetic = new(function () {
  function z(a) {
    var b = new Magnet;
    b.position.x = a.x;
    b.position.y = a.y;
    f.push(b);
    a = b.position;
    for (b = 0; b < F; b++) {
      var c = new Particle;
      c.position.x = a.x;
      c.position.y = a.y;
      c.shift.x = a.x;
      c.shift.y = a.y;
      c.color = k[g].particleFill;
      q.push(c)
    }
  }
  function G(a) {
    n = a.clientX - (window.innerWidth - i) * 0.5;
    o = a.clientY - (window.innerHeight - j) * 0.5
  }
  function H(a) {
    a.preventDefault();
    A()
  }
  function A() {
    w = true;
    if ((new Date).getTime() - x < 300) {
      z({
        x: n,
        y: o
      });
      x = 0
    }
    x = (new Date).getTime();
    for (var a = 0, b = f.length; a < b; a++) {
      magnet =
      f[a];
      if (B(magnet.position, {
        x: n,
        y: o
      }) < magnet.orbit * 0.5) {
        magnet.dragging = true;
        break
      }
    }
  }
  function I() {
    w = false;
    for (var a = 0, b = f.length; a < b; a++) {
      magnet = f[a];
      magnet.dragging = false
    }
  }
  function J(a) {
    if (a.keyCode == 37) s(-1);
    else a.keyCode == 39 && s(1)
  }
  function K(a) {
    if (a.touches.length == 1) {
      a.preventDefault();
      n = a.touches[0].pageX - (window.innerWidth - i) * 0.5;
      o = a.touches[0].pageY - (window.innerHeight - j) * 0.5;
      A()
    }
  }
  function L(a) {
    if (a.touches.length == 1) {
      a.preventDefault();
      n = a.touches[0].pageX - (window.innerWidth - i) * 0.5;
      o = a.touches[0].pageY - (window.innerHeight - j) * 0.5
    }
  }
  function M() {
    w = false;
    for (var a = 0, b = f.length; a < b; a++) {
      magnet = f[a];
      magnet.dragging = false
    }
  }
  function N(a) {
    a.preventDefault();
    s(-1)
  }
  function O(a) {
    a.preventDefault();
    s(1)
  }
  function s(a) {
    g += a;
    g = g < 0 ? k.length - 1 : g;
    g = g > k.length - 1 ? 0 : g;
    a = 0;
    for (var b = q.length; a < b; a++) q[a].color = k[g].particleFill
  }
  function C() {
    i = r ? window.innerWidth : 800;
    j = r ? window.innerHeight : 550;
    e.width = i;
    e.height = j;
    var a = (window.innerWidth - i) * 0.5,
        b = (window.innerHeight - j) * 0.5;
    e.style.position = "absolute";
    e.style.left = a + "px";
    e.style.top = b + "px";
    t.style.position = "absolute";
    t.style.left = a + "px";
    t.style.top = b - 20 + "px"
  }
  function P() {
    if (k[g].useFade) {
      d.fillStyle = k[g].fadeFill;
      d.fillRect(0, 0, d.canvas.width, d.canvas.height)
    } else d.clearRect(0, 0, e.width, e.height);
    var a, b, c, h, D, u;
    a = -1;
    h = 0;
    for (u = f.length; h < u; h++) {
      b = f[h];
      if (b.dragging) {
        b.position.x += (n - b.position.x) * 0.2;
        b.position.y += (o - b.position.y) * 0.2
      } else if (b.position.x < 0 || b.position.y < 0 || b.position.x > i || b.position.y > j) a = h;
      b.size += (b.connections / 3 - b.size) * 0.05;
      b.size = Math.max(b.size, 2);
      c = d.createRadialGradient(b.position.x, b.position.y, 0, b.position.x, b.position.y, b.size * 10);
      c.addColorStop(0, k[g].glowA);
      c.addColorStop(1, k[g].glowB);
      d.beginPath();
      d.fillStyle = c;
      d.arc(b.position.x, b.position.y, b.size * 10, 0, Math.PI * 2, true);
      d.fill();
      d.beginPath();
      d.fillStyle = c;
      d.arc(b.position.x, b.position.y, b.size, 0, Math.PI * 2, true);
      d.fill();
      b.connections = 0
    }
    a != -1 && f.length > 1 && f.splice(a, 1);
    c = 0;
    for (D = q.length; c < D; c++) {
      a = q[c];
      var y = -1,
          E = -1,
          l = null,
          v = {
          x: 0,
          y: 0
          };
      h = 0;
      for (u = f.length; h < u; h++) {
        b = f[h];
        y = B(a.position, b.position) - b.orbit * 0.5;
        if (a.magnet != b) {
          var m = b.position.x - a.position.x;
          if (m > -p && m < p) v.x += m / p;
          m = b.position.y - a.position.y;
          if (m > -p && m < p) v.y += m / p
        }
        if (l == null || y < E) {
          E = y;
          l = b
        }
      }
      if (a.magnet == null || a.magnet != l) a.magnet = l;
      l.connections += 1;
      a.angle += a.speed;
      a.shift.x += (l.position.x + v.x * 6 - a.shift.x) * a.speed;
      a.shift.y += (l.position.y + v.y * 6 - a.shift.y) * a.speed;
      a.position.x = a.shift.x + Math.cos(c + a.angle) * a.orbit * a.force;
      a.position.y = a.shift.y + Math.sin(c + a.angle) * a.orbit * a.force;
      a.position.x = Math.max(Math.min(a.position.x, i - a.size / 2), a.size / 2);
      a.position.y = Math.max(Math.min(a.position.y, j - a.size / 2), a.size / 2);
      a.orbit += (l.orbit - a.orbit) * 0.1;
      d.beginPath();
      d.fillStyle = a.color;
      d.arc(a.position.x, a.position.y, a.size / 2, 0, Math.PI * 2, true);
      d.fill()
    }
  }
  function B(a, b) {
    var c = b.x - a.x,
        h = b.y - a.y;
    return Math.sqrt(c * c + h * h)
  }
  var r = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1,
      i = r ? window.innerWidth : 800,
      j = r ? window.innerHeight : 550,
      F = 20,
      p = 300,
      e, d, t, q = [],
      f = [],
      n = window.innerWidth - i,
      o = window.innerHeight - j,
      w = false,
      x = 0,
      g = 0,
      k = [{
      glowA: "rgba(233,143,154,0.3)",
      glowB: "rgba(0,143,154,0.0)",
      particleFill: "#ffffff",
      fadeFill: "rgba(22,22,22,.6)",
      useFade: false
    },
    {
      glowA: "rgba(0,200,250,0.3)",
      glowB: "rgba(0,200,250,0.0)",
      particleFill: "#ffffff",
      fadeFill: "rgba(22,22,22,.6)",
      useFade: true
    },
    {
      glowA: "rgba(230,0,0,0.3)",
      glowB: "rgba(230,0,0,0.0)",
      particleFill: "#ffffff",
      fadeFill: "rgba(11,11,11,.6)",
      useFade: true
    },
    {
      glowA: "rgba(0,230,0,0.3)",
      glowB: "rgba(0,230,0,0.0)",
      particleFill: "rgba(0,230,0,0.7)",
      fadeFill: "rgba(22,22,22,.6)",
      useFade: true
    },
    {
      glowA: "rgba(0,0,0,0.3)",
      glowB: "rgba(0,0,0,0.0)",
      particleFill: "#333333",
      fadeFill: "rgba(255,255,255,.6)",
      useFade: true
    },
    {
      glowA: "rgba(0,0,0,0.0)",
      glowB: "rgba(0,0,0,0.0)",
      particleFill: "#333333",
      fadeFill: "rgba(255,255,255,.2)",
      useFade: true
    },
    {
      glowA: "rgba(230,230,230,0)",
      glowB: "rgba(230,230,230,0.0)",
      particleFill: "#ffffff",
      fadeFill: "",
      useFade: false
    }];
  this.init = function () {
    e = document.getElementById("world");
    t = document.getElementById("seeMore");
    if (e && e.getContext) {
      d = e.getContext("2d");
      if (r) e.style.border = "none";
      document.addEventListener("mousemove", G, false);
      e.addEventListener("mousedown", H, false);
      document.addEventListener("mouseup", I, false);
      document.addEventListener("keydown", J, false);
      window.addEventListener("resize", C, false);
      e.addEventListener("touchstart", K, false);
      document.addEventListener("touchmove", L, false);
      document.addEventListener("touchend", M, false);
      document.getElementById("keyboardLeft").addEventListener("click", N, false);
      document.getElementById("keyboardRight").addEventListener("click", O, false);
      for (var a = 0; a < 4; a++) z({
        x: (i - 300) * 0.5 + Math.random() * 300,
        y: (j - 300) * 0.5 + Math.random() * 300
      });
      C();
      setInterval(P, 1E3 / 30)
    }
  }
});

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="description" content="Particles orbit around magnets which can be dragged around to create currents. The HTML5 canvas element is used for visual output." /> 
    <meta name="keywords" content="hakim, elhattab, hakim el hattab, hakim elhattab, interactive, developer, flash, html5, canvas, web, experiments" /> 
    <meta name="author" content="Hakim El Hattab" /> 
    <meta http-equiv="X-UA-Compatible" content="chrome=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes"><meta name = "viewport" content = "width = 670">    
    <title>Magnetic - an experiment with particle currents using HTML5.</title> 
  </head> 
  <body>
    <div id="panel"> 
      <h2><a href="http://hakim.se/experiments/">Experiments</a> / Magnetic / 02</h2> 
      <p>Particles orbit around magnets which can be dragged around.<br/><b>Double click</b> to add more magnets.<br/>Change skin with keyboard <b><a id="keyboardLeft" href="#">left</a> / <a id="keyboardRight" href="#">right</a></b>.</p> 
    </div> 
    <div id="seeMore"><a href="http://hakim.se/experiments/">See more at hakim.se/experiments</a></div> 
    <canvas id="world"><p class="noCanvas">You need a <a href="http://www.google.com/chrome">modern browser</a> to view this.</p></canvas> 
  </body> 
</html>

html { color:#000; background:#222222; }
a { cursor:pointer; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
li { list-style:none; }
caption, th { text-align:left; }
q:before, q:after { content:''; }
abbr, acronym { border:0; font-variant:normal; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; outline-style:none; outline-width:0pt; }
legend { color:#000; }
a:focus, object, h1, h2, h3, h4, h5, h6 { -moz-outline-style:none; border:0px; }
strong { font-weight:bold; }

@font-face {
  font-family:Delicious; font-weight:bold; src:url('/attach/Delicious-Bold.otf');
}
body { overflow:hidden; font-family:Georgia, Helvetica, Arial, sans-serif; color:#333333; font-size:11px; }
a, a:hover { transition:all .08s linear; -o-transition:all .08s linear; -moz-transition:all .08s linear; -webkit-transition:all .08s linear; padding:1px; }
p.noCanvas { color:#999999; font-size:24px; text-align:center; margin-top:150px; }
#panel { position:absolute; margin:5px; padding:5px; z-index:99; background-color:#FFFECF; border:1px solid #e1e0af; }
#panel a { color:#333333; background-color:#FFFECF; text-decoration:underline; }
#panel a:hover { color:#FFFECF; background-color:#333333; }
#panel a.versionLink { padding:1px; text-decoration:underline; }
#panel a.versionLink.selected { color:#888888; text-decoration:none; }
#panel p { padding:0px 5px 5px 5px; line-height:1.6em; }
#panel h2 { font-size:20px; font-weight:bold; font-family:Delicious, Helvetica, sans-serif; padding:5px 5px 5px 5px; }
#chromeBadge { position:absolute; bottom:0; right:0; padding:4px; }
#sharing { background-color:#FFFECF; position:absolute; top:0; right:0; margin:5px; padding:7px 0 4px 10px; z-index:98; border:1px solid #e1e0af; }
#facebook_button { float:left; }
#retweet_button { float:left; }
#flattr_button { float:right; margin:1px 10px 0 4px; }

body, html { background-color:#222222; }
canvas { border:6px #333333 solid; background-color:#000000; }
#seeMore { font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#999999; width:812px; text-align:right; }
#seeMore a { font-family:Arial, Helvetica, sans-serif; font-size:10px; font-style:italic; text-decoration:none; color:#999999; float:right; }
#seeMore a:hover { color:#ffffff; background-color: #000000; }