From 3f45495b8dc06e4b3bce8a309cfcf76629308907 Mon Sep 17 00:00:00 2001
From: Aadit Kamat <aadit.k12@gmail.com>
Date: Sun, 20 Sep 2020 18:31:38 +0800
Subject: [PATCH 1/3] Add animation speed slider

---
 src/index.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 5317efb..d5c6517 100644
--- a/src/index.js
+++ b/src/index.js
@@ -120,6 +120,7 @@ class App extends React.Component {
       padding: 0,
       dilation: 1,
       stride: 1,
+      speed: 1
     };
   }
 
@@ -143,6 +144,7 @@ class App extends React.Component {
     const padding = this.state.padding;
     const dilation = this.state.dilation;
     const stride = this.state.stride;
+    const speed = this.state.speed;
     const padded_input_size = input_size + padding * 2;
 
     // TODO: transposed convolution
@@ -180,6 +182,7 @@ class App extends React.Component {
       padded_input_size: padded_input_size,
       output_size: output_size,
       output: output,
+      speed: speed
     }, this.state);
 
     const onChange = (state_key) => {
@@ -255,6 +258,14 @@ class App extends React.Component {
                     onChange={onChange("stride")}
                     />
           </fieldset>
+          <fieldset>
+            <legend>Animation Speed:</legend>
+            <Slider min="1"
+                    max={50}
+                    value={speed}
+                    onChange={onChange("speed")}
+                    />
+          </fieldset>
         </form>
         <Viewport {...params} />
       </div>
@@ -279,7 +290,8 @@ class Viewport extends React.Component {
       hoverW: undefined,
       // What is our animation timestep?  A monotonically
       // increasing integer.
-      counter: 0
+      counter: 0,
+      speed: props.speed
     };
   }
 
@@ -292,6 +304,10 @@ class Viewport extends React.Component {
   componentDidMount() {
     this.interval = setInterval(this.tick.bind(this), 1000);  // 1 second
   }
+  componentDidUpdate()  {
+    clearInterval(this.interval);
+    this.interval = setInterval(this.tick.bind(this), parseInt(1000 / (this.props.speed)));
+  }
   componentWillUnmount() {
     clearInterval(this.interval);
   }

From e4cba7bc09a7523c371955d45ec1471d69f12f8b Mon Sep 17 00:00:00 2001
From: Aadit Kamat <aadit.k12@gmail.com>
Date: Sun, 20 Sep 2020 18:34:22 +0800
Subject: [PATCH 2/3] Remove speed from state

---
 src/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index d5c6517..b74b13b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -291,7 +291,6 @@ class Viewport extends React.Component {
       // What is our animation timestep?  A monotonically
       // increasing integer.
       counter: 0,
-      speed: props.speed
     };
   }
 

From a98e029dbeae0356b53eec7eedb80ec459d684c5 Mon Sep 17 00:00:00 2001
From: Aadit Kamat <aadit.k12@gmail.com>
Date: Sun, 20 Sep 2020 18:37:19 +0800
Subject: [PATCH 3/3] Remove unnecessary comma

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index b74b13b..31bab94 100644
--- a/src/index.js
+++ b/src/index.js
@@ -290,7 +290,7 @@ class Viewport extends React.Component {
       hoverW: undefined,
       // What is our animation timestep?  A monotonically
       // increasing integer.
-      counter: 0,
+      counter: 0
     };
   }