Add round and color nodes (#15)

This PR adds new "round" and "color" nodes.

Color nodes can be used to map to color props in view (e.g. backgroundColor)
Round is required for the color math to function properly (each color component needs to be an integer).

Added demo app where you can pan view around that changes color depending on the position on HSV palette.

Author: kmagiera

Example/App.js

@@ -7,6 +7,7 @@ import Snappable from './snappable';
 import ImageViewer from './imageViewer';
 import Test from './test';
 import Interpolate from './src/interpolate';
+import Colors from './colors';
 
 YellowBox.ignoreWarnings([
   'Warning: isMounted(...) is deprecated',
@@ -20,6 +21,7 @@ const SCREENS = {
   Test: { screen: Test, title: 'Test' },
   ImageViewer: { screen: ImageViewer, title: 'Image Viewer' },
   Interpolate: { screen: Interpolate, title: 'Interpolate' },
+  Colors: { screen: Colors, title: 'Colors' },
 };
 
 class MainScreen extends React.Component {

Example/colors/index.js

@@ -0,0 +1,161 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, Dimensions } from 'react-native';
+import { PanGestureHandler, State } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+// setInterval(() => {
+//   let iters = 1e8,
+//     sum = 0;
+//   while (iters-- > 0) sum += iters;
+// }, 300);
+
+const {
+  set,
+  cond,
+  eq,
+  add,
+  multiply,
+  lessThan,
+  abs,
+  modulo,
+  round,
+  interpolate,
+  divide,
+  sub,
+  color,
+  Value,
+  event,
+} = Animated;
+
+const PICKER_WIDTH = Dimensions.get('window').width;
+const PICKER_HEIGHT = Dimensions.get('window').height;
+
+function match(condsAndResPairs, offset = 0) {
+  if (condsAndResPairs.length - offset === 1) {
+    return condsAndResPairs[offset];
+  } else if (condsAndResPairs.length - offset === 0) {
+    return undefined;
+  }
+  return cond(
+    condsAndResPairs[offset],
+    condsAndResPairs[offset + 1],
+    match(condsAndResPairs, offset + 2)
+  );
+}
+
+function colorHSV(h /* 0 - 360 */, s /* 0 - 1 */, v /* 0 - 1 */) {
+  // Converts color from HSV format into RGB
+  // Formula explained here: https://www.rapidtables.com/convert/color/hsv-to-rgb.html
+  const c = multiply(v, s);
+  const hh = divide(h, 60);
+  const x = multiply(c, sub(1, abs(sub(modulo(hh, 2), 1))));
+
+  const m = sub(v, c);
+
+  const colorRGB = (r, g, b) =>
+    color(
+      round(multiply(255, add(r, m))),
+      round(multiply(255, add(g, m))),
+      round(multiply(255, add(b, m)))
+    );
+
+  return match([
+    lessThan(h, 60),
+    colorRGB(c, x, 0),
+    lessThan(h, 120),
+    colorRGB(x, c, 0),
+    lessThan(h, 180),
+    colorRGB(0, c, x),
+    lessThan(h, 240),
+    colorRGB(0, x, c),
+    lessThan(h, 300),
+    colorRGB(x, 0, c),
+    colorRGB(c, 0, x) /* else */,
+  ]);
+}
+
+export default class Example extends Component {
+  static navigationOptions = {
+    title: 'Colors Example',
+  };
+  constructor(props) {
+    super(props);
+
+    const dragX = new Value(0);
+    const dragY = new Value(0);
+    const state = new Value(-1);
+
+    this._onGestureEvent = event([
+      {
+        nativeEvent: { translationX: dragX, translationY: dragY, state: state },
+      },
+    ]);
+
+    const offsetX = new Value(PICKER_WIDTH / 2);
+    this._transX = cond(
+      eq(state, State.ACTIVE),
+      add(offsetX, dragX),
+      set(offsetX, add(offsetX, dragX))
+    );
+
+    const offsetY = new Value(200);
+    this._transY = cond(
+      eq(state, State.ACTIVE),
+      add(offsetY, dragY),
+      set(offsetY, add(offsetY, dragY))
+    );
+
+    const h = interpolate(this._transX, {
+      inputRange: [0, PICKER_WIDTH],
+      outputRange: [0, 360],
+      extrapolate: 'clamp',
+    });
+    const s = interpolate(this._transY, {
+      inputRange: [0, PICKER_HEIGHT],
+      outputRange: [1, 0],
+      extrapolate: 'clamp',
+    });
+    const v = 1;
+    this._color = colorHSV(h, s, v);
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <PanGestureHandler
+          maxPointers={1}
+          onGestureEvent={this._onGestureEvent}
+          onHandlerStateChange={this._onGestureEvent}>
+          <Animated.View
+            style={[
+              styles.box,
+              {
+                backgroundColor: this._color,
+                transform: [
+                  { translateX: this._transX, translateY: this._transY },
+                ],
+              },
+            ]}
+          />
+        </PanGestureHandler>
+      </View>
+    );
+  }
+}
+
+const CIRCLE_SIZE = 70;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+  box: {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    marginLeft: -CIRCLE_SIZE / 2,
+    marginTop: -CIRCLE_SIZE / 2,
+    borderRadius: CIRCLE_SIZE / 2,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});

README.md

@@ -278,6 +278,14 @@ exp(node)
 
 Returns an exponent of the value of the given node.
 
+### `round`
+
+```js
+round(node)
+```
+
+Returns node that rounds input value to the nearest integer.
+
 ---
 ### `lessThan`
 
@@ -444,6 +452,17 @@ Extrapolate.IDENTITY; // Will return the input value if the input value is out o
 
 Maps an input value within a range to an output value within a range. Also supports different types of extrapolation for when the value falls outside the range.
 
+---
+### `color`
+
+```js
+color(red, green, blue, alpha)
+```
+
+Creates a color node in RGBA format. Where first three input nodes should have integer values in range 0-255 and corresponds to color components Red, Green and Blue respectively. Last input node should have value between 0 and 1 and represents alpha channel (value `1` means fully opaque and `0` completely transparent). Alpha parameter can be ommited, then `1` (fully opaque) is used as a default.
+
+The returned node can be mapped to view properties that represents color (e.g. [`backgroundColor`](https://facebook.github.io/react-native/docs/view-style-props.html#backgroundcolor)).
+
 <!-- Anims -->
 
 ---

android/src/main/java/com/swmansion/reanimated/nodes/OperatorNode.java

@@ -107,6 +107,12 @@ public double eval(Double x) {
       return Math.exp(x);
     }
   };
+  private static final Operator ROUND = new SingleOperator() {
+    @Override
+    public double eval(Double x) {
+      return Math.round(x);
+    }
+  };
 
   // logical
   private static final Operator AND = new Operator() {
@@ -159,7 +165,7 @@ public boolean eval(Double x, Double y) {
   private static final Operator GREATER_THAN = new CompOperator() {
     @Override
     public boolean eval(Double x, Double y) {
-      return x < y;
+      return x > y;
     }
   };
   private static final Operator LESS_OR_EQ = new CompOperator() {
@@ -211,6 +217,8 @@ public OperatorNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
       mOperator = COS;
     } else if ("exp".equals(op)) {
       mOperator = EXP;
+    } else if ("round".equals(op)) {
+      mOperator = ROUND;
     } else if ("and".equals(op)) {
       mOperator = AND;
     } else if ("or".equals(op)) {

ios/Nodes/REAOperatorNode.m

@@ -48,6 +48,7 @@ - (instancetype)initWithID:(REANodeID)nodeID config:(NSDictionary<NSString *,id>
             @"sin": REA_SINGLE(sin(a)),
             @"cos": REA_SINGLE(cos(a)),
             @"exp": REA_SINGLE(exp(a)),
+            @"round": REA_SINGLE(round(a)),
 
             // logical
             @"and": ^(NSArray<REANode *> *inputNodes) {

src/ConfigHelper.js

@@ -8,6 +8,16 @@ const { ReanimatedModule } = NativeModules;
 let NATIVE_PROPS_WHITELIST = {
   opacity: true,
   transform: true,
+  /* colors */
+  backgroundColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  backgroundColor: true,
+  borderStartColor: true,
+  borderTopColor: true,
   /* ios styles */
   shadowOpacity: true,
   shadowRadius: true,

src/base.js

@@ -25,6 +25,7 @@ export const sqrt = operator('sqrt');
 export const sin = operator('sin');
 export const cos = operator('cos');
 export const exp = operator('exp');
+export const round = operator('round');
 export const lessThan = operator('lessThan');
 export const eq = operator('eq');
 export const greaterThan = operator('greaterThan');

src/derived.js

@@ -1,13 +1,16 @@
+import { Platform } from 'react-native';
 import {
   cond,
   lessThan,
+  greaterThan,
   multiply,
   block,
   defined,
   sub,
   set,
   add,
   divide,
+  round,
 } from './base';
 import AnimatedValue from './core/AnimatedValue';
 import { adapt } from './utils';
@@ -38,6 +41,29 @@ export const diff = function(v) {
   ]);
 };
 
+export const color = function(r, g, b, a = 1) {
+  if (a instanceof AnimatedValue) {
+    a = round(multiply(a, 255));
+  } else {
+    a = Math.round(a * 255);
+  }
+  const color = add(
+    multiply(a, 1 << 24),
+    multiply(r, 1 << 16),
+    multiply(g, 1 << 8),
+    b
+  );
+  if (Platform.OS === 'android') {
+    // on Android color is represented as signed 32 bit int
+    return cond(
+      lessThan(color, (1 << 31) >>> 0),
+      color,
+      sub(color, Math.pow(2, 32))
+    );
+  }
+  return color;
+};
+
 export const acc = function(v) {
   const acc = new AnimatedValue(0);
   return set(acc, add(acc, v));
@@ -82,9 +108,9 @@ const interpolateInternal = function(
 };
 
 export const Extrapolate = {
-  EXTEND: 'EXTEND',
-  CLAMP: 'CLAMP',
-  IDENTITY: 'IDENTITY',
+  EXTEND: 'extend',
+  CLAMP: 'clamp',
+  IDENTITY: 'identity',
 };
 
 export const interpolate = function(value, config) {