add mobile touch support

Author: transitive-bullshit

src/fluid-animation.js

@@ -123,6 +123,34 @@ export default class FluidAnimation {
     this._pointers[0].down = false
   }
 
+  onTouchStart = (e) => {
+    for (let i = 0; i < e.touches.length; ++i) {
+      this._pointers[i].down = true
+      this._pointers[i].color = [
+        Math.random() + 0.2,
+        Math.random() + 0.2,
+        Math.random() + 0.2
+      ]
+    }
+  }
+
+  onTouchMove = (e) => {
+    for (let i = 0; i < e.touches.length; ++i) {
+      const touch = e.touches[i]
+      this._pointers[i].moved = this._pointers[i].down
+      this._pointers[i].dx = (touch.clientX - this._pointers[i].x) * 10.0
+      this._pointers[i].dy = (touch.clientY - this._pointers[i].y) * 10.0
+      this._pointers[i].x = touch.clientX
+      this._pointers[i].y = touch.clientY
+    }
+  }
+
+  onTouchEnd = (e) => {
+    for (let i = 0; i < e.touches.length; ++i) {
+      this._pointers[i].down = false
+    }
+  }
+
   _initPrograms() {
     const gl = this._gl
     const ext = this._ext

src/react-fluid-animation.js

@@ -74,6 +74,9 @@ class ReactFluidAnimation extends Component {
           onMouseDown={this._onMouseDown}
           onMouseMove={this._onMouseMove}
           onMouseUp={this._onMouseUp}
+          onTouchStart={this._onTouchStart}
+          onTouchMove={this._onTouchMove}
+          onTouchEnd={this._onTouchEnd}
           style={{
             width: '100%',
             height: '100%'
@@ -106,6 +109,21 @@ class ReactFluidAnimation extends Component {
     this._animation.onMouseUp(event.nativeEvent)
   }
 
+  _onTouchStart = (event) => {
+    event.preventDefault()
+    this._animation.onTouchStart(event.nativeEvent)
+  }
+
+  _onTouchMove = (event) => {
+    event.preventDefault()
+    this._animation.onTouchMove(event.nativeEvent)
+  }
+
+  _onTouchEnd = (event) => {
+    event.preventDefault()
+    this._animation.onTouchEnd(event.nativeEvent)
+  }
+
   _onResize = () => {
     this._canvas.width = this._container.clientWidth
     this._canvas.height = this._container.clientHeight