diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/client/common/slider.component.js | 4 | ||||
| -rw-r--r-- | app/client/modules/morph/views/morph.app.js | 32 |
2 files changed, 20 insertions, 16 deletions
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js index 468debd..7252ca3 100644 --- a/app/client/common/slider.component.js +++ b/app/client/common/slider.component.js @@ -25,8 +25,6 @@ class Slider extends Component { let { name, opt } = this.props let old_value = opt[name] let new_value = e.target.value - console.log(this.props) - console.log(new_value, this.props.defaultValue) if (new_value === '') { new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2 } @@ -77,9 +75,7 @@ class Slider extends Component { min = 0 max = this.props.options.length-1 step = 1 - console.log('old', value) value = this.props.options.indexOf(value) - console.log('new', value, this.props.options[value]) } else { step = (this.props.max - this.props.min) / 100 text_value = parseFloat(value).toFixed(2) 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> |