├── .gitignore
├── static
    ├── icon.png
    ├── ground.jpg
    ├── icon.jpeg
    ├── favicon.ico
    ├── meatball-parade.mp3
    └── README.md
├── plugins
    ├── motion.js
    ├── global-events.js
    ├── presets.js
    ├── README.md
    ├── three.js
    ├── ga.js
    └── tweezing.js
├── layouts
    ├── default.vue
    └── README.md
├── .eslintrc.js
├── components
    ├── README.md
    ├── three
    │   ├── AmbientLight.js
    │   ├── Scene.js
    │   ├── SpotLight.js
    │   ├── Cube.js
    │   ├── Ground.js
    │   ├── Camera.js
    │   ├── Renderer.js
    │   └── Object3D.js
    ├── AppLogo.vue
    └── music.vue
├── pages
    ├── music.vue
    ├── README.md
    ├── basic-transition.vue
    ├── sudoku.vue
    ├── easing-mouse.vue
    ├── index.vue
    ├── sudoku-motion.vue
    ├── plot-motion.vue
    ├── polygon.vue
    ├── three.vue
    ├── easings-graph.vue
    └── motion-graph.vue
├── .editorconfig
├── motions
    ├── package.json
    ├── index.js
    ├── yarn.lock
    └── App.vue
├── assets
    ├── README.md
    ├── datasets.json
    └── main.css
├── middleware
    └── README.md
├── store
    └── README.md
├── package.json
├── nuxt.config.js
├── README.md
└── pizzi.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .nuxt
4 | npm-debug.log
5 | sw.*
6 | .DS_Store
7 | 


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/posva/state-animation-demos/HEAD/static/icon.png


--------------------------------------------------------------------------------
/static/ground.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/posva/state-animation-demos/HEAD/static/ground.jpg


--------------------------------------------------------------------------------
/static/icon.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/posva/state-animation-demos/HEAD/static/icon.jpeg


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/posva/state-animation-demos/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/plugins/motion.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Motion from 'vue-motion'
3 | 
4 | Vue.use(Motion)
5 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="container">
3 |     <nuxt/>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/static/meatball-parade.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/posva/state-animation-demos/HEAD/static/meatball-parade.mp3


--------------------------------------------------------------------------------
/plugins/global-events.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import GlobalEvents from 'vue-global-events'
3 | 
4 | Vue.component('GlobalEvents', GlobalEvents)
5 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |   },
 7 |   extends: ['posva'],
 8 |   // add your custom rules here
 9 |   rules: {},
10 | }
11 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | The components directory contains your Vue.js Components.
4 | Nuxt.js doesn't supercharge these components.
5 | 
6 | **This directory is not required, you can delete it if you don't want to use it.**
7 | 


