{"code":" <canvas id=\"c\"></canvas>\n\nuse mouse to broke net\n\n<div>\n    <a id=\"close\" href=\"\">&times;</a>\n  </div>\n  <p>\n    <br>\n  </p>\n</div>\n<style>\n* {\n    margin: 0;\n    overflow: hidden;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n}\nbody {\n    background: #F2F2F2;\n}\n#c {\n    display: block;\n    margin: 20px auto 0;\n}\n#info {\n    position: absolute;\n    left: -1px;\n    top: -1px;\n    width: auto;\n    max-width: 420px;\n    height: auto;\n    background: #f2f2f2;\n    border-bottom-right-radius: 10px;\n    border:1px solid #333;\n}\n#top {\n    background: #fff;\n    width: 100%;\n    height: auto;\n    position: relative;\n    border-bottom: 1px solid #eee;\n}\np {\n    font-family: Arial, sans-serif;\n    color: #666;\n    text-align: justify;\n    font-size: 16px;\n    margin: 10px 16px;\n}\n#github {\n  color:#3377ee;\n  font-family: Helvetica, Arial, sans-serif;\n  font-size: 19px;\n  display: block;\n  margin: 0 auto;\n  text-align: center;\n  text-decoration:none;\n}\n#net {\n  text-align:center;\n  white-space:nowrap;\n  font-size:19px;\n  background:rgba(0,0,0,0.1);\n  padding:8px 12px;\n  border-radius:8px;\n  display:block;\n  color:#888;\n}\n#net > span {\n  color:#3377ee;\n  font-family: Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  display: block;\n  margin: 0 auto;\n  text-align: center;\n  text-decoration:none;\n}\na {\n    font-family: sans-serif;\n    color: #444;\n    text-decoration: none;\n    font-size: 20px;\n}\n#site {\n    float: left;\n    margin: 10px;\n    color: #ff9900;\n  border-bottom: 1px dashed #ccc;\n  padding-bottom:3px\n}\n#site:hover {\n    color: #ffaa11;\n}\n#close {\n    float: right;\n    margin: 10px;\n}\n#p {\n    font-family: Verdana, sans-serif;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    color: #4099ff;\n    border: 1px dashed #4099ff;\n    padding: 4px 8px;\n}\n\n#irc {\n  display: block;\n   text-align: center;\n  margin-top:4px;\n    color: #333;\n}\n\n#irc a {\n  color: #3377ee;\n  font-size: 17px\n}\n\n#irc-info {\n  display: block;\n  text-align: center;\n  font-size: 14px;\n  margin-top: -10px;\n  color: #828282;\n  margin-bottom:4px\n}\n\n#new {\n  width: 100%;\n  text-align: center;\n  font-size: 18px;\n  font-family: Helvetica;\n}\n\n#new a {\n  font-size: 18px;\n  color: #4099ff;\n}\n</style>\n<script>\ndocument.getElementById('close').onmousedown = function(e) {\n  e.preventDefault();\n  document.getElementById('info').style.display = 'none';\n  return false;\n};\n\n// settings\n\nvar physics_accuracy  = 3,\n    mouse_influence   = 20,\n    mouse_cut         = 5,\n    gravity           = 1200,\n    cloth_height      = 30,\n    cloth_width       = 50,\n    start_y           = 20,\n    spacing           = 7,\n    tear_distance     = 60;\n\n\nwindow.requestAnimFrame =\n    window.requestAnimationFrame ||\n    window.webkitRequestAnimationFrame ||\n    window.mozRequestAnimationFrame ||\n    window.oRequestAnimationFrame ||\n    window.msRequestAnimationFrame ||\n    function (callback) {\n        window.setTimeout(callback, 1000 / 60);\n};\n\nvar canvas,\n    ctx,\n    cloth,\n    boundsx,\n    boundsy,\n    mouse = {\n        down: false,\n        button: 1,\n        x: 0,\n        y: 0,\n        px: 0,\n        py: 0\n    };\n\nvar Point = function (x, y) {\n\n    this.x      = x;\n    this.y      = y;\n    this.px     = x;\n    this.py     = y;\n    this.vx     = 0;\n    this.vy     = 0;\n    this.pin_x  = null;\n    this.pin_y  = null;\n    \n    this.constraints = [];\n};\n\nPoint.prototype.update = function (delta) {\n\n    if (mouse.down) {\n\n        var diff_x = this.x - mouse.x,\n            diff_y = this.y - mouse.y,\n            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);\n\n        if (mouse.button == 1) {\n\n            if (dist < mouse_influence) {\n                this.px = this.x - (mouse.x - mouse.px) * 1.8;\n                this.py = this.y - (mouse.y - mouse.py) * 1.8;\n            }\n\n        } else if (dist < mouse_cut) this.constraints = [];\n    }\n\n    this.add_force(0, gravity);\n\n    delta *= delta;\n    nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);\n    ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);\n\n    this.px = this.x;\n    this.py = this.y;\n\n    this.x = nx;\n    this.y = ny;\n\n    this.vy = this.vx = 0\n};\n\nPoint.prototype.draw = function () {\n\n    if (!this.constraints.length) return;\n\n    var i = this.constraints.length;\n    while (i--) this.constraints[i].draw();\n};\n\nPoint.prototype.resolve_constraints = function () {\n\n    if (this.pin_x != null && this.pin_y != null) {\n\n        this.x = this.pin_x;\n        this.y = this.pin_y;\n        return;\n    }\n\n    var i = this.constraints.length;\n    while (i--) this.constraints[i].resolve();\n\n    this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);\n    this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);\n};\n\nPoint.prototype.attach = function (point) {\n\n    this.constraints.push(\n        new Constraint(this, point)\n    );\n};\n\nPoint.prototype.remove_constraint = function (constraint) {\n\n    this.constraints.splice(this.constraints.indexOf(constraint), 1);\n};\n\nPoint.prototype.add_force = function (x, y) {\n\n    this.vx += x;\n    this.vy += y;\n};\n\nPoint.prototype.pin = function (pinx, piny) {\n    this.pin_x = pinx;\n    this.pin_y = piny;\n};\n\nvar Constraint = function (p1, p2) {\n\n    this.p1     = p1;\n    this.p2     = p2;\n    this.length = spacing;\n};\n\nConstraint.prototype.resolve = function () {\n\n    var diff_x  = this.p1.x - this.p2.x,\n        diff_y  = this.p1.y - this.p2.y,\n        dist    = Math.sqrt(diff_x * diff_x + diff_y * diff_y),\n        diff    = (this.length - dist) / dist;\n\n    if (dist > tear_distance) this.p1.remove_constraint(this);\n\n    var px = diff_x * diff * 0.5;\n    var py = diff_y * diff * 0.5;\n\n    this.p1.x += px;\n    this.p1.y += py;\n    this.p2.x -= px;\n    this.p2.y -= py;\n};\n\nConstraint.prototype.draw = function () {\n\n    ctx.moveTo(this.p1.x, this.p1.y);\n    ctx.lineTo(this.p2.x, this.p2.y);\n};\n\nvar Cloth = function () {\n\n    this.points = [];\n\n    var start_x = canvas.width / 2 - cloth_width * spacing / 2;\n\n    for (var y = 0; y <= cloth_height; y++) {\n\n        for (var x = 0; x <= cloth_width; x++) {\n\n            var p = new Point(start_x + x * spacing, start_y + y * spacing);\n\n            x != 0 && p.attach(this.points[this.points.length - 1]);\n            y == 0 && p.pin(p.x, p.y);\n            y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])\n\n            this.points.push(p);\n        }\n    }\n};\n\nCloth.prototype.update = function () {\n\n    var i = physics_accuracy;\n\n    while (i--) {\n        var p = this.points.length;\n        while (p--) this.points[p].resolve_constraints();\n    }\n\n    i = this.points.length;\n    while (i--) this.points[i].update(.016);\n};\n\nCloth.prototype.draw = function () {\n\n    ctx.beginPath();\n\n    var i = cloth.points.length;\n    while (i--) cloth.points[i].draw();\n\n    ctx.stroke();\n};\n\nfunction update() {\n\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n    cloth.update();\n    cloth.draw();\n\n    requestAnimFrame(update);\n}\n\nfunction start() {\n\n    canvas.onmousedown = function (e) {\n        mouse.button  = e.which;\n        mouse.px      = mouse.x;\n        mouse.py      = mouse.y;\n        var rect      = canvas.getBoundingClientRect();\n        mouse.x       = e.clientX - rect.left,\n        mouse.y       = e.clientY - rect.top,\n        mouse.down    = true;\n        e.preventDefault();\n    };\n\n    canvas.onmouseup = function (e) {\n        mouse.down = false;\n        e.preventDefault();\n    };\n\n    canvas.onmousemove = function (e) {\n        mouse.px  = mouse.x;\n        mouse.py  = mouse.y;\n        var rect  = canvas.getBoundingClientRect();\n        mouse.x   = e.clientX - rect.left,\n        mouse.y   = e.clientY - rect.top,\n        e.preventDefault();\n    };\n\n    canvas.oncontextmenu = function (e) {\n        e.preventDefault();\n    };\n\n    boundsx = canvas.width - 1;\n    boundsy = canvas.height - 1;\n\n    ctx.strokeStyle = '#888';\n  \n    cloth = new Cloth();\n  \n    update();\n}\n\nwindow.onload = function () {\n\n    canvas  = document.getElementById('c');\n    ctx     = canvas.getContext('2d');\n\n    canvas.width  = 560;\n    canvas.height = 350;\n\n    start();\n};\n</script>\n"}