offsets

1 files changed, 20 insertions, 12 deletions

diff --git a/app/client/modules/morph/views/morph.app.js b/app/client/modules/morph/views/morph.app.js
index 38cd121..e1480ba 100644
--- a/app/client/modules/morph/views/morph.app.js
+++ b/app/client/modules/morph/views/morph.app.js
@@ -24,9 +24,14 @@ class MorphResults extends Component {
       a: "",
       b: "",
       a_offset: 0,
+      a_duration: 1,
+      a_pos: 0,
       b_offset: 0,
+      b_duration: 1,
+      b_pos: 0,
       steps: 16,
       dilate: 2,
+      frames: 32,
       smooth: true,
       mode: 'mix',
     }
@@ -43,13 +48,13 @@ class MorphResults extends Component {
       sequence.name.split("_").slice(0, 3).join(" ") + "~ (" + sequence.count + ")",
       sequence.name
     ])
+    const sequenceLookup = sequences.reduce((a,b) => (a[b.name]=b,a), {})
 
-    console.log(sequence_options)
-    const totalLength = (this.state.steps * this.state.dilate) / 25
+    const totalLength = this.state.frames / 25
     let lengthWarning
     if (this.state.steps > 64) {
       lengthWarning = (
-        <span><br/>warning, this may take a while</span>
+        <span><br/>warning, this will take a while</span>
       )
     }
 
@@ -65,13 +70,13 @@ class MorphResults extends Component {
                 title="Starting sequence"
                 value={this.state.a}
                 options={sequence_options}
-                onChange={key => this.setState({ a: key })}
+                onChange={(name, key) => this.setState({ a: key, a_duration: sequenceLookup[key].count, a_pos: 0, a_offset: 0 })}
               />
               <Slider
                 title="Offset"
-                value={this.state.a_offset}
+                value={this.state.a_pos}
                 min={0} max={1} step={0.01}
-                onChange={key => this.setState({ a_offset: key })}
+                onChange={key => this.setState({ a_pos: key, a_offset: key * (this.state.a_duration - this.state.frames) })}
               />
             </Group>
 
@@ -80,13 +85,13 @@ class MorphResults extends Component {
                 title="Ending sequence"
                 value={this.state.b}
                 options={sequence_options}
-                onChange={key => this.setState({ b: key })}
+                onChange={(name, key) => this.setState({ b: key, b_duration: sequenceLookup[key].count, b_pos: 0, b_offset: 0 })}
               />
               <Slider
                 title="Offset"
-                value={this.state.b_offset}
+                value={this.state.b_pos}
                 min={0} max={1} step={0.01}
-                onChange={key => this.setState({ b_offset: key })}
+                onChange={key => this.setState({ b_pos: key, b_offset: key * (this.state.b_duration - this.state.frames)  })}
               />
             </Group>
 
@@ -102,14 +107,14 @@ class MorphResults extends Component {
                 title="Steps"
                 value={this.state.steps}
                 options={[2,4,8,16,32,64,128,256]}
-                onChange={key => this.setState({ steps: key })}
+                onChange={key => this.setState({ steps: key, frames: (key * this.state.dilate) })}
               />
               <Slider
                 type="list"
                 title="Dilate"
                 value={this.state.dilate}
-                options={[2,4,8,16,32]}
-                onChange={key => this.setState({ dilate: key })}
+                options={[1,2,4,8,16,32]}
+                onChange={key => this.setState({ dilate: key, frames: (this.state.steps * key) })}
               />
               <Checkbox
                 title="Smooth"
@@ -125,6 +130,9 @@ class MorphResults extends Component {
               <Param title="Total length">
                 {totalLength.toFixed(1) + " seconds"}
               </Param>
+              <Param title="Total frames">
+                {this.state.frames + " frames"}
+              </Param>
               {lengthWarning}
               <br />
             </Group>