--------------------------------------------------------------------------------
/components/three/AmbientLight.js:
--------------------------------------------------------------------------------
 1 | import { AmbientLight } from 'three'
 2 | import Object3D from './Object3D'
 3 | 
 4 | export default {
 5 |   mixins: [Object3D],
 6 | 
 7 |   beforeMount () {
 8 |     this.obj = new AmbientLight('#eee')
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/pages/music.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <no-ssr>
 3 |     <music/>
 4 |   </no-ssr>
 5 | </template>
 6 | 
 7 | <script>
 8 | const Music = () => import('~/components/music')
 9 | 
10 | export default {
11 |   components: {
12 |     Music,
13 |   },
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/motions/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "motions",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "dependencies": {
 7 |     "lodash": "^4.17.5",
 8 |     "modern-normalize": "^0.2.0",
 9 |     "vue": "^2.5.13",
10 |     "vue-motion": "^0.2.0"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | This directory contains your Application Layouts.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/views#layouts
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the .vue files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/assets#webpacked
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/motions/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Motion from 'vue-motion'
 3 | import 'modern-normalize/modern-normalize.css'
 4 | import App from './App'
 5 | 
 6 | Vue.use(Motion)
 7 | 
 8 | Vue.config.devtools = true
 9 | Vue.config.performance = true
10 | 
11 | window.vm = new Vue({
12 |   el: '#app',
13 |   render: h => h(App),
14 | })
15 | 


--------------------------------------------------------------------------------
/plugins/presets.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | export default {
3 |   noWobble: { stiffness: 170, damping: 26, precision: 0.01 }, // the default, if nothing provided
4 |   gentle: { stiffness: 120, damping: 14, precision: 0.01 },
5 |   wobbly: { stiffness: 180, damping: 12, precision: 0.01 },
6 |   stiff: { stiffness: 210, damping: 20, precision: 0.01 },
7 | }
8 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/plugins
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | This directory contains your static files.
 4 | Each file inside this directory is mapped to /.
 5 | 
 6 | Example: /static/robots.txt is mapped as /robots.txt.
 7 | 
 8 | More information about the usage of this directory in the documentation:
 9 | https://nuxtjs.org/guide/assets#static
10 | 
11 | **This directory is not required, you can delete it if you don't want to use it.**
12 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
 1 | # MIDDLEWARE
 2 | 
 3 | This directory contains your Application Middleware.
 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
 5 | 
 6 | More information about the usage of this directory in the documentation:
 7 | https://nuxtjs.org/guide/routing#middleware
 8 | 
 9 | **This directory is not required, you can delete it if you don't want to use it.**
10 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | This directory contains your Vuex Store files.
 4 | Vuex Store option is implemented in the Nuxt.js framework.
 5 | Creating a index.js file in this directory activate the option in the framework automatically.
 6 | 
 7 | More information about the usage of this directory in the documentation:
 8 | https://nuxtjs.org/guide/vuex-store
 9 | 
10 | **This directory is not required, you can delete it if you don't want to use it.**
11 | 


--------------------------------------------------------------------------------
/components/three/Scene.js:
--------------------------------------------------------------------------------
 1 | import Object3D from './Object3D'
 2 | import { Scene, Color } from 'three'
 3 | 
 4 | export default {
 5 |   ...Object3D,
 6 |   inject: ['renderer'],
 7 | 
 8 |   provide () {
 9 |     this.scene = new Scene()
10 |     return {
11 |       scene: this.scene,
12 |     }
13 |   },
14 | 
15 |   // overwrite existing mounted
16 |   mounted () {
17 |     this.renderer.scene = this.scene
18 |     this.scene.background = new Color(0x111111)
19 |     // console.log('scene', this.scene)
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/components/three/SpotLight.js:
--------------------------------------------------------------------------------
 1 | import { SpotLight } from 'three'
 2 | import Object3D from './Object3D'
 3 | 
 4 | export default {
 5 |   mixins: [Object3D],
 6 | 
 7 |   beforeMount () {
 8 |     this.obj = new SpotLight(0x404040)
 9 |     this.obj.angle = Math.PI / 5
10 |     this.obj.penumbra = 0.3
11 |     this.obj.position.set(0, 10, 5)
12 |     this.obj.castShadow = true
13 |     this.obj.shadow.camera.near = 8
14 |     this.obj.shadow.camera.far = 30
15 |     this.obj.shadow.mapSize.width = 1024
16 |     this.obj.shadow.mapSize.height = 1024
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/components/three/Cube.js:
--------------------------------------------------------------------------------
 1 | import { BoxGeometry, MeshPhongMaterial, Mesh } from 'three'
 2 | import Object3D from './Object3D'
 3 | 
 4 | export default {
 5 |   extends: Object3D,
 6 | 
 7 |   props: ['color'],
 8 | 
 9 |   beforeMount () {
10 |     this.geometry = new BoxGeometry(1, 1, 1)
11 |     this.material = new MeshPhongMaterial({
12 |       color: this.color,
13 |       shininess: 150,
14 |       specular: 0x222222,
15 |     })
16 |     this.obj = new Mesh(this.geometry, this.material)
17 |     this.obj.castShadow = true
18 |     this.obj.receiveShadow = true
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/components/three/Ground.js:
--------------------------------------------------------------------------------
 1 | import { BoxGeometry, MeshPhongMaterial, Mesh, TextureLoader, RepeatWrapping } from 'three'
 2 | import Object3D from './Object3D'
 3 | 
 4 | export default {
 5 |   extends: Object3D,
 6 |   beforeMount () {
 7 |     this.geometry = new BoxGeometry(10, 0.15, 10)
 8 |     const texture = new TextureLoader().load('/ground.jpg')
 9 |     texture.wrapS = RepeatWrapping
10 |     texture.wrapT = RepeatWrapping
11 |     texture.repeat.set(6, 6)
12 |     this.material = new MeshPhongMaterial({
13 |       map: texture,
14 |       shininess: 150,
15 |     })
16 |     this.obj = new Mesh(this.geometry, this.material)
17 |     this.obj.scale.multiplyScalar(3)
18 |     this.obj.castShadow = false
19 |     this.obj.receiveShadow = true
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/motions/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | lodash@^4.17.5:
 6 |   version "4.17.5"
 7 |   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 8 | 
 9 | modern-normalize@^0.2.0:
10 |   version "0.2.0"
11 |   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-0.2.0.tgz#d587ceab41682ea17650e76891020c8388df258d"
12 | 
13 | vue-motion@^0.2.0:
14 |   version "0.2.0"
15 |   resolved "https://registry.yarnpkg.com/vue-motion/-/vue-motion-0.2.0.tgz#5ce9441eea605624d66d0d94688d1f8ef26bfe6f"
16 | 
17 | vue@^2.5.13:
18 |   version "2.5.13"
19 |   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"
20 | 


--------------------------------------------------------------------------------
/plugins/three.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Scene from '~/components/three/Scene'
 3 | import Cube from '~/components/three/Cube'
 4 | import Ground from '~/components/three/Ground'
 5 | import Renderer from '~/components/three/Renderer'
 6 | import Camera from '~/components/three/Camera'
 7 | import AmbientLight from '~/components/three/AmbientLight'
 8 | import SpotLight from '~/components/three/SpotLight'
 9 | import * as THREE from 'three'
10 | // import VueThreejs from 'vue-threejs'
11 | // Vue.use(VueThreejs)
12 | 
13 | Vue.component('Scene', Scene)
14 | Vue.component('Cube', Cube)
15 | Vue.component('Ground', Ground)
16 | Vue.component('Renderer', Renderer)
17 | Vue.component('Camera', Camera)
18 | Vue.component('AmbientLight', AmbientLight)
19 | Vue.component('SpotLight', SpotLight)
20 | 


--------------------------------------------------------------------------------
/components/three/Camera.js:
--------------------------------------------------------------------------------
 1 | import Object3D from './Object3D'
 2 | import { PerspectiveCamera } from 'three'
 3 | // import { OrbitControls } from '~/plugins/three'
 4 | 
 5 | export default {
 6 |   extends: Object3D,
 7 |   inject: ['renderer'],
 8 | 
 9 |   provide () {
10 |     this.obj = new PerspectiveCamera(75, this.renderer.width / this.renderer.height, 0.1, 1000)
11 |     // new OrbitControls(this.camera)
12 |     return {
13 |       camera: this.obj,
14 |     }
15 |   },
16 | 
17 |   watch: {
18 |     position: {
19 |       handler () {
20 |         if (!this.obj) return
21 |         this.obj.lookAt(this.scene.position)
22 |       },
23 |       deep: true,
24 |     },
25 |   },
26 | 
27 |   mounted () {
28 |     this.renderer.camera = this.obj
29 |     this.obj.lookAt(this.scene.position)
30 |     // console.log('camera', this.obj)
31 |   },
32 | }
33 | 


--------------------------------------------------------------------------------
/pages/basic-transition.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="basic-transition">
 3 |     <div class="text-container" @click="on = !on">
 4 |       <transition
 5 |         enter-active-class="animated slideInLeft"
 6 |         leave-active-class="animated slideOutRight fadeOut"
 7 |       >
 8 |         <div v-if="on" key="on">On</div>
 9 |         <div v-else>Off</div>
10 |       </transition>
11 |     </div>
12 |     <p>Click on the text to toggle it</p>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   data () {
19 |     return {
20 |       on: true,
21 |     }
22 |   },
23 | }
24 | </script>
25 | 
26 | <style scoped>
27 | .text-container {
28 |   cursor: pointer;
29 |   text-align: left;
30 |   padding: 1rem;
31 | }
32 | 
33 | .animated.slideOutRight {
34 |   animation-name: slideOutRight, fadeOut;
35 |   position: absolute;
36 |   width: 343px;
37 |   max-width: calc(100vw - 1.3rem);
38 | }
39 | 
40 | .basic-transition {
41 |   font-size: 1.5rem;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/plugins/ga.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | export default ({ app }) => {
 4 |   /*
 5 |   ** Only run on client-side and only in production mode
 6 |   */
 7 |   if (process.env.NODE_ENV !== 'production') return
 8 |   /*
 9 |   ** Include Google Analytics Script
10 |   */
11 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
12 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
13 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
14 |   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
15 |   /*
16 |   ** Set the current page
17 |   */
18 |   ga('create', 'UA-114346078-1', 'auto')
19 |   /*
20 |   ** Every time the route changes (fired on initialization too)
21 |   */
22 |   app.router.afterEach((to, from) => {
23 |     /*
24 |     ** We tell Google Analytics to add a `pageview`
25 |     */
26 |     ga('set', 'page', to.fullPath)
27 |     ga('send', 'pageview')
28 |   })
29 | }
30 | 


--------------------------------------------------------------------------------
/plugins/tweezing.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { Tweezing, tweenjsHelper } from 'vue-tweezing'
 3 | import TWEEN from '@tweenjs/tween.js'
 4 | function bounceOut (n) {
 5 |   if (n < 1 / 2.75) {
 6 |     return 7.5625 * n * n
 7 |   } else if (n < 2 / 2.75) {
 8 |     return 7.5625 * (n -= 1.5 / 2.75) * n + 0.75
 9 |   } else if (n < 2.5 / 2.75) {
10 |     return 7.5625 * (n -= 2.25 / 2.75) * n + 0.9375
11 |   } else {
12 |     return 7.5625 * (n -= 2.625 / 2.75) * n + 0.984375
13 |   }
14 | }
15 | Vue.use(Tweezing, {
16 |   tweenjs: tweenjsHelper(TWEEN),
17 |   custom (value, end, opts, vm) {
18 |     if (vm._unwatchCustom) vm._unwatchCustom()
19 |     // TODO custom stop function?
20 |     vm._unwatchCustom = vm.$watch(
21 |       '$attrs.time',
22 |       time => {
23 |         opts.$setValue(bounceOut(time))
24 |       },
25 |       { immediate: true }
26 |     )
27 |   },
28 | })
29 | 
30 | function animate (time) {
31 |   requestAnimationFrame(animate)
32 |   TWEEN.update(time)
33 | }
34 | if (process.client) requestAnimationFrame(animate)
35 | 


--------------------------------------------------------------------------------
/components/three/Renderer.js:
--------------------------------------------------------------------------------
 1 | import { WebGLRenderer, BasicShadowMap } from 'three'
 2 | 
 3 | export default {
 4 |   props: {
 5 |     width: Number,
 6 |     height: Number,
 7 |   },
 8 | 
 9 |   provide () {
10 |     this.renderer = new WebGLRenderer()
11 |     this.renderer.shadowMap.enabled = true
12 |     this.renderer.shadowMap.type = BasicShadowMap
13 |     return {
14 |       renderer: this,
15 |     }
16 |   },
17 | 
18 |   mounted () {
19 |     this.renderer.setSize(this.width, this.height)
20 |     this.animate()
21 |   },
22 | 
23 |   methods: {
24 |     animate () {
25 |       if (this.scene && this.camera) {
26 |         this.renderer.render(this.scene, this.camera)
27 |       } else {
28 |         // console.warn('You need a scene and a camera inside of the renderer')
29 |       }
30 |       requestAnimationFrame(this.animate.bind(this))
31 |     },
32 |   },
33 | 
34 |   render (h) {
35 |     this.$nextTick().then(() => {
36 |       this.$el.appendChild(this.renderer.domElement)
37 |     })
38 |     return h('div', this.$slots.default)
39 |   },
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demos",
 3 |   "version": "1.0.0",
 4 |   "description": "State Animations demos",
 5 |   "author": "Eduardo San Martin Morote <posva13@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "deploy": "npm run generate && surge dist --domain https://state-animations.surge.sh",
13 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
14 |     "precommit": "npm run lint"
15 |   },
16 |   "dependencies": {
17 |     "@nuxtjs/pwa": "^2.0.5",
18 |     "@tweenjs/tween.js": "^17.2.0",
19 |     "animate.css": "^3.6.1",
20 |     "lodash": "^4.17.5",
21 |     "modern-normalize": "^0.3.0",
22 |     "nuxt": "^1.0.0",
23 |     "p5": "^0.6.0",
24 |     "randomcolor": "^0.5.3",
25 |     "three": "^0.92.0",
26 |     "vue-global-events": "^1.0.2",
27 |     "vue-motion": "^0.2.2",
28 |     "vue-tweezing": "^0.1.2"
29 |   },
30 |   "devDependencies": {
31 |     "babel-eslint": "^8.2.1",
32 |     "eslint": "^4.15.0",
33 |     "eslint-config-posva": "^1.3.2",
34 |     "eslint-friendly-formatter": "^3.0.0",
35 |     "eslint-loader": "^1.7.1",
36 |     "eslint-plugin-vue": "^4.0.0",
37 |     "node-sass": "^4.7.2",
38 |     "postcss-nested": "^3.0.0",
39 |     "sass-loader": "^6.0.6"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'Vue.js State Animations Demos',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { hid: 'description', name: 'description', content: 'State Animations demos' },
10 |     ],
11 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
12 |   },
13 |   /*
14 |   ** Customize the progress bar color
15 |   */
16 |   loading: { color: '#eee' },
17 |   /*
18 |   ** Build configuration
19 |   */
20 |   build: {
21 |     /*
22 |     ** Run ESLint on save
23 |     */
24 |     extend (config, { isDev, isClient }) {
25 |       config.resolve.mainFields = ['module', 'main']
26 |     },
27 |     postcss: [require('postcss-nested')()],
28 |   },
29 | 
30 |   modules: ['@nuxtjs/pwa'],
31 | 
32 |   plugins: [
33 |     '~/plugins/motion',
34 |     '~/plugins/tweezing',
35 |     '~/plugins/global-events',
36 |     { src: '~plugins/ga.js', ssr: false },
37 |     { src: '~/plugins/three', ssr: false },
38 |   ],
39 | 
40 |   css: ['modern-normalize/modern-normalize.css', 'animate.css/animate.css', '~/assets/main.css'],
41 | 
42 |   manifest: {
43 |     name: 'State Animations Demos',
44 |     short_name: 'State Animations',
45 |     lang: 'en',
46 |     background_color: '#111111',
47 |     theme_color: '#8652e7',
48 |     display: 'standalone',
49 |     description: 'Demos for my State Animations talk',
50 |   },
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/sudoku.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Lazy Sudoku</h1>
 4 |     <p>Keep hitting the shuffle button until you win.</p>
 5 | 
 6 |     <button @click="shuffle">
 7 |       Shuffle
 8 |     </button>
 9 |     <transition-group name="cell" tag="div" class="sudoku">
10 |       <div v-for="cell in cells" :key="cell.id" class="cell">
11 |         {{ cell.number }}
12 |       </div>
13 |     </transition-group>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import shuffle from 'lodash/shuffle'
19 | 
20 | export default {
21 |   data() {
22 |     return {
23 |       cells: Array.apply(null, { length: 81 }).map((_, index) => ({
24 |         id: index,
25 |         number: index % 9 + 1,
26 |       })),
27 |     }
28 |   },
29 | 
30 |   methods: {
31 |     shuffle: function() {
32 |       this.cells = shuffle(this.cells)
33 |     },
34 |   },
35 | }
36 | </script>
37 | 
38 | <style scoped>
39 | .sudoku {
40 |   display: flex;
41 |   flex-wrap: wrap;
42 |   width: calc(var(--sudoku-cell-size) * 9 - 6px);
43 |   margin: auto;
44 |   margin-top: 10px;
45 | }
46 | .cell {
47 |   display: flex;
48 |   justify-content: space-around;
49 |   align-items: center;
50 |   width: var(--sudoku-cell-size);
51 |   height: var(--sudoku-cell-size);
52 |   border: 1px solid #aaa;
53 |   margin-right: -1px;
54 |   margin-bottom: -1px;
55 | }
56 | .cell:nth-child(3n) {
57 |   margin-right: 0;
58 | }
59 | .cell:nth-child(27n) {
60 |   margin-bottom: 0;
61 | }
62 | .cell-move {
63 |   transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # State Animations demos
 2 | 
 3 | > Demos used in my talk State Animations, getting them right
 4 | 
 5 | [See the result online](https://state-animations-amsterdam.surge.sh)
 6 | 
 7 | ## Demos
 8 | 
 9 | ### Basic transition
10 | 
11 | Showcase a simple transition usage
12 | 
13 | ### Easings graph
14 | 
15 | Runtime generated easing graphs using VueTweezing and tween.js
16 | 
17 | ### Motion graph
18 | 
19 | Runtime generated motion graphs using VueMotion (spring physics)
20 | 
21 | ### Polygon
22 | 
23 | Demo example for state transitions from the official docs using VueTweezing
24 | 
25 | ### Easing with mouse
26 | 
27 | Using the mouse position to control the easing function instead of time
28 | 
29 | ### Plot
30 | 
31 | Dynamically generated svg plot with natural transitions using VueMotion
32 | 
33 | ### Sudoku
34 | 
35 | Demo example for `transition-group` from the official docs using VueMotion instead
36 | 
37 | ### Music
38 | 
39 | Bonus example controlling the frame rate of a music with VueMotion or VueTweezing
40 | 
41 | ## Testing locally
42 | 
43 | ``` bash
44 | # install dependencies
45 | $ npm install # Or yarn install
46 | 
47 | # serve with hot reload at localhost:3000
48 | $ npm run dev
49 | ```
50 | 
51 | ## Libraries used
52 | 
53 | - [VueMotion](https://github.com/posva/vue-motion)
54 | - [VueTweezing](https://github.com/posva/vue-tweezing)
55 | - [tween.js](https://github.com/tweenjs/tween.js)
56 | - [p5](https://github.com/processing/p5.js)
57 | 
58 | ## Conferences
59 | 
60 | These demos were shown at Vue.js Amsterdam 16 Feb 2018
61 | 
62 | [Slides](https://slides.com/posva/state-animations)
63 | 


--------------------------------------------------------------------------------
/pages/easing-mouse.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="easing-mouse">
 3 |     <GlobalEvents @mousemove.passive="mouseY = $event.clientY" @touchmove.prevent="mouseY = $event.touches[0].clientY"/>
 4 |     <Tweezing :to="1" tween="custom" :time="mouseYPer">
 5 |       <div slot-scope="value">
 6 |         <pre>{{ (100 * mouseYPer).toFixed(2) }}%</pre>
 7 |         <div class="ball" :style="ballStyle(value)"></div>
 8 |       </div>
 9 |     </Tweezing>
10 |     <div class="line"></div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   data() {
17 |     return {
18 |       mouseY: 0,
19 |     }
20 |   },
21 | 
22 |   methods: {
23 |     ballStyle(value) {
24 |       const size = process.client ? document.documentElement.clientHeight : 155
25 |       return {
26 |         transform: `translateY(${value * (size - 155)}px)`,
27 |       }
28 |     },
29 |   },
30 | 
31 |   computed: {
32 |     mouseYPer() {
33 |       return process.client ? this.mouseY / document.documentElement.clientHeight : 0
34 |     },
35 |   },
36 | }
37 | </script>
38 | 
39 | <style scoped>
40 | #easing-mouse {
41 |   width: 100%;
42 |   max-height: calc(100% - 100px);
43 |   /* position: relative; */
44 | }
45 | 
46 | .line {
47 |   position: absolute;
48 |   left: 0;
49 |   bottom: 50px;
50 |   width: 100%;
51 |   height: 0.15rem;
52 |   background-color: var(--color-snow);
53 | }
54 | 
55 | .ball {
56 |   --ball-size: 100px;
57 |   position: absolute;
58 |   top: 0;
59 |   left: calc(50% - var(--ball-size) / 2);
60 |   width: var(--ball-size);
61 |   height: var(--ball-size);
62 |   border-radius: 50%;
63 |   background-color: var(--color-purple);
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <ul class="links">
 4 |       <li>
 5 |         <nuxt-link class="link" to="/basic-transition">Basic transition</nuxt-link>
 6 |       </li>
 7 |       <li>
 8 |         <nuxt-link class="link" to="/easings-graph">Easings graph</nuxt-link>
 9 |       </li>
10 |       <li>
11 |         <nuxt-link class="link" to="/motion-graph">Motion graph</nuxt-link>
12 |       </li>
13 |       <li>
14 |         <nuxt-link class="link" to="/polygon">Polygon</nuxt-link>
15 |       </li>
16 |       <li>
17 |         <nuxt-link class="link" to="/easing-mouse">Easing with mouse</nuxt-link>
18 |       </li>
19 |       <li>
20 |         <nuxt-link class="link" to="/plot-motion">Plot</nuxt-link>
21 |       </li>
22 |       <li>
23 |         <nuxt-link class="link" to="/sudoku-motion">Sudoku</nuxt-link>
24 |       </li>
25 |       <li>
26 |         <nuxt-link class="link" to="/music">Music</nuxt-link>
27 |       </li>
28 |       <li>
29 |         <nuxt-link class="link" to="/three">3D</nuxt-link>
30 |       </li>
31 |     </ul>
32 |   </section>
33 | </template>
34 | 
35 | <script>
36 | export default {}
37 | </script>
38 | 
39 | <style>
40 | .links {
41 |   padding-top: 15px;
42 | }
43 | 
44 | .links li,
45 | .links {
46 |   list-style: none;
47 |   margin: 0;
48 |   padding: 0;
49 | }
50 | 
51 | .link {
52 |   color: var(--color-snow);
53 |   text-decoration-style: dashed;
54 |   text-decoration-color: var(--color-purple);
55 |   display: block;
56 |   margin-bottom: 0.5rem;
57 | 
58 |   transition: text-decoration-color 150ms, color 150ms;
59 | 
60 |   &:hover {
61 |     text-decoration-color: var(--color-snow);
62 |     color: var(--color-purple);
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/components/AppLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two"/>
 4 |     <div class="Triangle Triangle--one"/>
 5 |     <div class="Triangle Triangle--three"/>
 6 |     <div class="Triangle Triangle--four"/>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41B883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3B8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495E;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/assets/datasets.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "text": "First Dataset",
  4 |     "value": [
  5 |       25,
  6 |       37,
  7 |       15,
  8 |       13,
  9 |       25,
 10 |       30,
 11 |       11,
 12 |       17,
 13 |       35,
 14 |       10,
 15 |       25,
 16 |       15,
 17 |       5,
 18 |       27,
 19 |       15,
 20 |       13,
 21 |       25,
 22 |       36,
 23 |       15,
 24 |       14,
 25 |       35,
 26 |       10,
 27 |       14,
 28 |       15,
 29 |       35,
 30 |       17,
 31 |       12,
 32 |       13,
 33 |       25,
 34 |       30,
 35 |       14,
 36 |       17,
 37 |       35,
 38 |       10,
 39 |       25,
 40 |       15
 41 |     ]
 42 |   },
 43 |   {
 44 |     "text": "Second Dataset",
 45 |     "value": [
 46 |       13,
 47 |       25,
 48 |       30,
 49 |       11,
 50 |       17,
 51 |       35,
 52 |       10,
 53 |       25,
 54 |       15,
 55 |       5,
 56 |       27,
 57 |       15,
 58 |       13,
 59 |       25,
 60 |       36,
 61 |       15,
 62 |       14,
 63 |       35,
 64 |       10,
 65 |       14,
 66 |       15,
 67 |       35,
 68 |       17,
 69 |       12,
 70 |       13,
 71 |       25,
 72 |       30,
 73 |       14,
 74 |       17,
 75 |       35,
 76 |       10,
 77 |       25,
 78 |       15,
 79 |       25,
 80 |       37,
 81 |       15
 82 |     ]
 83 |   },
 84 |   {
 85 |     "text": "Third Dataset",
 86 |     "value": [
 87 |       35,
 88 |       10,
 89 |       25,
 90 |       15,
 91 |       5,
 92 |       27,
 93 |       15,
 94 |       13,
 95 |       25,
 96 |       36,
 97 |       15,
 98 |       14,
 99 |       35,
100 |       10,
101 |       14,
102 |       15,
103 |       35,
104 |       17,
105 |       12,
106 |       13,
107 |       25,
108 |       30,
109 |       14,
110 |       17,
111 |       35,
112 |       10,
113 |       25,
114 |       15,
115 |       25,
116 |       37,
117 |       15,
118 |       13,
119 |       25,
120 |       30,
121 |       11,
122 |       17
123 |     ]
124 |   }
125 | ]
126 | 


--------------------------------------------------------------------------------
/components/three/Object3D.js:
--------------------------------------------------------------------------------
 1 | // import { Mesh } from 'three'
 2 | 
 3 | function walkGet (obj, path) {
 4 |   const keys = path.split('.')
 5 |   while (keys.length) {
 6 |     obj = obj[keys.shift()]
 7 |   }
 8 |   return obj
 9 | }
10 | 
11 | function walkSet (obj, path, val) {
12 |   const keys = path.split('.')
13 |   while (keys.length > 1) {
14 |     obj = obj[keys.shift()]
15 |   }
16 |   obj[keys.shift()] = val
17 | }
18 | 
19 | function propWatcher (propsToWatch) {
20 |   return Object.keys(propsToWatch).reduce((watch, prop) => {
21 |     watch[prop] = {
22 |       handler (val) {
23 |         walkSet(this.obj, propsToWatch[prop], val)
24 |       },
25 |       // this is not enough, because obj doesn't exist
26 |       // immediate: true,
27 |     }
28 |     return watch
29 |   }, {})
30 | }
31 | 
32 | const watch = propWatcher({
33 |   'scale.x': 'scale.x',
34 |   'scale.y': 'scale.y',
35 |   'scale.z': 'scale.z',
36 | 
37 |   'position.x': 'position.x',
38 |   'position.y': 'position.y',
39 |   'position.z': 'position.z',
40 | 
41 |   'rotation.x': 'rotation.x',
42 |   'rotation.y': 'rotation.y',
43 |   'rotation.z': 'rotation.z',
44 | })
45 | 
46 | const VectorType = (v = 0) => ({
47 |   type: Object,
48 |   default: () => ({
49 |     x: v,
50 |     y: v,
51 |     z: v,
52 |   }),
53 | })
54 | 
55 | export default {
56 |   inject: ['scene'],
57 | 
58 |   props: {
59 |     position: Object,
60 |     rotation: Object,
61 |     scale: Object,
62 |   },
63 | 
64 |   mounted () {
65 |     if (!this.obj) return
66 |     this.scene.add(this.obj)
67 |     Object.entries(watch).forEach(([prop, { handler }]) => {
68 |       try {
69 |         const val = walkGet(this, prop)
70 |         if (val == null) return
71 |         handler.call(this, val)
72 |       } catch (err) {}
73 |     })
74 |   },
75 | 
76 |   beforeDestroy () {
77 |     if (this.obj) this.scene.remove(this.obj)
78 |   },
79 | 
80 |   render (h) {
81 |     return !this.$slots.default ? h() : h('div', this.$slots.default)
82 |   },
83 | 
84 |   watch,
85 | }
86 | 


--------------------------------------------------------------------------------
/pages/sudoku-motion.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Lazy Sudoku</h1>
 4 |     <p>Keep hitting the shuffle button until you win.</p>
 5 | 
 6 |     <select v-model="spring">
 7 |       <option>noWobble</option>
 8 |       <option>wobbly</option>
 9 |       <option>gentle</option>
10 |       <option>stiff</option>
11 |     </select>
12 |     <button @click="shuffle">
13 |       Shuffle
14 |     </button>
15 |     <Motion :values="positions" class="sudoku" tag="div" :spring="spring">
16 |       <template slot-scope="positions" >
17 |         <div
18 |           v-for="cell in cells"
19 |           :key="cell.id"
20 |           class="cell"
21 |           :style="{ transform: `translate(${positions[cell.id].x}px, ${positions[cell.id].y}px)` }"
22 |         >
23 |           {{ cell.number }}
24 |         </div>
25 |       </template>
26 |     </Motion>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import shuffle from 'lodash/shuffle'
32 | 
33 | export default {
34 |   data() {
35 |     return {
36 |       spring: 'gentle',
37 |       cells: Array.apply(null, { length: 81 }).map((_, index) => ({
38 |         id: index,
39 |         number: index % 9 + 1,
40 |       })),
41 |     }
42 |   },
43 | 
44 |   methods: {
45 |     shuffle: function() {
46 |       this.cells = shuffle(this.cells)
47 |     },
48 |   },
49 | 
50 |   computed: {
51 |     positions() {
52 |       return this.cells.reduce((positions, cell, i) => {
53 |         const size = 31
54 |         const x = i % 9
55 |         const y = Math.floor(i / 9)
56 |         positions[cell.id] = {
57 |           x: x * size + 1 + Math.floor(x / 3),
58 |           y: y * size + 1 + Math.floor(y / 3),
59 |         }
60 |         return positions
61 |       }, Array(this.cells.length))
62 |     },
63 |   },
64 | }
65 | </script>
66 | 
67 | <style scoped>
68 | .sudoku {
69 |   width: calc(var(--sudoku-cell-size) * 9 - 6px);
70 |   height: calc(var(--sudoku-cell-size) * 9 - 6px);
71 |   margin: auto;
72 |   margin-top: 10px;
73 | }
74 | .cell {
75 |   display: flex;
76 |   position: absolute;
77 |   justify-content: space-around;
78 |   align-items: center;
79 |   width: var(--sudoku-cell-size);
80 |   height: var(--sudoku-cell-size);
81 |   border: 1px solid #aaa;
82 |   margin-right: -1px;
83 |   margin-bottom: -1px;
84 | }
85 | .cell:nth-child(3n) {
86 |   margin-right: 0;
87 | }
88 | .cell:nth-child(27n) {
89 |   margin-bottom: 0;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/pages/plot-motion.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="plot-motion">
  3 |     <select v-model="selected">
  4 |       <option v-for="option in options" v-bind:value="option.value">
  5 |         {{ option.text }}
  6 |       </option>
  7 |     </select>
  8 | 
  9 |     <svg viewBox="0 0 400 400" :style="{ transform: `translateY(${370 - getMax}px)` }">
 10 |       <!--xaxis -->
 11 |       <g class="xaxis">
 12 |         <line x1="-2" :y1="getMax - 369" x2="365" :y2="getMax - 369"/>
 13 |         <g v-for="(select, index) in selected">
 14 |           <line :y1="getMax - 369" :y2="getMax - 362" v-bind="{ 'x1':index*10, 'x2':index*10 }"/>
 15 |           <text v-if="index % 5 === 0" v-bind="{ 'x':index*10, 'y': getMax - 349 }">{{ index }}</text>
 16 |         </g>
 17 |       </g>
 18 | 
 19 |       <!--yaxis -->
 20 |       <g class="yaxis">
 21 |         <line x1="0" y1="1" :x2="getMax" y2="1"/>
 22 |         <g v-for="n in getMaxRange">
 23 |           <line y1="0" y2="7" v-bind="{ 'x1':n*10, 'x2':n*10 }"/>
 24 |           <text v-if="n % 5 === 0" v-bind="{ 'x':getMax-(n*10)-5, 'y':20 }">{{ n }}</text>
 25 |         </g>
 26 |       </g>
 27 | 
 28 |     <!-- bars -->
 29 |       <motion tag="g" :values="selected">
 30 |         <template slot-scope="vals">
 31 |           <g v-for="(select, index) in vals" class="bars">
 32 |             <rect :x="index*10+20" :y="getMax-select*10" width="10" :height="select*10"/>
 33 |           </g>
 34 |         </template>
 35 |       </motion>
 36 | 
 37 |     </svg>
 38 | 
 39 |     <button @click="randomize">Random</button>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import options from '~/assets/datasets'
 45 | import range from 'lodash/range'
 46 | 
 47 | export default {
 48 |   data() {
 49 |     return {
 50 |       selected: options[0].value.slice(),
 51 |       options,
 52 |     }
 53 |   },
 54 | 
 55 |   computed: {
 56 |     getMax() {
 57 |       return Math.max.apply(Math, this.selected) * 10
 58 |     },
 59 |     getMaxRange() {
 60 |       let maxi = Math.max.apply(Math, this.selected)
 61 |       return range(maxi)
 62 |     },
 63 |   },
 64 | 
 65 |   methods: {
 66 |     randomize() {
 67 |       this.selected = this.selected.map(_ => Math.floor(Math.random() * 37))
 68 |     },
 69 |   },
 70 | }
 71 | </script>
 72 | 
 73 | <style lang="scss" scoped>
 74 | .plot-motion {
 75 |   text-align: center;
 76 |   max-width: 400px;
 77 |   margin: 30px auto;
 78 |   display: inline-block;
 79 | }
 80 | 
 81 | select {
 82 |   margin-bottom: 1rem;
 83 | }
 84 | 
 85 | svg {
 86 |   & text {
 87 |     font-size: 0.75rem;
 88 |     fill: var(--color-smoke);
 89 |   }
 90 | }
 91 | 
 92 | line {
 93 |   stroke: var(--color-smoke);
 94 |   stroke-width: 2px;
 95 | }
 96 | 
 97 | .xaxis {
 98 |   transform: translate(20px, 370px);
 99 | }
100 | 
101 | .yaxis {
102 |   transform: translate(20px, 0px) rotate(90deg);
103 | }
104 | 
105 | .bars {
106 |   fill: var(--color-purple);
107 | }
108 | 
109 | $amt: 350px;
110 | $max: 40;
111 | $color: 200/$max;
112 | 
113 | @for $i from 1 through $max {
114 |   .bars:nth-child(#{$i}) rect {
115 |     fill: hsl(261 - ($i / $max) * 20%, 100% - ($i / $max) * 60%, 61% - ($i / $max) * 20%);
116 |     // fill: hsl(($i - 10)*($color*1.25),  ($i - 1)*$color, 40%);
117 |   }
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/pages/polygon.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <svg width="300" height="300">
  4 |       <Tweezing :to="stats" tween="tweenjs" :duration="updateInterval" :easing="easing">
  5 |         <polygon
  6 |           slot-scope="points"
  7 |           :points="transformToPoints(points)"
  8 |         ></polygon>
  9 |       </Tweezing>
 10 |       <circle cx="150" cy="150" r="140"></circle>
 11 |     </svg>
 12 |     <label>Sides: {{ sides }}</label>
 13 |     <input
 14 |       type="range"
 15 |       min="3"
 16 |       max="500"
 17 |       v-model.number="sides"
 18 |     >
 19 |     <label>Minimum Radius: {{ (minRadius * 100).toFixed(0) }}%</label>
 20 |     <input
 21 |       type="range"
 22 |       min="0"
 23 |       step="0.01"
 24 |       max="0.9"
 25 |       v-model.number="minRadius"
 26 |     >
 27 |     <label>Update Interval: {{ updateInterval }}ms</label>
 28 |     <input
 29 |       type="range"
 30 |       min="10"
 31 |       max="2000"
 32 |       v-model.number="updateInterval"
 33 |     >
 34 |     <label class="text">
 35 |       Easing Equation
 36 |       <select v-model="equationType">
 37 |         <option v-for="easing in easings" :value="easing.value">{{ easing.text }}</option>
 38 |       </select>
 39 |     </label>
 40 |     <br>
 41 |     <label class="radio">
 42 |       <input v-model="easingType" type="radio" name="easing-type" value="In">
 43 |       In
 44 |     </label>
 45 |     <label class="radio">
 46 |       <input v-model="easingType" type="radio" name="easing-type" value="Out">
 47 |       Out
 48 |     </label>
 49 |     <label class="radio">
 50 |       <input v-model="easingType" type="radio" name="easing-type" value="InOut">
 51 |       InOut
 52 |     </label>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | import TWEEN from '@tweenjs/tween.js'
 58 | 
 59 | function valueToPoint(value, index, total) {
 60 |   const x = 0
 61 |   const y = -value * 0.9
 62 |   const angle = Math.PI * 2 / total * index
 63 |   const cos = Math.cos(angle) * 150
 64 |   const sin = Math.sin(angle) * 150
 65 |   return {
 66 |     x: x * cos - y * sin + 150,
 67 |     y: x * sin + y * cos + 150,
 68 |   }
 69 | }
 70 | 
 71 | function generatePoints(stats) {
 72 |   const total = stats.length
 73 |   return stats
 74 |     .map(function(stat, index) {
 75 |       const point = valueToPoint(stat, index, total)
 76 |       return point.x + ',' + point.y
 77 |     })
 78 |     .join(' ')
 79 | }
 80 | 
 81 | export default {
 82 |   data() {
 83 |     const defaultSides = 10
 84 |     return {
 85 |       sides: defaultSides,
 86 |       stats: Array.from(Array(defaultSides), () => 0),
 87 |       minRadius: 0.5,
 88 |       updateInterval: 500,
 89 | 
 90 |       // custom easings
 91 |       equationType: TWEEN.Easing.Linear,
 92 |       easingType: 'Out',
 93 |     }
 94 |   },
 95 | 
 96 |   computed: {
 97 |     easing() {
 98 |       return this.equationType[this.easingType]
 99 |     },
100 | 
101 |     easings() {
102 |       return Object.keys(TWEEN.Easing).map(easing => ({
103 |         value: TWEEN.Easing[easing],
104 |         text: easing,
105 |       }))
106 |     },
107 |   },
108 | 
109 |   mounted() {
110 |     this.setupInterval()
111 |   },
112 | 
113 |   watch: {
114 |     updateInterval: 'setupInterval',
115 |   },
116 | 
117 |   methods: {
118 |     randomizeStats() {
119 |       this.stats = Array.from(
120 |         Array(this.sides),
121 |         () => (1 - this.minRadius) * Math.random() + this.minRadius
122 |       )
123 |     },
124 | 
125 |     setupInterval() {
126 |       if (this.interval) clearInterval(this.interval)
127 |       this.interval = setInterval(this.randomizeStats.bind(this), this.updateInterval)
128 |     },
129 | 
130 |     transformToPoints(pointsArray) {
131 |       const { length } = pointsArray
132 |       return pointsArray
133 |         .map((p, i) => valueToPoint(p, i, length))
134 |         .reduce((points, { x, y }) => points + ` ${x},${y}`, '')
135 |     },
136 |   },
137 | }
138 | </script>
139 | 
140 | <style scoped>
141 | svg {
142 |   display: block;
143 | }
144 | polygon {
145 |   fill: var(--color-purple);
146 | }
147 | circle {
148 |   fill: transparent;
149 |   stroke: #35495e;
150 | }
151 | input[type='range'] {
152 |   display: block;
153 |   width: 100%;
154 |   margin-bottom: 15px;
155 | }
156 | </style>
157 | 


--------------------------------------------------------------------------------
/pages/three.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section>
  3 |     <div class="container">
  4 |       <no-ssr>
  5 |         <Renderer :width="width" :height="height">
  6 |           <Scene>
  7 |             <Motion v-if="smooth" :values="cameraPosition">
  8 |               <Camera slot-scope="position" :position="position" />
  9 |             </Motion>
 10 |             <Camera v-else :position="cameraPosition"/>
 11 | 
 12 |             <AmbientLight/>
 13 | 
 14 |             <SpotLight :position="{ x: -10, y: 15, z: -5 }" />
 15 |             <SpotLight :position="{ x: 7, y: 5, z: 5 }" />
 16 | 
 17 |             <template v-if="smooth">
 18 |               <Motion v-for="(cube, i) in cubes" :values="cube" :key="i">
 19 |                 <Cube
 20 |                   slot-scope="cube"
 21 |                   :rotation="rotation"
 22 |                   :scale="cubeScale"
 23 |                   :position="cube.position"
 24 |                   :color="cube.color"
 25 |                 />
 26 |               </Motion>
 27 |             </template>
 28 |             <template v-else>
 29 |               <Cube
 30 |                 v-for="(cube, i) in cubes"
 31 |                 :key="i"
 32 |                 :rotation="rotation"
 33 |                 :scale="cubeScale"
 34 |                 :position="cube.position"
 35 |                 :color="cube.color"
 36 |               />
 37 |             </template>
 38 |             <Ground/>
 39 |           </Scene>
 40 |         </Renderer>
 41 |       </no-ssr>
 42 |     </div>
 43 |     <div class="controls">
 44 |       <input type="range" v-model="scale" min="0.2" max="5" step="0.1" style="width: 100%" />
 45 |       <br/>
 46 | 
 47 |       <label>
 48 |         <input type="checkbox" v-model="smooth"/> Smooth
 49 |       </label>
 50 |       <br>
 51 | 
 52 |       <button @click="addCube">Add Cube</button>
 53 |       <button @click="cubes.shift()">Remove Cube</button>
 54 |       <button @click="shuffle">Shuffle Cube</button>
 55 |     </div>
 56 |   </section>
 57 | </template>
 58 | 
 59 | <script>
 60 | import { Clock } from 'three'
 61 | import random from 'lodash/random'
 62 | import shuffle from 'lodash/shuffle'
 63 | import sample from 'lodash/sample'
 64 | import randomColor from 'randomcolor'
 65 | 
 66 | let id = 0
 67 | 
 68 | export default {
 69 |   data() {
 70 |     return {
 71 |       width: typeof window !== 'undefined' && window.innerWidth,
 72 |       height: typeof window !== 'undefined' && window.innerHeight,
 73 | 
 74 |       smooth: false,
 75 | 
 76 |       cubes: [],
 77 | 
 78 |       cameraPosition: {
 79 |         x: 0,
 80 |         y: 10,
 81 |         z: 15,
 82 |       },
 83 | 
 84 |       lightPosition: {
 85 |         x: 0,
 86 |         y: 15,
 87 |         z: 5,
 88 |       },
 89 | 
 90 |       position: {
 91 |         x: 0,
 92 |         y: 2,
 93 |         z: 0,
 94 |       },
 95 | 
 96 |       rotation: {
 97 |         x: 0,
 98 |         y: 0,
 99 |         z: 0,
100 |       },
101 | 
102 |       scale: 1,
103 |     }
104 |   },
105 | 
106 |   computed: {
107 |     cubeScale() {
108 |       return {
109 |         x: this.scale,
110 |         y: this.scale,
111 |         z: this.scale,
112 |       }
113 |     },
114 |   },
115 | 
116 |   mounted() {
117 |     this.addCube()
118 |     // window.vm = this
119 |     this.clock = new Clock()
120 |     this.animate()
121 |   },
122 | 
123 |   methods: {
124 |     setCameraX({ target }) {
125 |       this.cameraPosition = {
126 |         ...this.cameraPosition,
127 |         x: target.value,
128 |       }
129 |     },
130 | 
131 |     animate() {
132 |       const delta = this.clock.getDelta()
133 | 
134 |       this.rotation.x += 0.25 * delta
135 |       this.rotation.y += 2 * delta
136 |       this.rotation.z += 1 * delta
137 |       requestAnimationFrame(this.animate.bind(this))
138 |     },
139 | 
140 |     addCube() {
141 |       this.cubes.push({
142 |         id: id++,
143 |         color: randomColor(),
144 |         position: {
145 |           x: random(-5, 5),
146 |           y: random(1, 10),
147 |           z: random(-5, 6),
148 |         },
149 |       })
150 | 
151 |       if (this.cubes.length < 2) return
152 | 
153 |       this.cameraPosition = {
154 |         x: random(-10, 10),
155 |         y: random(1, 20),
156 |         z: sample([-1, 1]) * (8 + random(0, 2)),
157 |       }
158 |     },
159 | 
160 |     shuffle() {
161 |       this.cubes = shuffle(this.cubes)
162 |     },
163 |   },
164 | }
165 | </script>
166 | 
167 | <style scoped>
168 | .container {
169 |   display: flex;
170 |   padding: 0;
171 |   width: 100%;
172 |   justify-content: center;
173 |   align-items: center;
174 |   text-align: center;
175 | }
176 | 
177 | .controls {
178 |   padding: 14px;
179 |   position: absolute;
180 |   top: 0;
181 |   background-color: rgba(0, 0, 0, 0.3);
182 | }
183 | 
184 | button {
185 |   padding: 0;
186 | }
187 | </style>
188 | 


--------------------------------------------------------------------------------
/assets/main.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --color-dark: #161616;
  3 |   --color-ocean: #416dea;
  4 |   --color-grass: #3dd28d;
  5 |   --color-snow: #ffffff;
  6 |   --color-salmon: #f32c52;
  7 |   --color-sun: #feee7d;
  8 |   --color-dark-purple: #492789;
  9 |   --color-purple: #8652e7;
 10 |   --color-alge: #7999a9;
 11 |   --color-flower: #353866;
 12 |   --color-smoke: #e4e4e4;
 13 | 
 14 |   --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
 15 |     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 16 | 
 17 |   /* Must change based on Font */
 18 |   --sudoku-cell-size: 32px;
 19 | }
 20 | 
 21 | html {
 22 |   font-family: var(--font-face);
 23 |   font-size: 22px;
 24 |   word-spacing: 1px;
 25 |   -ms-text-size-adjust: 100%;
 26 |   -webkit-text-size-adjust: 100%;
 27 |   -moz-osx-font-smoothing: grayscale;
 28 |   -webkit-font-smoothing: antialiased;
 29 |   box-sizing: border-box;
 30 |   background-color: #111111;
 31 |   color: white;
 32 | }
 33 | 
 34 | .container {
 35 |   padding: 0.3rem;
 36 |   min-height: 100vh;
 37 |   display: flex;
 38 |   width: 100%;
 39 |   justify-content: center;
 40 |   align-items: center;
 41 |   text-align: center;
 42 |   background-color: #111111;
 43 | }
 44 | 
 45 | input[type='text'],
 46 | input[type='number'] {
 47 |   padding: 0.3rem;
 48 |   border-radius: 0.15rem;
 49 |   border: 1px solid var(--color-purple);
 50 | }
 51 | 
 52 | input[type='number'] {
 53 |   width: 4rem;
 54 | }
 55 | 
 56 | .mb1 {
 57 |   margin-bottom: 1rem;
 58 | }
 59 | 
 60 | p {
 61 |   margin: 0.8rem auto;
 62 | }
 63 | 
 64 | label.text {
 65 |   display: flex;
 66 |   width: 100%;
 67 |   align-items: center;
 68 |   justify-content: space-around;
 69 |   margin-bottom: 0.3rem;
 70 | }
 71 | 
 72 | input[type='range'] {
 73 |   display: block;
 74 |   -webkit-appearance: none;
 75 |   background-color: var(--color-smoke);
 76 |   height: 0.3rem;
 77 |   border-radius: 0.3rem;
 78 |   margin: calc(0.5rem * (1.3 - 0.3)) auto;
 79 |   outline: 0;
 80 | 
 81 |   &::-webkit-slider-thumb {
 82 |     -webkit-appearance: none;
 83 |     background-color: var(--color-purple);
 84 |     width: 1.3rem;
 85 |     height: 1.3rem;
 86 |     border-radius: 50%;
 87 |     border: 0.15rem solid #111111;
 88 |     cursor: pointer;
 89 |     transition: 0.2s ease-in-out;
 90 | 
 91 |     &:hover,
 92 |     &:active {
 93 |       /* background-color: var(--color-snow); */
 94 |       border: 0.15rem solid var(--color-smoke);
 95 |     }
 96 | 
 97 |     &:active {
 98 |       transform: scale(1.6);
 99 |     }
100 |   }
101 | 
102 |   &[disabled]::-webkit-slider-thumb {
103 |     cursor: not-allowed;
104 |     width: 1rem;
105 |     height: 1rem;
106 |     border: 0.075rem solid var(--color-dark);
107 |     background-color: var(--color-smoke);
108 | 
109 |     &:hover {
110 |       border: 0.075rem solid var(--color-dark);
111 |       background-color: var(--color-smoke);
112 |     }
113 |   }
114 | }
115 | 
116 | input:active,
117 | input:focus,
118 | input:hover {
119 |   color: var(--color-purple);
120 | }
121 | 
122 | label {
123 |   transition: color 150ms;
124 |   &:hover,
125 |   &:active,
126 |   &:focus {
127 |     color: var(--color-purple);
128 |   }
129 | }
130 | 
131 | label.radio {
132 |   cursor: pointer;
133 | }
134 | 
135 | input[type='radio'] {
136 |   -webkit-appearance: none;
137 |   -moz-appearance: none;
138 |   appearance: none;
139 |   border-radius: 50%;
140 |   width: 0.8rem;
141 |   height: 0.8rem;
142 |   border: 0.4rem solid var(--color-smoke);
143 |   background-color: var(--color-purple);
144 |   transition: border 150ms;
145 | 
146 |   cursor: pointer;
147 | 
148 |   &:checked {
149 |     border: 0.15rem solid var(--color-smoke);
150 |   }
151 | }
152 | 
153 | button {
154 |   overflow: hidden;
155 | 
156 |   margin: 0.6rem;
157 |   padding: 0.75rem;
158 | 
159 |   cursor: pointer;
160 |   user-select: none;
161 |   text-align: center;
162 |   white-space: nowrap;
163 |   text-decoration: none !important;
164 |   text-transform: none;
165 |   text-transform: capitalize;
166 | 
167 |   background-color: var(--color-purple);
168 |   color: var(--color-snow);
169 |   border: 0.15rem solid var(--color-purple);
170 |   border-radius: 0.3rem;
171 | 
172 |   font-size: 1rem;
173 |   font-weight: 500;
174 |   line-height: 1.3;
175 | 
176 |   -webkit-appearance: none;
177 |   -moz-appearance: none;
178 |   appearance: none;
179 | 
180 |   min-width: 10rem;
181 |   text-align: center;
182 | 
183 |   box-shadow: 2px 5px 10px var(--color-dark);
184 | 
185 |   transition-property: border-color, color, background-color, opacity;
186 |   transition-duration: 150ms;
187 | 
188 |   &:hover {
189 |     background-color: var(--color-purple);
190 |     border: 0.15rem solid var(--color-snow);
191 |   }
192 | 
193 |   &:active {
194 |     color: var(--color-purple);
195 |     background-color: var(--color-smoke);
196 |   }
197 | }
198 | 
199 | canvas[id^='defaultCanvas'] {
200 |   display: none;
201 |   visibility: hidden;
202 | }
203 | 
204 | select {
205 |   background: var(--color-smoke);
206 |   color: var(--color-dark-purple);
207 |   border: 0.05rem solid var(--color-dark-purple);
208 |   outline: 0;
209 |   cursor: pointer;
210 |   height: 1.5rem;
211 | 
212 |   transition: color 150ms;
213 | 
214 |   &:hover {
215 |     color: var(--color-purple);
216 |   }
217 | }
218 | 


--------------------------------------------------------------------------------
/components/music.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="music-container">
  3 |     <transition
  4 |       mode="out-in"
  5 |       enter-active-class="animated rotateInDownRight"
  6 |       leave-active-class="animated hinge"
  7 |     >
  8 |       <div v-if="progress <= 1" key="loading">
  9 |         Loading ({{ (progress * 100).toFixed(0)}}%)
 10 |         <br>
 11 |         {{ loadingBar }}
 12 |       </div>
 13 |       <div v-else>
 14 |         <button class="audio-btn" @click="play" v-if="!playing">⏯ Play</button>
 15 |         <button class="audio-btn" @click="pause" v-else>⏸ Pause</button>
 16 |         <button class="audio-btn" @click="toggleVolume">🔈 Toggle volume</button>
 17 |         <br>
 18 |         <select v-model="mode" class="mb1">
 19 |           <option>normal</option>
 20 |           <option>motion</option>
 21 |           <option>tween.js</option>
 22 |         </select>
 23 |         <input type="range" v-model.number="rate" min="0.05" max="4" step="0.05">
 24 |         <br>
 25 |         <template v-if="mode === 'normal'">
 26 |           <p>Rate: {{ rate.toFixed(2) }}</p>
 27 |         </template>
 28 |         <Motion :value="rate" :spring="spring" v-else-if="mode === 'motion'">
 29 |           <template slot-scope="{ value }">
 30 |             <input type="range" :value="value" disabled min="0.05" max="4" step="0.05">
 31 |             <p>Rate: {{ setRate(value).toFixed(2) }}</p>
 32 |             <label class="text">
 33 |               Stiffness
 34 |               <input v-model.number="spring.stiffness" step="10" type="number"/>
 35 |             </label>
 36 |             <label class="text">
 37 |               Damping
 38 |               <input v-model.number="spring.damping" step="1" type="number"/>
 39 |             </label>
 40 |             <button class="fun-btn" @click="fun">🎩 Fun!</button>
 41 |           </template>
 42 |         </Motion>
 43 |         <template v-else-if="mode === 'tween.js'">
 44 |           <Tweezing :to="rate" tween="tweenjs" :duration="3000" :easing="easing">
 45 |             <div slot-scope="value">
 46 |               <input type="range" :value="value" disabled min="0.05" max="4" step="0.05">
 47 |               <p>Rate: {{ setRate(value).toFixed(2) }}</p>
 48 |             </div>
 49 |           </Tweezing>
 50 |           <label class="text">
 51 |             Easing Equation
 52 |             <select v-model="equationType">
 53 |               <option v-for="easing in easings" :value="easing.value">{{ easing.text }}</option>
 54 |             </select>
 55 |           </label>
 56 |           <br>
 57 |           <label class="radio">
 58 |             <input v-model="easingType" type="radio" name="easing-type" value="In">
 59 |             In
 60 |           </label>
 61 |           <label class="radio">
 62 |             <input v-model="easingType" type="radio" name="easing-type" value="Out">
 63 |             Out
 64 |           </label>
 65 |           <label class="radio">
 66 |             <input v-model="easingType" type="radio" name="easing-type" value="InOut">
 67 |             InOut
 68 |           </label>
 69 |         </template>
 70 |       </div>
 71 |     </transition>
 72 |   </div>
 73 | </template>
 74 | 
 75 | <script>
 76 | import TWEEN from '@tweenjs/tween.js'
 77 | import p5 from 'p5'
 78 | import p5Sound from 'p5/lib/addons/p5.sound'
 79 | 
 80 | const p = new p5()
 81 | 
 82 | const music = '/meatball-parade.mp3'
 83 | 
 84 | export default {
 85 |   data() {
 86 |     return {
 87 |       mode: 'normal',
 88 |       rate: 1,
 89 |       playing: false,
 90 | 
 91 |       // motion
 92 |       spring: {
 93 |         stiffness: 170,
 94 |         damping: 26,
 95 |         precision: 0.01,
 96 |       },
 97 | 
 98 |       // tween.js
 99 |       equationType: TWEEN.Easing.Linear,
100 |       easingType: 'In',
101 | 
102 |       // loading
103 |       progress: 0,
104 |     }
105 |   },
106 | 
107 |   computed: {
108 |     easing() {
109 |       return this.equationType[this.easingType]
110 |     },
111 | 
112 |     easings() {
113 |       return Object.keys(TWEEN.Easing).map(easing => ({
114 |         value: TWEEN.Easing[easing],
115 |         text: easing,
116 |       }))
117 |     },
118 | 
119 |     loadingBar() {
120 |       const n = 10
121 |       const done = Math.min(Math.floor(this.progress * n), 10)
122 |       console.log(done)
123 |       return '🔊'.repeat(done) + '🔇'.repeat(n - done)
124 |     },
125 |   },
126 | 
127 |   mounted() {
128 |     this.song = p.loadSound(
129 |       music,
130 |       async () => {
131 |         this.progress = 1
132 |         await this.$nextTick()
133 |         this.progress = 2
134 |       },
135 |       console.error,
136 |       progress => (this.progress = progress)
137 |       // ({ loaded, total }) => {
138 |       //   console.log(arguments)
139 |       //   this.progress = { loaded, total }
140 |       // }
141 |     )
142 |   },
143 | 
144 |   destroyed() {
145 |     this.song.stop()
146 |   },
147 | 
148 |   methods: {
149 |     setRate(rate) {
150 |       this.song.rate(rate)
151 |       return rate
152 |     },
153 |     async fun() {
154 |       this.song.jump(51)
155 |       this.mode = ''
156 |       this.rate = 1.05
157 |       await this.$nextTick()
158 |       this.mode = 'motion'
159 |       this.spring.stiffness = 95
160 |       this.spring.damping = 0
161 |       await this.$nextTick()
162 |       this.rate = 1
163 |     },
164 | 
165 |     play() {
166 |       this.song.setVolume(0.1)
167 |       this.song.loop()
168 |       this.playing = true
169 |     },
170 | 
171 |     pause() {
172 |       this.song.pause()
173 |       this.playing = false
174 |     },
175 | 
176 |     toggleVolume() {
177 |       this.song.amp(this.song.getVolume() < 1 ? 1 : 0.1, 0.3)
178 |     },
179 |   },
180 | 
181 |   watch: {
182 |     rate(rate) {
183 |       if (this.mode === 'normal') this.song.rate(p.constrain(rate, 0.01, 4))
184 |     },
185 |   },
186 | }
187 | </script>
188 | 
189 | <style scoped>
190 | input[type='range'] {
191 |   max-width: 15rem;
192 |   width: 100vw;
193 | }
194 | 
195 | .fun-btn {
196 |   margin-top: 1rem;
197 |   background-color: var(--color-grass);
198 | }
199 | .audio-btn {
200 |   /* margin: 1rem; */
201 | }
202 | 
203 | .animated.hinge {
204 |   position: absolute;
205 | }
206 | 
207 | .music-container {
208 |   min-width: 270px;
209 |   min-height: 20px;
210 | }
211 | </style>
212 | 


--------------------------------------------------------------------------------
/motions/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <Motion
  4 |       ref="motion"
  5 |       v-if="!resetting"
  6 |       :value="target"
  7 |       tag="div"
  8 |       @motion-end="isTracking = false"
  9 |       :spring="spring"
 10 |     >
 11 |       <template slot-scope="{ value }">
 12 |         <div class="graph">
 13 |           <svg :style="{ '--stroke-width': 2 / aspectRatio + 'px' }" :width="svgWidth" :height="svgHeight" preserveAspectRatio="none" :viewBox="viewBox">
 14 |             <line x1="0" :x2="chartWidth" :y1="svgHeight - maxValue" :y2="svgHeight - maxValue"></line>
 15 |             <path :d="pathD"></path>
 16 |           </svg>
 17 |           <div class="marker" :style="{ transform: `translateY(${-value * aspectRatio}px)`}"></div>
 18 |         </div>
 19 |         <p>Current value: {{ value }} {{ addPoint(value) }}</p>
 20 |         <p>Last rendered: {{ Math.round(lastRendered - initialTime) }}ms</p>
 21 |         <p>Finished at {{ Math.round(lastTime - initialTime) }}ms</p>
 22 |       </template>
 23 |     </Motion>
 24 | 
 25 |     <label>
 26 |       Target value
 27 |       <input v-model.number="maxValue" @input="delayedStart" step="10" type="number"/>
 28 |     </label>
 29 |     <br/>
 30 |     <label>
 31 |       Stiffness
 32 |       <input v-model.number="spring.stiffness" @input="delayedStart" step="10" type="number"/>
 33 |     </label>
 34 |     <br/>
 35 |     <label>
 36 |       Damping
 37 |       <input v-model.number="spring.damping" step="1" @input="delayedStart" type="number"/>
 38 |     </label>
 39 |     <br/>
 40 |     <label>
 41 |       Precision
 42 |       <input v-model.number="spring.precision" step="0.01" @input="delayedStart" type="number"/>
 43 |     </label>
 44 |     <br/>
 45 |     <button v-for="(preset, name) in presets" @click="setSpring(preset)">{{ name }}</button>
 46 |     <br/>
 47 | 
 48 |     <button @click="reset">Reset</button>
 49 |     <button @click="start">Start</button>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script>
 54 | import presets from 'vue-motion/src/presets'
 55 | import debounce from 'lodash/debounce'
 56 | 
 57 | export default {
 58 |   data () {
 59 |     return {
 60 |       spring: {
 61 |         stiffness: 170,
 62 |         damping: 26,
 63 |         precision: 0.01,
 64 |       },
 65 | 
 66 |       target: 0,
 67 |       resetting: false,
 68 |       maxValue: 100,
 69 |       isTracking: false,
 70 |       pathD: '',
 71 | 
 72 |       // last time we called addPoint
 73 |       lastTime: 0,
 74 |       // last time we added a point into the path
 75 |       lastRendered: 0,
 76 |       maxRegisteredValue: 0,
 77 |     }
 78 |   },
 79 | 
 80 |   computed: {
 81 |     svgWidth () {
 82 |       return 300
 83 |     },
 84 | 
 85 |     svgHeight () {
 86 |       return 140
 87 |     },
 88 | 
 89 |     aspectRatio () {
 90 |       return this.svgHeight / (this.svgHeight - this.svgTop)
 91 |     },
 92 | 
 93 |     maxValueProportion () {
 94 |       return this.maxValue / 100
 95 |     },
 96 | 
 97 |     presets () {
 98 |       return presets
 99 |     },
100 | 
101 |     svgTop () {
102 |       return Math.min(-this.maxRegisteredValue + this.svgHeight, 0) - 10
103 |     },
104 | 
105 |     chartWidth () {
106 |       return Math.max(this.svgWidth, this.lastRendered - this.initialTime)
107 |     },
108 | 
109 |     viewBox () {
110 |       return `0 ${this.svgTop} ${this.chartWidth} ${this.svgHeight - this.svgTop}`
111 |     },
112 |   },
113 | 
114 |   created () {
115 |     this.lastTime = 100
116 |     this.initialTime = 0
117 |     this.lastRendered = 100
118 | 
119 |     setTimeout(() => {
120 |       this.setSpring(this.presets.wobbly)
121 |     }, 2000)
122 |   },
123 | 
124 |   methods: {
125 |     async start () {
126 |       await this.reset()
127 |       if (!this.isTracking) {
128 |         this.pathD = `M0,${this.svgHeight} l0,0 `
129 |         this.isTracking = true
130 |         this.lastY = 0
131 |         this.maxRegisteredValue = 0
132 |         this.lastTime = performance.now()
133 |         this.initialTime = this.lastTime
134 |         this.lastRendered = this.lastTime
135 |       }
136 |       this.target = this.maxValue
137 |     },
138 | 
139 |     delayedStart: debounce(function () {
140 |       this.start()
141 |     }, 100),
142 | 
143 |     setSpring (spring) {
144 |       this.spring = {...spring}
145 |       this.spring.precision = this.spring.precision || 0.01
146 |       this.delayedStart()
147 |     },
148 | 
149 |     async reset () {
150 |       // small hack to reset it by removing it before changing the target
151 |       this.resetting = true
152 |       await this.$nextTick()
153 |       this.target = 0
154 |       this.resetting = false
155 |       this.isTracking = false
156 |     },
157 | 
158 |     addPoint (y) {
159 |       if (!this.isTracking) return
160 |       const now = performance.now()
161 |       const elapsed = now - this.lastTime
162 |       // do not render too much
163 |       if (elapsed <= 15) return
164 |       // make sure we compute all the time
165 |       const totalElapsed = now - this.lastRendered
166 |       /* y = this.maxValue - y + 80 */
167 |       if (Math.abs(y - this.lastY) > 0.1) {
168 |         this.lastRendered = now
169 |         this.pathD += `${totalElapsed},${-(this.lastY ? y - this.lastY : y)} `
170 |         if (y > this.maxRegisteredValue) this.maxRegisteredValue = y
171 |       }
172 |       this.lastY = y
173 |       this.lastTime = now
174 |     },
175 |   },
176 | }
177 | </script>
178 | 
179 | <style>
180 | @import url('https://fonts.googleapis.com/css?family=Lato');
181 | 
182 | body {
183 |   background-color: #111111;
184 |   font-family: 'Lato', sans-serif;
185 |   color: white;
186 | }
187 | 
188 | .graph {
189 |   display: inline-block;
190 |   position: relative;
191 |   padding-left: 1rem;
192 |   padding-top: 1rem;
193 | }
194 | 
195 | .graph svg {
196 |   margin-bottom: -4px;
197 |   border-left: #bbb 2px solid;
198 |   border-bottom: darkgrey 2px solid;
199 | }
200 | 
201 | .graph::after {
202 |   position: absolute;
203 |   bottom: 2px;
204 |   right: 2px;
205 |   content: 't';
206 |   text-align: left;
207 |   font-family: 'Futura';
208 |   font-size: 14px;
209 |   color: #bbb;
210 | }
211 | 
212 | .graph::before {
213 |   position: absolute;
214 |   top: 1rem;
215 |   left: 2px;
216 |   content: 'x';
217 |   text-align: left;
218 |   font-family: 'Futura';
219 |   font-size: 14px;
220 |   color: #bbb;
221 | }
222 | 
223 | .graph line {
224 |   stroke: crimson;
225 |   stroke-width: var(--stroke-width);
226 | }
227 | 
228 | .graph path {
229 |   fill: transparent;
230 |   stroke: white;
231 |   stroke-width: var(--stroke-width);
232 | }
233 | 
234 | .graph .marker {
235 |   position: absolute;
236 |   left: 100%;
237 | }
238 | 
239 | :root {
240 |   --marker-color: #bf0003;
241 |   --marker-size: 7px;
242 |   --stroke-width: 2px;
243 | }
244 | 
245 | .graph .marker::before {
246 |   content: '';
247 |   position: absolute;
248 |   left: 0;
249 |   bottom: calc(-1 * var(--marker-size));
250 |   width: 0;
251 |   height: 0;
252 |   border-top: var(--marker-size) solid transparent;
253 |   border-bottom: var(--marker-size) solid transparent;
254 |   border-right: var(--marker-size) solid var(--marker-color);
255 | }
256 | 
257 | .graph .marker::after {
258 |   content: '';
259 |   position: absolute;
260 |   left: var(--marker-size);
261 |   bottom: calc(-1 * var(--marker-size));
262 |   width: calc(var(--marker-size) * 2.4);
263 |   height: calc(var(--marker-size) * 2);
264 |   background: var(--marker-color);
265 | }
266 | 
267 | </style>
268 | 


--------------------------------------------------------------------------------
/pages/easings-graph.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="easing-graph">
  3 |     <Tweezing
  4 |       ref="tweezing"
  5 |       v-if="!resetting"
  6 |       :to="target"
  7 |       class="svg-container"
  8 |       @end="isTracking = false"
  9 |       :duration="1000"
 10 |       :easing="easing"
 11 |     >
 12 |       <div slot-scope="value">
 13 |         <div class="graph">
 14 |           <svg :style="{ '--stroke-width': 2 / aspectRatio + 'px' }" :width="svgWidth" :height="svgHeight" preserveAspectRatio="none" :viewBox="viewBox">
 15 |             <line x1="0" :x2="chartWidth" :y1="svgHeight - maxValue" :y2="svgHeight - maxValue"></line>
 16 |             <path :d="pathD"></path>
 17 |           </svg>
 18 |           <div class="marker" :style="{ transform: `translateY(${-value * aspectRatio}px)`}"></div>
 19 |         </div>
 20 |         <p>Current value: {{ addPoint(value).toFixed(2) }}</p>
 21 |         <p>Last rendered: {{ Math.round(lastRendered - initialTime) }}ms</p>
 22 |         <p>Finished at {{ Math.round(lastTime - initialTime) }}ms</p>
 23 |       </div>
 24 |     </Tweezing>
 25 | 
 26 |     <label class="text">
 27 |       Easing Equation
 28 |       <select v-model="equationType">
 29 |         <option v-for="easing in easings" :value="easing.value">{{ easing.text }}</option>
 30 |       </select>
 31 |     </label>
 32 |     <br>
 33 |     <label class="radio">
 34 |       <input v-model="easingType" type="radio" name="easing-type" value="In">
 35 |       In
 36 |     </label>
 37 |     <label class="radio">
 38 |       <input v-model="easingType" type="radio" name="easing-type" value="Out">
 39 |       Out
 40 |     </label>
 41 |     <label class="radio">
 42 |       <input v-model="easingType" type="radio" name="easing-type" value="InOut">
 43 |       InOut
 44 |     </label>
 45 | 
 46 |     <br>
 47 |     <button @click="stop">Stop</button>
 48 |     <button @click="start">Start</button>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import TWEEN from '@tweenjs/tween.js'
 54 | import debounce from 'lodash/debounce'
 55 | 
 56 | export default {
 57 |   data() {
 58 |     return {
 59 |       // custom easings
 60 |       equationType: TWEEN.Easing.Bounce,
 61 |       easingType: 'Out',
 62 | 
 63 |       target: 0,
 64 |       resetting: false,
 65 |       maxValue: 100,
 66 |       isTracking: false,
 67 |       pathD: '',
 68 | 
 69 |       // last time we called addPoint
 70 |       initialTime: 0,
 71 |       lastTime: 0,
 72 |       // last time we added a point into the path
 73 |       lastRendered: 0,
 74 |       maxRegisteredValue: 0,
 75 |     }
 76 |   },
 77 | 
 78 |   computed: {
 79 |     easing() {
 80 |       return this.equationType[this.easingType]
 81 |     },
 82 | 
 83 |     easings() {
 84 |       return Object.keys(TWEEN.Easing).map(easing => ({
 85 |         value: TWEEN.Easing[easing],
 86 |         text: easing,
 87 |       }))
 88 |     },
 89 | 
 90 |     svgWidth() {
 91 |       return 300
 92 |     },
 93 | 
 94 |     svgHeight() {
 95 |       return 140
 96 |     },
 97 | 
 98 |     aspectRatio() {
 99 |       return this.svgHeight / (this.svgHeight - this.svgTop)
100 |     },
101 | 
102 |     maxValueProportion() {
103 |       return this.maxValue / 100
104 |     },
105 | 
106 |     svgTop() {
107 |       return Math.min(-this.maxRegisteredValue + this.svgHeight, 0) - 10
108 |     },
109 | 
110 |     chartWidth() {
111 |       return Math.max(this.svgWidth, this.lastRendered - this.initialTime)
112 |     },
113 | 
114 |     viewBox() {
115 |       return `0 ${this.svgTop} ${this.chartWidth} ${this.svgHeight - this.svgTop}`
116 |     },
117 |   },
118 | 
119 |   mounted() {
120 |     this.lastTime = 100
121 |     this.initialTime = 0
122 |     this.lastRendered = 100
123 | 
124 |     setTimeout(() => {
125 |       this.start()
126 |     }, 1000)
127 |   },
128 | 
129 |   methods: {
130 |     async start() {
131 |       await this.stop()
132 |       if (!this.isTracking) {
133 |         this.pathD = `M0,${this.svgHeight} l0,0 `
134 |         this.isTracking = true
135 |         this.lastY = 0
136 |         this.maxRegisteredValue = 0
137 |         this.lastTime = performance.now()
138 |         this.initialTime = this.lastTime
139 |         this.lastRendered = this.lastTime
140 |       }
141 |       this.target = this.maxValue
142 |     },
143 | 
144 |     delayedStart: debounce(function() {
145 |       this.start()
146 |     }, 100),
147 | 
148 |     async stop() {
149 |       // small hack to reset it by removing it before changing the target
150 |       this.resetting = true
151 |       await this.$nextTick()
152 |       this.target = 0
153 |       this.resetting = false
154 |       this.isTracking = false
155 |       await this.$nextTick()
156 |     },
157 | 
158 |     addPoint(y) {
159 |       if (!this.isTracking) return y
160 |       const now = performance.now()
161 |       const elapsed = now - this.lastTime
162 |       // do not render too much
163 |       if (elapsed <= 15) return y
164 |       // make sure we compute all the time
165 |       const totalElapsed = now - this.lastRendered
166 |       /* y = this.maxValue - y + 80 */
167 |       if (Math.abs(y - this.lastY) > 0.1) {
168 |         this.lastRendered = now
169 |         this.pathD += `${totalElapsed},${-(this.lastY ? y - this.lastY : y)} `
170 |         if (y > this.maxRegisteredValue) this.maxRegisteredValue = y
171 |       }
172 |       this.lastY = y
173 |       this.lastTime = now
174 |       return y
175 |     },
176 |   },
177 | }
178 | </script>
179 | 
180 | <style>
181 | @import url('https://fonts.googleapis.com/css?family=Lato');
182 | 
183 | .graph {
184 |   display: inline-block;
185 |   position: relative;
186 |   padding-left: 1rem;
187 |   padding-top: 1rem;
188 | }
189 | 
190 | .graph svg {
191 |   margin-bottom: -4px;
192 |   border-left: #bbb 2px solid;
193 |   border-bottom: darkgrey 2px solid;
194 | }
195 | 
196 | .graph::after {
197 |   position: absolute;
198 |   bottom: 2px;
199 |   right: 2px;
200 |   content: 't';
201 |   text-align: left;
202 |   font-family: 'Futura';
203 |   font-size: 14px;
204 |   color: #bbb;
205 | }
206 | 
207 | .graph::before {
208 |   position: absolute;
209 |   top: 1rem;
210 |   left: 2px;
211 |   content: 'x';
212 |   text-align: left;
213 |   font-family: 'Futura';
214 |   font-size: 14px;
215 |   color: #bbb;
216 | }
217 | 
218 | .graph line {
219 |   stroke: crimson;
220 |   stroke-width: var(--stroke-width);
221 | }
222 | 
223 | .graph path {
224 |   fill: transparent;
225 |   stroke: white;
226 |   stroke-width: var(--stroke-width);
227 | }
228 | 
229 | .graph .marker {
230 |   position: absolute;
231 |   left: 100%;
232 | }
233 | 
234 | :root {
235 |   --marker-color: #bf0003;
236 |   --marker-size: 7px;
237 |   --stroke-width: 2px;
238 | }
239 | 
240 | #easing-grap {
241 |   & .svg-container {
242 |     margin-right: calc(var(--marker-size) * 3.4);
243 |   }
244 | 
245 |   & label {
246 |     margin: 0.15rem;
247 |   }
248 | 
249 |   & button {
250 |     width: 3rem;
251 |     padding: 0.05rem;
252 |     margin: 0.1rem 0.2rem;
253 |     display: inline-block;
254 |   }
255 | }
256 | 
257 | .graph .marker::before {
258 |   content: '';
259 |   position: absolute;
260 |   left: 0;
261 |   bottom: calc(-1 * var(--marker-size));
262 |   width: 0;
263 |   height: 0;
264 |   border-top: var(--marker-size) solid transparent;
265 |   border-bottom: var(--marker-size) solid transparent;
266 |   border-right: var(--marker-size) solid var(--marker-color);
267 | }
268 | 
269 | .graph .marker::after {
270 |   content: '';
271 |   position: absolute;
272 |   left: var(--marker-size);
273 |   bottom: calc(-1 * var(--marker-size));
274 |   width: calc(var(--marker-size) * 2.4);
275 |   height: calc(var(--marker-size) * 2);
276 |   background: var(--marker-color);
277 | }
278 | </style>
279 | 


--------------------------------------------------------------------------------
/pages/motion-graph.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="motion-graph">
  3 |     <Motion
  4 |       ref="motion"
  5 |       v-if="!resetting"
  6 |       :value="target"
  7 |       class="svg-container"
  8 |       tag="div"
  9 |       @motion-end="isTracking = false"
 10 |       :spring="spring"
 11 |     >
 12 |       <template slot-scope="{ value }">
 13 |         <div class="graph">
 14 |           <svg :style="{ '--stroke-width': 2 / aspectRatio + 'px' }" :width="svgWidth" :height="svgHeight" preserveAspectRatio="none" :viewBox="viewBox">
 15 |             <line x1="0" :x2="chartWidth" :y1="svgHeight - maxValue" :y2="svgHeight - maxValue"></line>
 16 |             <path :d="pathD"></path>
 17 |           </svg>
 18 |           <div class="marker" :style="{ transform: `translateY(${-value * aspectRatio}px)`}"></div>
 19 |         </div>
 20 |         <p>Current value: {{ addPoint(value).toFixed(2) }}</p>
 21 |         <p>Visually finished at {{ Math.round(lastRendered - initialTime) }}ms</p>
 22 |         <p>Finished at {{ Math.round(lastTime - initialTime) }}ms</p>
 23 |       </template>
 24 |     </Motion>
 25 | 
 26 |     <label class="text">
 27 |       Target value
 28 |       <input v-model.number="maxValue" @input="delayedStart" step="10" type="number"/>
 29 |     </label>
 30 |     <label class="text">
 31 |       Stiffness
 32 |       <input v-model.number="spring.stiffness" @input="delayedStart" step="10" type="number"/>
 33 |     </label>
 34 |     <label class="text">
 35 |       Damping
 36 |       <input v-model.number="spring.damping" step="1" @input="delayedStart" type="number"/>
 37 |     </label>
 38 |     <label class="text">
 39 |       Precision
 40 |       <input v-model.number="spring.precision" step="0.01" @input="delayedStart" type="number"/>
 41 |     </label>
 42 |     <div class="limit-width">
 43 |       <button v-for="(preset, name) in presets" @click="setSpring(preset)">{{ name }}</button>
 44 |     </div>
 45 |     <hr style="border none; margin: .35rem 0;">
 46 | 
 47 |     <button @click="stop">Stop</button>
 48 |     <button @click="start">Start</button>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import presets from '~/plugins/presets'
 54 | import debounce from 'lodash/debounce'
 55 | 
 56 | export default {
 57 |   data() {
 58 |     return {
 59 |       spring: {
 60 |         stiffness: 170,
 61 |         damping: 26,
 62 |         precision: 0.01,
 63 |       },
 64 | 
 65 |       target: 0,
 66 |       resetting: false,
 67 |       maxValue: 100,
 68 |       isTracking: false,
 69 |       pathD: '',
 70 | 
 71 |       // last time we called addPoint
 72 |       initialTime: 0,
 73 |       lastTime: 0,
 74 |       // last time we added a point into the path
 75 |       lastRendered: 0,
 76 |       maxRegisteredValue: 0,
 77 |     }
 78 |   },
 79 | 
 80 |   computed: {
 81 |     svgWidth() {
 82 |       return 300
 83 |     },
 84 | 
 85 |     svgHeight() {
 86 |       return 140
 87 |     },
 88 | 
 89 |     aspectRatio() {
 90 |       return this.svgHeight / (this.svgHeight - this.svgTop)
 91 |     },
 92 | 
 93 |     maxValueProportion() {
 94 |       return this.maxValue / 100
 95 |     },
 96 | 
 97 |     presets() {
 98 |       return presets
 99 |     },
100 | 
101 |     svgTop() {
102 |       return Math.min(-this.maxRegisteredValue + this.svgHeight, 0) - 10
103 |     },
104 | 
105 |     chartWidth() {
106 |       return Math.max(this.svgWidth, this.lastRendered - this.initialTime)
107 |     },
108 | 
109 |     viewBox() {
110 |       return `0 ${this.svgTop} ${this.chartWidth} ${this.svgHeight - this.svgTop}`
111 |     },
112 |   },
113 | 
114 |   start() {
115 |     this.lastTime = 100
116 |     this.initialTime = 0
117 |     this.lastRendered = 100
118 | 
119 |     setTimeout(() => {
120 |       this.setSpring(this.presets.wobbly)
121 |     }, 1000)
122 |   },
123 | 
124 |   methods: {
125 |     async start() {
126 |       await this.stop()
127 |       if (!this.isTracking) {
128 |         this.pathD = `M0,${this.svgHeight} l0,0 `
129 |         this.isTracking = true
130 |         this.lastY = 0
131 |         this.maxRegisteredValue = 0
132 |         this.lastTime = performance.now()
133 |         this.initialTime = this.lastTime
134 |         this.lastRendered = this.lastTime
135 |       }
136 |       this.target = this.maxValue
137 |     },
138 | 
139 |     delayedStart: debounce(function() {
140 |       this.start()
141 |     }, 100),
142 | 
143 |     setSpring(spring) {
144 |       this.spring = { ...spring }
145 |       this.spring.precision = this.spring.precision || 0.01
146 |       this.delayedStart()
147 |     },
148 | 
149 |     async stop() {
150 |       // small hack to reset it by removing it before changing the target
151 |       this.resetting = true
152 |       await this.$nextTick()
153 |       this.target = 0
154 |       this.resetting = false
155 |       this.isTracking = false
156 |       await this.$nextTick()
157 |     },
158 | 
159 |     addPoint(y) {
160 |       if (!this.isTracking) return y
161 |       const now = performance.now()
162 |       const elapsed = now - this.lastTime
163 |       // do not render too much
164 |       if (elapsed <= 15) return y
165 |       // make sure we compute all the time
166 |       const totalElapsed = now - this.lastRendered
167 |       /* y = this.maxValue - y + 80 */
168 |       if (Math.abs(y - this.lastY) > 0.1) {
169 |         this.lastRendered = now
170 |         this.pathD += `${totalElapsed},${-(this.lastY ? y - this.lastY : y)} `
171 |         if (y > this.maxRegisteredValue) this.maxRegisteredValue = y
172 |       }
173 |       this.lastY = y
174 |       this.lastTime = now
175 |       return y
176 |     },
177 |   },
178 | }
179 | </script>
180 | 
181 | <style>
182 | @import url('https://fonts.googleapis.com/css?family=Lato');
183 | 
184 | .graph {
185 |   display: inline-block;
186 |   position: relative;
187 |   padding-left: 1rem;
188 |   padding-top: 1rem;
189 | }
190 | 
191 | .graph svg {
192 |   margin-bottom: -4px;
193 |   border-left: #bbb 2px solid;
194 |   border-bottom: darkgrey 2px solid;
195 | }
196 | 
197 | .graph::after {
198 |   position: absolute;
199 |   bottom: 2px;
200 |   right: 2px;
201 |   content: 't';
202 |   text-align: left;
203 |   font-family: 'Futura';
204 |   font-size: 14px;
205 |   color: #bbb;
206 | }
207 | 
208 | .graph::before {
209 |   position: absolute;
210 |   top: 1rem;
211 |   left: 2px;
212 |   content: 'x';
213 |   text-align: left;
214 |   font-family: 'Futura';
215 |   font-size: 14px;
216 |   color: #bbb;
217 | }
218 | 
219 | .graph line {
220 |   stroke: crimson;
221 |   stroke-width: var(--stroke-width);
222 | }
223 | 
224 | .graph path {
225 |   fill: transparent;
226 |   stroke: white;
227 |   stroke-width: var(--stroke-width);
228 | }
229 | 
230 | .graph .marker {
231 |   position: absolute;
232 |   left: 100%;
233 | }
234 | 
235 | :root {
236 |   --marker-color: #bf0003;
237 |   --marker-size: 7px;
238 |   --stroke-width: 2px;
239 | }
240 | 
241 | .motion-graph {
242 |   & .svg-container {
243 |     margin-right: calc(var(--marker-size) * 3.4);
244 |   }
245 | 
246 |   & label {
247 |     margin: 0.15rem;
248 |   }
249 | 
250 |   & button {
251 |     width: 3rem;
252 |     padding: 0.05rem;
253 |     margin: 0.1rem 0.2rem;
254 |     display: inline-block;
255 |   }
256 | }
257 | 
258 | .graph .marker::before {
259 |   content: '';
260 |   position: absolute;
261 |   left: 0;
262 |   bottom: calc(-1 * var(--marker-size));
263 |   width: 0;
264 |   height: 0;
265 |   border-top: var(--marker-size) solid transparent;
266 |   border-bottom: var(--marker-size) solid transparent;
267 |   border-right: var(--marker-size) solid var(--marker-color);
268 | }
269 | 
270 | .graph .marker::after {
271 |   content: '';
272 |   position: absolute;
273 |   left: var(--marker-size);
274 |   bottom: calc(-1 * var(--marker-size));
275 |   width: calc(var(--marker-size) * 2.4);
276 |   height: calc(var(--marker-size) * 2);
277 |   background: var(--marker-color);
278 | }
279 | 
280 | .limit-width {
281 |   max-width: 550px;
282 | }
283 | </style>
284 | 


--------------------------------------------------------------------------------
/pizzi.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>It sounds to me!</title>
  9 | </head>
 10 | 
 11 | <body>
 12 | 
 13 |   <script src="https://unpkg.com/vue"></script>
 14 |   <script src="https://unpkg.com/pizzicato"></script>
 15 |   <script src="https://unpkg.com/vue-tweezing"></script>
 16 |   <script src="https://unpkg.com/vue-motion"></script>
 17 |   <script src="https://unpkg.com/tweezer.js"></script>
 18 |   <script src="https://unpkg.com/@tweenjs/tween.js"></script>
 19 | 
 20 |   <div id="app">
 21 |     <Tweezing :to="sound.to" :duration="sound.duration" @end="currentSound = (currentSound + 1) % soundCount" :easing="easing">
 22 |       <div slot-scope="{ frequency, volume }">
 23 |         <pre>{{ currentSound }}: {{ sound }}</pre>
 24 |         <h5>Current values</h5>
 25 |         <pre>
 26 |           Frequency: {{ frequency }}
 27 |           Volume: {{ volume }}
 28 |         </pre>
 29 | 
 30 |         <pizzi-sound :frequency="frequency" :volume="volume" :type="type" :source="source" :path="soundPath"></pizzi-sound>
 31 |       </div>
 32 |     </Tweezing>
 33 | 
 34 |     <h5>Target values</h5>
 35 |     <pre>
 36 |       FrequencyFactor: {{ frequencyFactor }}
 37 |       Speed: {{ timeMultiplicator }}
 38 |       Volume: {{ volume }}
 39 |     </pre>
 40 | 
 41 |     <div v-if="source === 'wave'">
 42 |       <label>
 43 |         <input name="waveType" type="radio" v-model="type" value="sine" /> Sine
 44 |       </label>
 45 | 
 46 |       <label>
 47 |         <input name="waveType" type="radio" v-model="type" value="square" /> Square
 48 |       </label>
 49 | 
 50 |       <label>
 51 |         <input name="waveType" type="radio" v-model="type" value="triangle" /> Triangle
 52 |       </label>
 53 | 
 54 |       <label>
 55 |         <input name="waveType" type="radio" v-model="type" value="sawtooth" /> Sawtooth
 56 |       </label>
 57 |     </div>
 58 | 
 59 |     <div>
 60 |       <label>
 61 |         <input name="source" type="radio" v-model="source" value="wave" /> Wave
 62 |       </label>
 63 | 
 64 |       <label>
 65 |         <input name="source" type="radio" v-model="source" value="file" /> File
 66 |       </label>
 67 |     </div>
 68 |     🔈
 69 |     <input type="range" min="0" max="1" step="0.1" v-model.number="volume" />
 70 |     <br> 👴
 71 |     <input type="range" min="0.5" max="4" step="0.1" v-model.number="frequencyFactor" />👦
 72 |     <br> ⏳
 73 | 
 74 |     <input type="range" min="0.1" max="5" step="0.1" v-model.number="timeMultiplicator" />
 75 |   </div>
 76 | 
 77 |   <script>
 78 |     const notes = {
 79 |       c: 261,
 80 |       d: 294,
 81 |       e: 329,
 82 |       f: 349,
 83 |       g: 391,
 84 |       gS: 415,
 85 |       a: 440,
 86 |       aS: 455,
 87 |       b: 466,
 88 |       cH: 523,
 89 |       cSH: 554,
 90 |       dH: 587,
 91 |       dSH: 622,
 92 |       eH: 659,
 93 |       fH: 698,
 94 |       fSH: 740,
 95 |       gH: 784,
 96 |       gSH: 830,
 97 |       aH: 880,
 98 |     }
 99 | 
100 |     const make = {
101 |       beep(frequency, duration) {
102 |         return [
103 |           {
104 |             frequency: frequency - 1,
105 |             duration: duration / 2,
106 |           },
107 |           {
108 |             frequency,
109 |             duration: duration / 2,
110 |           },
111 |           {
112 |             volume: 0,
113 |             duration: 75
114 |           },
115 |           {
116 |             volume: 0.01,
117 |             duration: 75
118 |           },
119 |         ]
120 |       },
121 |       pause(duration) {
122 |         return [
123 |           {
124 |             volume: 0,
125 |             duration: duration / 2
126 |           },
127 |           {
128 |             volume: 0.01,
129 |             duration: duration / 2
130 |           },
131 |         ]
132 |       },
133 | 
134 |       firstSection() {
135 |         return [
136 |           ...make.beep(notes.a, 500),
137 |           ...make.beep(notes.a, 500),
138 |           ...make.beep(notes.a, 500),
139 |           ...make.beep(notes.f, 350),
140 |           ...make.beep(notes.cH, 150),
141 |           ...make.beep(notes.a, 500),
142 |           ...make.beep(notes.f, 350),
143 |           ...make.beep(notes.cH, 150),
144 |           ...make.beep(notes.a, 650),
145 | 
146 |           ...make.pause(500),
147 | 
148 |           ...make.beep(notes.eH, 500),
149 |           ...make.beep(notes.eH, 500),
150 |           ...make.beep(notes.eH, 500),
151 |           ...make.beep(notes.fH, 350),
152 |           ...make.beep(notes.cH, 150),
153 |           ...make.beep(notes.gS, 500),
154 |           ...make.beep(notes.f, 350),
155 |           ...make.beep(notes.cH, 150),
156 |           ...make.beep(notes.a, 650),
157 | 
158 |           ...make.pause(500),
159 |         ]
160 |       },
161 | 
162 |       secondSection() {
163 |         return [
164 |           ...make.beep(notes.aH, 500),
165 |           ...make.beep(notes.a, 300),
166 |           ...make.beep(notes.a, 150),
167 |           ...make.beep(notes.aH, 500),
168 |           ...make.beep(notes.gSH, 325),
169 |           ...make.beep(notes.gH, 175),
170 |           ...make.beep(notes.fSH, 125),
171 |           ...make.beep(notes.fH, 125),
172 |           ...make.beep(notes.fSH, 250),
173 |           ...make.pause(325),
174 |           ...make.beep(notes.aS, 250),
175 |           ...make.beep(notes.dSH, 500),
176 |           ...make.beep(notes.dH, 325),
177 |           ...make.beep(notes.cSH, 175),
178 |           ...make.beep(notes.cH, 125),
179 |           ...make.beep(notes.b, 125),
180 |           ...make.beep(notes.cH, 250),
181 |           ...make.pause(350),
182 |         ]
183 |       }
184 |     }
185 | 
186 |     const pauseStart = {
187 |       volume: 0,
188 |       duration: 50
189 |     }
190 |     const pauseEnd = {
191 |       volume: 0.01,
192 |       duration: 200
193 |     }
194 |     const sounds = [
195 |       ...make.firstSection(),
196 |       ...make.secondSection(),
197 | 
198 |       ...make.beep(notes.f, 250),
199 |       ...make.beep(notes.gS, 500),
200 |       ...make.beep(notes.f, 350),
201 |       ...make.beep(notes.a, 125),
202 |       ...make.beep(notes.cH, 500),
203 |       ...make.beep(notes.a, 375),
204 |       ...make.beep(notes.cH, 125),
205 |       ...make.beep(notes.eH, 650),
206 | 
207 |       ...make.pause(500),
208 | 
209 |       //...Repeat second section
210 |       ...make.secondSection(),
211 | 
212 |       //...Variant 2
213 |       ...make.beep(notes.f, 250),
214 |       ...make.beep(notes.gS, 500),
215 |       ...make.beep(notes.f, 375),
216 |       ...make.beep(notes.cH, 125),
217 |       ...make.beep(notes.a, 500),
218 |       ...make.beep(notes.f, 375),
219 |       ...make.beep(notes.cH, 125),
220 |       ...make.beep(notes.a, 650),
221 | 
222 |       ...make.pause(650),
223 |     ]
224 | 
225 |     Vue.component('PizziSound', {
226 |       props: {
227 |         source: String,
228 |         frequency: Number,
229 |         type: String,
230 |         volume: Number,
231 |         path: String,
232 |       },
233 | 
234 |       mounted() {
235 |         this.createSound()
236 |       },
237 | 
238 |       methods: {
239 |         async createSound() {
240 |           this.sound && this.sound.stop()
241 |           this.sound = await new Promise(resolve => {
242 |             const sound = new Pizzicato.Sound({
243 |               source: this.source,
244 |               options: {
245 |                 loop: true,
246 |                 path: this.path,
247 |                 type: this.type,
248 |                 volume: this.volume,
249 |                 frequency: this.frequency
250 |               }
251 |             }, () => {
252 |               setTimeout(() => { resolve(sound) }, 0)
253 |             })
254 |           })
255 |           const flanger = new Pizzicato.Effects.Flanger({
256 |             time: 0.45,
257 |             speed: 0.2,
258 |             depth: 0.1,
259 |             feedback: 0.1,
260 |             mix: 0.5
261 |           });
262 | 
263 |           /* this.sound.addEffect(flanger);*/
264 |           this.sound.play()
265 |         },
266 |       },
267 | 
268 |       watch: {
269 |         frequency(f) {
270 |           if (!this.sound) return
271 |           this.sound.frequency = f
272 |         },
273 | 
274 |         volume(v) {
275 |           if (!this.sound) return
276 |           this.sound.volume = v
277 |           if (v < 0.0001) this.sound.pause()
278 |           else this.sound.play()
279 |         },
280 | 
281 |         source: 'createSound',
282 |         type: 'createSound',
283 |         path: 'createSound',
284 | 
285 |       },
286 | 
287 |       destroyed() {
288 |         this.sound.stop()
289 |         this.sound = null
290 |       },
291 | 
292 |       render: h => h()
293 |     })
294 | 
295 |     Vue.use(VueTweezing.Tweezing, {
296 |       // tweezer: VueTweezing.tweezerHelper(Tweezer),
297 |       tweenjs: VueTweezing.tweenjsHelper(TWEEN),
298 |     })
299 | 
300 |     function animate() {
301 |       const now = performance.now()
302 |       const time = now - lastTime
303 |       lastTime = now
304 |       TWEEN.update(time)
305 |       setTimeout(animate, 17)
306 |     }
307 | 
308 |     let lastTime = performance.now()
309 |     /* animate()*/
310 |     const tick = () => {
311 |       TWEEN.update()
312 |       /* setTimeout(tick, 17)*/
313 |       requestAnimationFrame(tick)
314 |     }
315 |     requestAnimationFrame(tick)
316 | 
317 |     window.vm = new Vue({
318 |       el: '#app',
319 | 
320 |       data() {
321 |         return {
322 |           source: 'wave',
323 |           soundPath: './bark.mp3',
324 |           type: 'triangle',
325 |           frequency: 800,
326 |           frequencyFactor: 1,
327 |           volume: 0.1,
328 |           currentSound: 0,
329 |           soundCount: sounds.length,
330 |           timeMultiplicator: 1,
331 |           easing: TWEEN.Easing.Linear.InOut,
332 |         }
333 |       },
334 | 
335 |       computed: {
336 |         frequencyStep() {
337 |           return 10
338 |           // return Math.log10(this.frequency)
339 |         },
340 | 
341 |         sound() {
342 |           let {
343 |             frequency,
344 |             volume,
345 |             duration
346 |           } = sounds[this.currentSound]
347 | 
348 |           frequency = frequency || (this.lastFrequency - 1)
349 |           volume = volume || 1
350 |           this.lastFrequency = frequency
351 |           frequency *= this.frequencyFactor
352 |           volume *= this.volume
353 |           duration *= this.timeMultiplicator
354 | 
355 |           return {
356 |             to: {
357 |               frequency,
358 |               volume,
359 |             },
360 |             duration,
361 |           }
362 |         },
363 | 
364 |         to() {
365 |           return {
366 |             frequency: this.frequency,
367 |             volume: this.volume,
368 |           }
369 |         }
370 |       },
371 | 
372 |     })
373 |   </script>
374 | 
375 | </body>
376 | 
377 | </html>
378 | 


--------------------------------------------------------------------------------