first commit

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["taro/react"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store

babel.config.js

@@ -0,0 +1,21 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: false
+    }]
+  ],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "@antmjs/vantui",
+        libraryDirectory: "es",
+        style: (name) => `${name}/style/less`,
+      },
+      "@antmjs/vantui"
+    ]
+  ]
+}

config/dev.js

@@ -0,0 +1,9 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}

config/index.js

@@ -0,0 +1,80 @@
+const path = require('path')
+
+const config = {
+  projectName: 'YunShake',
+  date: '2021-11-26',
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: [],
+  defineConstants: {
+  },
+  alias: {
+    '@/': path.resolve(__dirname, '..', 'src/'),
+    '@/components': path.resolve(__dirname, '..', 'src/components'),
+    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'react',
+  mini: {
+    miniCssExtractPluginOption: {
+      ignoreOrder: true
+    },  
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.js

@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
+     * 参考代码如下：
+     * webpackChain (chain) {
+     *   chain.plugin('analyzer')
+     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+     * }
+     */
+  }
+}

jsconfig.json

@@ -0,0 +1,14 @@
+// 本文件, 仅仅是为了支持 IDE 跳转, 与项目打包没有任何关系
+
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {      
+      "@/assets/*": ["./src/assets/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/utils/*": ["./src/utils/*"],
+    }
+  }
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "YunShake",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "templateInfo": {
+    "name": "default",
+    "typescript": false,
+    "css": "less"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@antmjs/vantui": "^1.2.5",
+    "@babel/runtime": "^7.7.7",
+    "@tarojs/components": "3.2.13",
+    "@tarojs/react": "3.2.13",
+    "@tarojs/runtime": "3.2.13",
+    "@tarojs/taro": "3.2.13",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@tarojs/mini-runner": "3.2.13",
+    "@tarojs/webpack-runner": "3.2.13",
+    "@types/react": "^17.0.2",
+    "@types/webpack-env": "^1.13.6",
+    "babel-plugin-import": "^1.13.3",
+    "babel-preset-taro": "3.2.13",
+    "eslint": "^6.8.0",
+    "eslint-config-taro": "3.2.13",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "stylelint": "9.3.0"
+  }
+}

project.config.json

@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "YunShake",
+  "description": "",
+  "appid": "wxc96058d57e77f373",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

project.tt.json

@@ -0,0 +1,9 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "YunShake",
+  "appid": "touristappid",
+  "setting": {
+    "es6": false,
+    "minified": false
+  }
+}

src/app.config.js

