From cf54ae4bd4d5708f255e054685cced3006a7c9c6 Mon Sep 17 00:00:00 2001
From: Matt Dinkel <dinkzilla@gmail.com>
Date: Fri, 14 Oct 2016 15:50:43 -0400
Subject: [PATCH 1/2] Add a reset button.

---
 index.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ee179cd..c19683a 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
 <!--
 
-It's been a couple of years since I made the original tearable cloth, and since then both me and Javscript have improved. I thought it deserved an update.
+It's been a couple of years since I made the original tearable cloth, and since then both me and Javascript have improved. I thought it deserved an update.
 
 It should be more efficient, wall collisions are greatly improved, and it has a slightly more stretchy, cloth-like texture. The code is better, a bit smaller and now in ES2015.
 
@@ -12,3 +12,7 @@
   <a href="https://github.com/Dissimulate/Tearable-Cloth">Github</a>
   <a href="https://twitter.com/abro_oks">@abro_oks</a>
 </div>
+<div>
+  <button onclick="zeroG()">Zero G!</button>
+  <button onclick="reset()">Reset</button>
+</div>

From 4086b5809203b8cfd82536d5f0a821396a21a708 Mon Sep 17 00:00:00 2001
From: Matt Dinkel <dinkzilla@gmail.com>
Date: Fri, 14 Oct 2016 16:22:45 -0400
Subject: [PATCH 2/2] Usability updates

Added functionality:
 - Reset the cloth
 - Set gravity to 0 (taken from Dissimulate's CodePen example)
 - Turn Zero G back off by pressing the button a second time
 - Canvas width and height are defined now (taken from Dissimulate's CodePen example)
 - Track release of mouse outside of the canvas
---
 Cloth.js | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/Cloth.js b/Cloth.js
index 61ef9aa..eb4b99b 100644
--- a/Cloth.js
+++ b/Cloth.js
@@ -8,8 +8,9 @@ window.requestAnimFrame =
     window.setTimeout(callback, 1e3 / 60)
   }
 
+const defaultGravity = 400
 let accuracy = 5
-let gravity = 400
+let gravity = defaultGravity
 let clothY = 28
 let clothX = 54
 let spacing = 8
@@ -20,8 +21,8 @@ let bounce = 0.5
 let canvas = document.getElementById('canvas')
 let ctx = canvas.getContext('2d')
 
-canvas.width = window.innerWidth
-canvas.height = window.innerHeight
+canvas.width = Math.min(700, window.innerWidth)
+canvas.height = 400
 
 ctx.strokeStyle = '#555'
 
@@ -170,7 +171,7 @@ class Constraint {
 }
 
 class Cloth {
-  constructor () {
+  constructor (free) {
     this.points = []
 
     let startX = canvas.width / 2 - clothX * spacing / 2
@@ -178,7 +179,7 @@ class Cloth {
     for (let y = 0; y <= clothY; y++) {
       for (let x = 0; x <= clothX; x++) {
         let point = new Point(startX + x * spacing, 20 + y * spacing)
-        y === 0 && point.pin(point.x, point.y)
+        !free && y === 0 && point.pin(point.x, point.y)
         x !== 0 && point.attach(this.points[this.points.length - 1])
         y !== 0 && point.attach(this.points[x + (y - 1) * (clothX + 1)])
 
@@ -220,13 +221,31 @@ canvas.onmousedown = (e) => {
 
 canvas.onmousemove = setMouse
 
-canvas.onmouseup = () => (mouse.down = false)
+window.onmouseup = () => (mouse.down = false)
 
 canvas.oncontextmenu = (e) => e.preventDefault()
 
 let cloth = new Cloth()
 
-;(function update (time) {
+function zeroG() {
+  if(gravity === 0){
+    gravity = defaultGravity
+    cloth = new Cloth(false)
+  } else {
+    gravity = 0
+    cloth = new Cloth(true)
+  }
+}
+
+function reset(){
+  if(gravity === 0){
+    cloth = new Cloth(true)
+  } else {
+    cloth = new Cloth(false)
+  }
+}
+
+(function update (time) {
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 
   cloth.update(0.016)