Add interpolate function from kmagiera with example. [WIP]

[DylanVann]

Interpolate function from #10 (comment) with extrapolation handling, examples, and documentation.

Closes #10 .

[DylanVann]

This (metro-with-symlinks) makes developing while experimenting with the examples a lot easier. With this you can use yarn link.

[kmagiera]

Thanks so much for working on this. I realise its a WIP but noticed one thing about your code and wanted to let you know

[kmagiera]

not entirely sure but this seems to be only correct if outputRange was sorted from min to max which is not a requirement. We only expect inputRange to be sorted that way.

I think it would be better to do something along these lines both for CLAMP and IDENTITY:

if (left === Extrapolate.EXTEND) {
} else if (left === Extrapolate.CLAMP) {
  output = cond(lessThan(value, inputRange[0]), outputRange[0], output);
} else if (left === Extrapolate.IDENTITY) {
  output = cond(lessThan(value, inputRange[0]), value, output);
}

similarly for "right"

[DylanVann]

Makes sense, I'll change it 👍

[kmagiera]

Also @DylanVann I see you have a TODO list here but I think it would make it a bit easier if we could merge parts of this PR before you are done.

As this PR only adds new functionality and does not change any existing behavior I suggest that we do as follows:

• I'd be ok with merging your example code and interpolate node (from derived.js) as is in the current state (assuming you address my inline comment). You could send it out in a separate PR if you'd like and keep this one to track your progress.
• I'd like for that other PR to remove changes related to metro-with-symlinks. My main concern is that I want example project to just work w/o some extra steps like running yarn link somewhere. I'm open to discussing it but to hold this discussion in separate PR
• Input validation is a must but I'm fine with having it added in a follow-up PR
• What I'd like to have is RN Animated style "interpolate" method added to Animated.Value. This should be rather simple and mainly want to have it for compatibility purposes. Would still recommend "functional" approach in the docs as it is more inline with the rest of the API
• As for "testing" this project still has no proper "setup" and would like to look into that some time soon. Would appreciate any help but as long as that setup is missing there is no point in writing tests only for the interpolation bit

[DylanVann]

@kmagiera I'll remove the metro stuff for another PR and update this to be interpolate + the examples.

What do you have in mind for input validation? Since the nodes are animated I don't know how we can validate that they're monotonically increasing for inputRange. (also I noticed I said outputRange should be monotonically increasing as well, but that isn't true, I'll remove it from the readme).

[DylanVann]

I used this with yarn link and it deleted my git repo 😢 , but we can discuss on another PR.

[DylanVann]

Done. Yeah I'd also be happy with merging and doing more cleanup/refactoring of the examples in other PRs.

[kmagiera]

Sorry I couldn't get back to it sooner.

This looks great! Will merge it right away. Just wanted to check with you if you maybe have time to send follow-up PRs with the things we discussed earlier.

[kmagiera]

As for input validation I agree that it may not be possible to validate if animated values are passed. But I believe that more common usecase is to just pass numbers there in which case we could validate. Also regardless on that we can verify that input and output range tables have at least 2 elements and both are of the same length.

[DylanVann]

@kmagiera I'll do a PR for:

• Input validation:
  • Length of arrays.
  • Monotonically increasing if we're able to check.
• Interpolate method.

Would you be opposed to using eslint with standard as well? There are a bunch of unused imports in the code but no checking of them.