@@ -0,0 +1,12 @@
+export default {
+  pages: [
+    'pages/index/index',
+    'pages/topList/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  }
+}

src/app.js

@@ -0,0 +1,20 @@
+import { Component } from 'react'
+import './app.less'
+
+class App extends Component {
+
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  componentDidCatchError () {}
+
+  // this.props.children 是将要会渲染的页面
+  render () {
+    return this.props.children
+  }
+}
+
+export default App

src/app.less

@@ -0,0 +1,19 @@
+@import './theme.less';
+
+.page-wrapper {
+  width: 100vw;
+  height: 100vh;
+  background-color: @primary-color;
+}
+
+.flex-box {
+  display: flex;
+
+  &-item {
+    flex: 1;
+  }
+
+  &-item-fixed {
+    flex: none;
+  }
+}

src/components/Shake/index.jsx

@@ -0,0 +1,112 @@
+import { View, Canvas } from '@tarojs/components'
+import Taro, { useDidHide, useDidShow } from '@tarojs/taro'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { throttle } from '@/utils'
+import newShake from '@/utils/shake'
+import S from '@/utils/shape-shifter'
+
+import './style.less'
+
+const { onShake } = newShake()
+
+const ShakeCount = (props) => {
+  const { className, onTimes } = props
+  const classNames = useMemo(() => [className, 'shake-count'].filter(Boolean).join(' '), [className])
+
+  // const [times, setTimes] = useState(0)
+  const timesRef = useRef(0)
+  // timesRef.current = times
+
+  const canvasId = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
+  const canvasRef = useRef()
+  const canvasShapeRef = useRef()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleShake = useCallback(throttle((times) => {
+    S.performAction(times)
+
+    if (onTimes) {
+      onTimes(times)
+    }
+  }, 500, { trailing: true, immediate: true }), [])
+
+  const initS = useCallback(() => {
+    if (canvasRef.current && canvasShapeRef.current) {
+
+      S.init({
+        canvas: canvasRef.current,
+        shape: canvasShapeRef.current,
+        width: canvasRef.current.width,
+        height: canvasRef.current.height
+      })
+
+      S.performAction(0)
+    }
+  }, [])
+
+  useDidShow(() => {
+    Taro.startAccelerometer()
+
+    Taro.onAccelerometerChange((e) => {
+      onShake(e, () => {
+        timesRef.current += 1
+        console.log('---times: ', timesRef.current)
+        handleShake(timesRef.current)
+        // S.performAction(timesRef.current)
+      })
+    })
+  })
+
+  useDidHide(() => {
+    Taro.startAccelerometer()
+  })
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      Taro.createSelectorQuery()
+        .select(`#${canvasId}`)
+        .fields({ node: true, size: true })
+        .exec((res) => {
+          const canvas = res[0].node
+          const ctx = canvas.getContext('2d')
+
+          const dpr = Taro.getSystemInfoSync().pixelRatio
+          const width = res[0].width * dpr
+          const height = res[0].height * dpr
+          canvas.width = width
+          canvas.height = height
+          ctx.scale(dpr, dpr)
+          
+          canvasRef.current = canvas
+          initS()
+        })
+
+      Taro.createSelectorQuery()
+        .select(`#${canvasId}-canvas-shape`)
+        .fields({ node: true, size: true })
+        .exec((res) => {
+          const canvas = res[0].node
+          const ctx = canvas.getContext('2d')
+
+          const dpr = Taro.getSystemInfoSync().pixelRatio
+          const width = res[0].width * dpr
+          const height = res[0].height * dpr
+          canvas.width = width
+          canvas.height = height
+          ctx.scale(dpr, dpr)
+          
+          canvasShapeRef.current = canvas
+          initS()
+        })
+    })
+  }, [canvasId, initS])
+
+  return (
+    <View className={classNames}>
+      <Canvas id={`${canvasId}-canvas-shape`} className='canvas-shape' type='2d'></Canvas>
+      <Canvas id={canvasId} type='2d'></Canvas>
+    </View>
+  )
+}
+
+export default ShakeCount;

src/components/Shake/style.less

@@ -0,0 +1,17 @@
+.shake-count {
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    &.canvas-shape {
+      top: -200vw;
+      left: -200vh;
+    }
+  }
+}

src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title></title>
+  <script>
+    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/index/components/TopBar/index.jsx

@@ -0,0 +1,21 @@
+import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import React from 'react'
+// import { Tab, Tabs } from '@antmjs/vantui';
+
+import './style.less'
+
+export default (props) => {
+
+  const showTopList = () => {
+    console.log('----------------------')
+    Taro.navigateTo({ url: '/pages/topList/index' })
+  }
+
+  return (
+    <View className='top-list'>
+      <View className='top-list-item' onClick={showTopList}>高分榜</View>
+      <View className='top-list-item'>低分榜</View>
+    </View>
+  )
+}

src/pages/index/components/TopBar/style.less

@@ -0,0 +1,22 @@
+.top-list {
+  position: relative;
+  display: flex;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2em;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  color: #fff;
+  font-size: 1em;
+  float: right;
+  margin-top: 5vh;
+  margin-right: 5vw;
+
+  &-item {
+    display: inline-block;
+    flex: 1;
+    padding: .5em 1em;
+
+    & + & {
+      border-left: 2px solid rgba(255, 255, 255, 0.4);
+    }
+  }
+}

src/pages/index/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '首页'
+}

src/pages/index/index.jsx

@@ -0,0 +1,21 @@
+import { View } from '@tarojs/components'
+import ShakeCount from '@/components/Shake'
+import { Button } from '@antmjs/vantui';
+import TopBar from './components/TopBar'
+
+import './index.less'
+
+const IndexPage = (props) => {
+
+  return (
+    <View className='page-wrapper page-index'>
+      <ShakeCount className='shake-bg' />
+      <TopBar />
+      <View style={{ width: '80vw', position: 'fixed', bottom: '2em', left: '10vw' }} >
+        <Button block round color='linear-gradient(to right, #4bb0ff, #6149f6)'>开 始</Button>
+      </View>      
+    </View>
+  )
+}
+
+export default IndexPage;

src/pages/index/index.less

@@ -0,0 +1,8 @@
+
+.page-index {
+  .shake-bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}

