added animation types: linear, once

Author: kunal-mohta

js/core.js

@@ -114,7 +114,8 @@ const PREAMBLE_RE = /^\s*(\w+)\s*:\s*(.+)*$/;
 const POS_INTEGER_RE = /^\d+$/;
 const DURATION_RE = /^(\d+(\.\d+)?)\s*(s|ms)?$/;
 
-const PREAMBLE_KEYS = ['depth', 'duration'];
+const PREAMBLE_KEYS = ['depth', 'duration', 'animationType'];
+const ANIMATION_TYPES = ['once', 'linear', 'bounce'];
 const MAX_LEVEL = 50;
 const TIMEOUT_MILLIS = 1000;
 
@@ -125,8 +126,21 @@ function bounce(t) {
  return 0.5 - Math.cos(a) * 0.5;
 }
 
-function lerp(min, max, t) {
- t = bounce(t);
+function linear(t) {
+ return t;
+}
+
+function lerp(min, max, t, animType) {
+ switch(animType){
+ case "linear": t = linear(t);
+ break;
+
+ case "bounce": t = bounce(t);
+ break;
+
+ default: t = bounce(t);
+ break;
+ }
  return min + t * (max - min);
 }
 
@@ -956,7 +970,8 @@ class Interpreter {
  }
 
  visitAnimRange(node) {
- return lerp(node.start, node.end, this.t);
+ const type = this.phraseBook['%preamble'].animationType;
+ return lerp(node.start, node.end, this.t, type);
  }
 
  interpret() {
@@ -1021,6 +1036,14 @@ function parsePreamble(preamble, key, value, lineno) {
  }
  }
  }
+ else if (key === 'animationType') {
+ if(ANIMATION_TYPES.indexOf(value) !== -1){
+ preamble[key] = value;
+ }
+ else{
+ throw new Error(`Line ${lineno}: unknown value of property animationType`);
+ }
+ }
 }
 
 function parsePhraseBook(s) {

js/editor.js

@@ -249,17 +249,59 @@ class Editor extends Component {
  return 2.0;
  }
 
+ animationType(){
+ const type = this.phraseBook['%preamble'].animationType;
+ if(type !== undefined) return type;
+ else return "bounce";
+ }
+
  onDoFrame() {
  if (this.state.playing) {
- try {
- const elapsedSeconds = (Date.now() - this.startTime) / 1000.0;
- const durationSeconds = this.durationSeconds();
- const t = (elapsedSeconds / durationSeconds) % 1.0;
- const result = generateString(this.phraseBook, 'root', {}, this.state.seed, t);
- this.setState({ frame: this.state.frame + 1, result: result, debugOutput: '' });
- window.requestAnimationFrame(this.onDoFrame.bind(this));
- } catch (e) {
- this.setState({ frame: 0, playing: false, debugOutput: e.message });
+ const animationType = this.animationType();
+
+ switch(animationType){
+ case "once": 
+ try {
+ const elapsedSeconds = (Date.now() - this.startTime) / 1000.0;
+ const durationSeconds = this.durationSeconds();
+ const t = (elapsedSeconds / durationSeconds) % 1.0;
+
+ if(durationSeconds <= elapsedSeconds) return false;
+ else{
+ const result = generateString(this.phraseBook, 'root', {}, this.state.seed, t);
+ this.setState({ frame: this.state.frame + 1, result: result, debugOutput: '' });
+ window.requestAnimationFrame(this.onDoFrame.bind(this));
+ }
+ } catch (e) {
+ this.setState({ frame: 0, playing: false, debugOutput: e.message });
+ }
+ break;
+
+ case "linear":
+ try {
+ const elapsedSeconds = (Date.now() - this.startTime) / 1000.0;
+ const durationSeconds = this.durationSeconds();
+ const t = (elapsedSeconds / durationSeconds) % 1.0;
+ const result = generateString(this.phraseBook, 'root', {}, this.state.seed, t);
+ this.setState({ frame: this.state.frame + 1, result: result, debugOutput: '' });
+ window.requestAnimationFrame(this.onDoFrame.bind(this));
+ } catch (e) {
+ this.setState({ frame: 0, playing: false, debugOutput: e.message });
+ }
+ break;
+
+ case "bounce":
+ try {
+ const elapsedSeconds = (Date.now() - this.startTime) / 1000.0;
+ const durationSeconds = this.durationSeconds();
+ const t = (elapsedSeconds / durationSeconds) % 1.0;
+ const result = generateString(this.phraseBook, 'root', {}, this.state.seed, t);
+ this.setState({ frame: this.state.frame + 1, result: result, debugOutput: '' });
+ window.requestAnimationFrame(this.onDoFrame.bind(this));
+ } catch (e) {
+ this.setState({ frame: 0, playing: false, debugOutput: e.message });
+ }
+ break;
  }
  }
  }