src/pages/topList/components/Topic1/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import { Image } from '@antmjs/vantui'
+import './style.less'
+
+export default (props) => {
+  const { info } = props
+  const { avatar, nickname, score } = info || {}
+
+  const size = 128
+
+  return (
+    <View className='topic-1'>
+      <View className='topic-1-item'>
+        <Image src={avatar} width={size} height={size} round></Image>
+      </View>
+      <View className='topic-1-item'>
+        <View className='flex-box'>          
+          <View className='flex-box-item topic-1-tag'>{nickname}</View>
+          <View className='flex-box-item topic-1-tag'>{score}</View>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/topList/components/Topic1/style.less

@@ -0,0 +1,25 @@
+
+.topic-1 {
+  padding: 80rpx 0 120rpx;
+
+  &-item {
+    display: flex;
+    justify-content: center;
+
+    & + & {
+      margin-top: 1.8em;
+    }
+  }
+
+  &-tag {
+    text-align: center;
+    color: #fff;
+    font-size: 1.4em;
+    line-height: 24rpx;
+    padding: 0 1em;
+
+    & + & {
+      border-left: 2px solid #ccc;
+    }
+  }
+}

src/pages/topList/components/TopicItem/index.jsx

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react'
+import { View } from '@tarojs/components'
+import { Image } from '@antmjs/vantui'
+import './style.less'
+
+export default (props) => {
+  const { info, num } = props
+  const { avatar, nickname, score } = info || {}
+
+  const size = 64
+
+  const avatarStyle = useMemo(() => {
+    return {
+      width: `${size}px`
+    }
+  }, [size])
+
+  return (
+    <View className='topic-item flex-box'>
+      <View className='topic-item-num flex-box-item-fixed'>{num}</View>
+      <View className='flex-box topic-item-border flex-box-item'>
+        <View className='flex-box-item-fixed topic-item-avatar' style={avatarStyle}>
+          <Image src={avatar} width={size} height={size} round></Image>
+        </View>
+        <View className='flex-box-item topic-item-nickname'>{nickname}</View>
+        <View className='flex-box-item topic-item-score'>{score}</View>
+      </View>
+    </View>
+  )
+}

src/pages/topList/components/TopicItem/style.less

@@ -0,0 +1,46 @@
+@import '../../../../theme.less';
+
+@numWidth : 80rpx;
+@tpHeight : 120rpx;
+
+.topic-item {
+  position: relative;
+  width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  height: @tpHeight;
+  color: @primary-color;
+  background: #fff;
+
+  &-num {
+    width: @numWidth;
+    text-align: center;
+    line-height: @tpHeight;
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+
+  &-avatar {
+    display: flex;
+    align-items: center;
+  }
+
+  &-nickname {
+    font-size: 1em;
+    line-height: @tpHeight;
+  }
+
+  &-score {
+    text-align: right;
+    font-size: 1.2em;
+    font-weight: bold;
+    line-height: @tpHeight;
+    padding-right: 2em;
+  }
+
+  & + & {
+    .topic-item-border {
+      border-top: 1rpx solid #ccc;
+    }
+  }
+}

src/pages/topList/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '排行榜',
+  navigationStyle: 'custom'
+}

src/pages/topList/index.jsx

@@ -0,0 +1,81 @@
+import { View } from '@tarojs/components'
+import React, { useMemo, useState } from 'react'
+import Taro from '@tarojs/taro'
+import Topic1 from './components/Topic1'
+import TopicItem from './components/TopicItem'
+
+import './style.less'
+
+const testData = [
+  {
+    nickname: 'test1',
+    score: 234234,
+  },
+  {
+    nickname: 'test2',
+    score: 234234,
+  },
+  {
+    nickname: 'test3',
+    score: 234234,
+  },
+  {
+    nickname: 'test4',
+    score: 234234,
+  },
+  {
+    nickname: 'test5',
+    score: 234234,
+  },
+  {
+    nickname: 'test6',
+    score: 234234,
+  },
+  {
+    nickname: 'test7',
+    score: 234234,
+  },
+  {
+    nickname: 'test8',
+    score: 234234,
+  },
+  {
+    nickname: 'test9',
+    score: 234234,
+  },
+  {
+    nickname: 'test10',
+    score: 234234,
+  },
+]
+
+export default (props) => {
+
+  const [list, setList] = useState(testData)
+  const menuBtnBounding = useMemo(() => Taro.getMenuButtonBoundingClientRect(), [])
+  const style = useMemo(() => {
+    const top = menuBtnBounding.height + menuBtnBounding.top
+
+    return {
+      paddingTop: `${top}px`
+    }
+  }, [menuBtnBounding.height, menuBtnBounding.top])
+
+  const [first, leftData] = useMemo(() => {
+    const [f, ...l] =  list || []
+    return [f, l]
+  }, [list])
+
+  return (
+    <View className='page-wrapper page-toplist' style={style}>
+      <Topic1 info={first} />
+      <View>
+        {
+          leftData.map((item, inx) => (
+            <TopicItem key={inx} num={inx+2} info={item} />
+          ))
+        }
+      </View>
+    </View>
+  )
+}

src/pages/topList/style.less

@@ -0,0 +1,4 @@
+
+.page-toplist {
+  
+}

src/theme.less

@@ -0,0 +1,2 @@
+
+@primary-color: #13c2c2;

src/utils/index.js

@@ -0,0 +1,35 @@
+
+export function throttle(fn, delay, options = {}) {
+  let timer = null;
+  let last = 0;
+
+  return function() {
+      const context = this;
+      const args = arguments;
+
+      const now = +new Date();
+      
+      if (last === 0 && options.immediate === false) {
+          last = now;
+      }
+
+      const offset = now - last;
+
+      if (offset > delay) {
+          if (timer) {
+              clearTimeout(timer);
+              timer = null;
+          }
+
+          last = now;
+          fn.apply(context, args);
+      }
+      else if (!timer && options.trailing !== false) {
+          timer = setTimeout(() => {
+              last = options.immediate === false ? 0 : +new Date();;
+              timer = null;
+              fn.apply(context, args);
+          }, delay - offset);
+      }
+  };
+}

src/utils/shake.js

@@ -0,0 +1,44 @@
+
+export default function Shake() {
+  const shakeData = {
+    shakeSpeed: 110, //设置阈值,越小越灵敏
+    // shakeStep: 2000, //摇一摇成功后间隔
+    lastTime: 0, //此变量用来记录上次摇动的时间
+    x: 0,
+    y: 0,
+    z: 0,
+    lastX: 0,
+    lastY: 0,
+    lastZ: 0,
+  }
+
+  function onShake(acceleration, next) {
+    //记录当前时间
+    const nowTime = new Date().getTime();
+
+    //如果这次摇的时间距离上次摇的时间有一定间隔 才执行
+    const diff = 20;
+    if (nowTime - shakeData.lastTime > diff) {
+     var diffTime = nowTime - shakeData.lastTime; //记录时间段
+     shakeData.lastTime = nowTime; //记录本次摇动时间，为下次计算摇动时间做准备
+     shakeData.x = acceleration.x; //获取 x 轴数值，x 轴为垂直于北轴，向东为正
+     shakeData.y = acceleration.y; //获取 y 轴数值，y 轴向正北为正
+     shakeData.z = acceleration.z; //获取 z 轴数值，z 轴垂直于地面，向上为正
+     //计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度
+     var speed = Math.abs(shakeData.x + shakeData.y + shakeData.z - shakeData.lastX - shakeData.lastY - shakeData.lastZ) / diffTime * 10000;
+     //console.log(speed)
+     if (speed > shakeData.shakeSpeed) { //如果计算出来的速度超过了阈值，那么就算作用户成功摇一摇
+        next();
+      }
+
+     shakeData.lastX = shakeData.x; //赋值，为下一次计算做准备
+     shakeData.lastY = shakeData.y; //赋值，为下一次计算做准备
+     shakeData.lastZ = shakeData.z; //赋值，为下一次计算做准备
+    }
+  }
+
+  return {
+    onShake
+  }
+}
+

src/utils/shape-shifter.js

@@ -0,0 +1,402 @@
+
+/*
+
+  Shape Shifter
+  =============
+  A canvas experiment by Kenneth Cachia
+  http://www.kennethcachia.com
+
+  Updated code
+  ------------
+  https://github.com/kennethcachia/Shape-Shifter 
+
+*/
+
+
+const S = {
+  init: function (conf) {
+    S.Drawing.init(conf);
+    S.ShapeBuilder.init(conf);
+
+    S.Drawing.loop(function () {
+      S.Shape.render();
+    });
+  },
+  performAction: function (value) {
+    const fast = true;
+    S.Shape.switchShape(S.ShapeBuilder.letter(value), fast);
+  }
+};
+
+S.Drawing = (function () {
+  let canvas,
+      context,
+      renderFn,
+      requestFrame = function(callback) {
+                      setTimeout(callback, 1000 / 60);
+                    };
+
+  return {
+    init: function (conf) {
+      canvas = conf.canvas;
+      context = conf.canvas.getContext('2d');
+      this.adjustCanvas(conf.width, conf.height);
+    },
+
+    loop: function (fn) {
+      renderFn = !renderFn ? fn : renderFn;
+      this.clearFrame();
+      renderFn();
+      requestFrame.call(null, this.loop.bind(this));
+    },
+
+    adjustCanvas: function (width, height) {
+      canvas.width = width;
+      canvas.height = height;
+    },
+
+    clearFrame: function () {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+    },
+
+    getArea: function () {
+      return { w: canvas.width, h: canvas.height };
+    },
+
+    drawCircle: function (p, c) {
+      context.fillStyle = c.render();
+      context.beginPath();
+      context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
+      context.closePath();
+      context.fill();
+    }
+  }
+}());
+
+S.Point = function (args) {
+  this.x = args.x;
+  this.y = args.y;
+  this.z = args.z;
+  this.a = args.a;
+  this.h = args.h;
+};
+
+
+S.Color = function (r, g, b, a) {
+  this.r = r;
+  this.g = g;
+  this.b = b;
+  this.a = a;
+};
+
+S.Color.prototype = {
+  render: function () {
+    return 'rgba(' + this.r + ',' +  + this.g + ',' + this.b + ',' + this.a + ')';
+  }
+};
+
+
+S.Dot = function (x, y) {
+  this.p = new S.Point({
+    x: x,
+    y: y,
+    z: 5,
+    a: 1,
+    h: 0
+  });
+
+  this.e = 0.07;
+  this.s = true;
+
+  this.c = new S.Color(255, 255, 255, this.p.a);
+
+  this.t = this.clone();
+  this.q = [];
+};
+
+S.Dot.prototype = {
+  clone: function () {
+    return new S.Point({
+      x: this.x,
+      y: this.y,
+      z: this.z,
+      a: this.a,
+      h: this.h
+    });
+  },
+
+  _draw: function () {
+    this.c.a = this.p.a;
+    S.Drawing.drawCircle(this.p, this.c);
+  },
+
+  _moveTowards: function (n) {
+    let details = this.distanceTo(n, true),
+        dx = details[0],
+        dy = details[1],
+        d = details[2],
+        e = this.e * d;
+
+    if (this.p.h === -1) {
+      this.p.x = n.x;
+      this.p.y = n.y;
+      return true;
+    }
+
+    if (d > 1) {
+      this.p.x -= ((dx / d) * e);
+      this.p.y -= ((dy / d) * e);
+    } else {
+      if (this.p.h > 0) {
+        this.p.h--;
+      } else {
+        return true;
+      }
+    }
+
+    return false;
+  },
+
+  _update: function () {
+    if (this._moveTowards(this.t)) {
+      let p = this.q.shift();
+
+      if (p) {
+        this.t.x = p.x || this.p.x;
+        this.t.y = p.y || this.p.y;
+        this.t.z = p.z || this.p.z;
+        this.t.a = p.a || this.p.a;
+        this.p.h = p.h || 0;
+      } else {
+        if (this.s) {
+          this.p.x -= Math.sin(Math.random() * 3.142);
+          this.p.y -= Math.sin(Math.random() * 3.142);
+        } else {
+          this.move(new S.Point({
+            x: this.p.x + (Math.random() * 50) - 25,
+            y: this.p.y + (Math.random() * 50) - 25,
+          }));
+        }
+      }
+    }
+
+    let d = this.p.a - this.t.a;
+    this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
+    d = this.p.z - this.t.z;
+    this.p.z = Math.max(1, this.p.z - (d * 0.05));
+  },
+
+  distanceTo: function (n, details) {
+    let dx = this.p.x - n.x,
+        dy = this.p.y - n.y,
+        d = Math.sqrt(dx * dx + dy * dy);
+
+    return details ? [dx, dy, d] : d;
+  },
+
+  move: function (p, avoidStatic) {
+    if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
+      this.q.push(p);
+    }
+  },
+
+  render: function () {
+    this._update();
+    this._draw();
+  }
+}
+
+
+S.ShapeBuilder = (function () {
+  let gap = 13,
+      shapeCanvas,
+      shapeContext,
+      fontSize = 500,
+      fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
+
+  function fit({ width, height }) {
+    shapeCanvas.width = Math.floor(width / gap) * gap;
+    shapeCanvas.height = Math.floor(height / gap) * gap;
+    shapeContext.fillStyle = 'red';
+    shapeContext.textBaseline = 'middle';
+    shapeContext.textAlign = 'center';
+  }
+
+  function processCanvas() {
+    let pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data,
+        dots = [],
+        x = 0,
+        y = 0,
+        fx = shapeCanvas.width,
+        fy = shapeCanvas.height,
+        w = 0,
+        h = 0;
+
+    for (let p = 0; p < pixels.length; p += (4 * gap)) {
+      if (pixels[p + 3] > 0) {
+        dots.push(new S.Point({
+          x: x,
+          y: y
+        }));
+
+        w = x > w ? x : w;
+        h = y > h ? y : h;
+        fx = x < fx ? x : fx;
+        fy = y < fy ? y : fy;
+      }
+
+      x += gap;
+
+      if (x >= shapeCanvas.width) {
+        x = 0;
+        y += gap;
+        p += gap * 4 * shapeCanvas.width;
+      }
+    }
+
+    return { dots: dots, w: w + fx, h: h + fy };
+  }
+
+  function setFontSize(s) {
+    shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
+  }
+
+  function isNumber(n) {
+    // eslint-disable-next-line no-restricted-globals
+    return !isNaN(parseFloat(n)) && isFinite(n);
+  }
+
+  function init(conf) {
+    shapeCanvas = conf.shape;
+    shapeContext = conf.shape.getContext('2d');
+
+    fit(conf);
+  }
+
+  return {
+    init,
+    letter: function (l) {
+      let s = 0;
+
+      setFontSize(fontSize);
+      s = Math.min(fontSize,
+                  (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, 
+                  (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
+      setFontSize(s);
+
+      shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
+      shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
+
+      return processCanvas();
+    }
+  };
+}());
+
+
+S.Shape = (function () {
+  let dots = [],
+      width = 0,
+      height = 0,
+      cx = 0,
+      cy = 0;
+
+  function compensate() {
+    let a = S.Drawing.getArea();
+
+    cx = a.w / 2 - width / 2;
+    cy = a.h / 2 - height / 2;
+  }
+
+  return {
+    shuffleIdle: function () {
+      let a = S.Drawing.getArea();
+
+      for (let d = 0; d < dots.length; d++) {
+        if (!dots[d].s) {
+          dots[d].move({
+            x: Math.random() * a.w,
+            y: Math.random() * a.h
+          });
+        }
+      }
+    },
+
+    switchShape: function (n, fast) {
+      let size,
+          a = S.Drawing.getArea();
+
+      width = n.w;
+      height = n.h;
+
+      compensate();
+
+      if (n.dots.length > dots.length) {
+        size = n.dots.length - dots.length;
+        for (let d = 1; d <= size; d++) {
+          dots.push(new S.Dot(a.w / 2, a.h / 2));
+        }
+      }
+
+      let d = 0,
+          i = 0;
+
+      while (n.dots.length > 0) {
+        i = Math.floor(Math.random() * n.dots.length);
+        dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
+
+        if (dots[d].s) {
+          dots[d].move(new S.Point({
+            z: Math.random() * 20 + 10,
+            a: Math.random(),
+            h: 18
+          }));
+        } else {
+          dots[d].move(new S.Point({
+            z: Math.random() * 5 + 5,
+            h: fast ? 18 : 30
+          }));
+        }
+
+        dots[d].s = true;
+        dots[d].move(new S.Point({
+          x: n.dots[i].x + cx,
+          y: n.dots[i].y + cy,
+          a: 1,
+          z: 5,
+          h: 0
+        }));
+
+        n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
+        d++;
+      }
+
+      for (i = d; i < dots.length; i++) {
+        if (dots[i].s) {
+          dots[i].move(new S.Point({
+            z: Math.random() * 20 + 10,
+            a: Math.random(),
+            h: 20
+          }));
+
+          dots[i].s = false;
+          dots[i].e = 0.04;
+          dots[i].move(new S.Point({ 
+            x: Math.random() * a.w,
+            y: Math.random() * a.h,
+            a: 0.3, //.4
+            z: Math.random() * 4,
+            h: 0
+          }));
+        }
+      }
+    },
+
+    render: function () {
+      for (let d = 0; d < dots.length; d++) {
+        dots[d].render();
+      }
+    }
+  }
+}());
+
+export default S;