V0.0.2

apis/MathFunction copy.api

@@ -0,0 +1,228 @@
+This is a widget from package `@vue-motion/extension-math` api.
+
+The type is in parentheses, and the default value is in square brackets.
+
+- `x`: The position on x-coordinate, the origin is at the center of video. (`number`) [0]
+- `y`: The position on y-coordinate, the origin is at the center of video. (`number`) [0]
+- `scale-x`: The scale value on x-coordinate. (`number`) [1]
+- `scale-y`: The scale value on y-coordinate. (`number`) [1]
+- `rotation`: The rotation angle. (`number` ranges [0, 360]) [0]
+- `opacity`: The opacity value. (`number` ranges [0, 1]) [1]
+- `fn`: Mathematical function. (`(x: number) => number`)
+- `domain`: The domain of the function, that is, the range of x. (`[number, number]`)
+- `ranges`: An optional y range that controls the upper and lower limits of the drawing. (`[number, number]`) [[0,0]]
+- `division-x`: Calculate the X-axis step size. (`number`) [100]
+- `division-y`: Calculate the Y-axis step size. (`number`) [100]
+- `color`: Control the color of the graphics. (`string`) ['white']
+- `width`: Control the line width of the graph. (`number`) 
+- `fill-color`: Controls the fill color of the graph. (`string`) ["none"]
+
+RULES:
+
+- `fill-color` is not be suggested to set, because it is a function image.
+- property `domain` has a division effect on the graph, the default value of `division-x` is 100, which means the concrete length of a unit of `domain` is 100. for example if you want to draw a function that's domain is [0, 10], the concrete length will be 10 * 100 = 1000. Don't set the value overloaded otherwise it will render slowly.
+- The widget will never to be the children component of other widget (such as <NumberPlane>), if you want to use it as same, please let they to the same level.
+- The property that you need to set is `fn`, NOT `function` or `expression` or more.
+
+EXAMPLES:
+
+1. Gradually draw a function
+
+The widget must to be used with `<NumberPlane>` widge and `trace` animation.
+
+<script setup>
+import { MathFunction, NumberPlane } from '@vue-motion/extension-math'
+import { Motion, trace } from '@vue-motion/lib'
+import { usePlayer, useWidget } from '@vue-motion/core'
+import { onMounted } from 'vue'
+
+const { useAnimation, play } = usePlayer()
+
+const func = useWidget()
+onMounted(() => {
+  useAnimation(func)
+    .animate(trace, {
+      duration: 2
+    })
+  play()
+})
+</script>
+
+<template>
+  <Motion :width="1600" :height="900">
+    <NumberPlane :domain-x="[-5, 5]" :domain-y="[-5, 5]" />
+    <MathFunction :fn="x => x * x" :widget="func" />
+  </Motion>
+</template>
+
+2. Change values of some parameters to change the graph
+
+This example is to change the values of `a` and `b` to change the graph.
+
+<script setup>
+import { MathFunction, NumberPlane } from '@vue-motion/extension-math'
+import { Motion, trace } from '@vue-motion/lib'
+import { usePlayer, useWidget, defineAnimation } from '@vue-motion/core'
+import { onMounted } from 'vue'
+
+const { useAnimation, play } = usePlayer()
+
+const a = ref(1)
+const b = ref(2)
+
+const trans = defineAnimation((target, context) => {
+  return (propgress) => {
+    target.a = a.value * propgress * 10
+    target.b = b.value * propgress * 10
+  }
+})
+
+const func = useWidget()
+onMounted(() => {
+  useAnimation(func)
+    .animate(trace, {
+      duration: 2
+    })
+    .animate(trans, {
+      duration: 5
+    })
+  play()
+})
+</script>
+
+<template>
+  <Motion :width="1600" :height="900">
+    <NumberPlane :domain-x="[-5, 5]" :domain-y="[-5, 5]" />
+    <MathFunction :fn="x => a * (x - b) * (x - b)" :widget="func" />
+  </Motion>
+</template>
+
+3. Calculate the finite sum with x integer terms.
+<script setup>
+import { MathFunction, NumberPlane } from '@vue-motion/extension-math'
+import { Motion, trace } from '@vue-motion/lib'
+import { usePlayer, useWidget } from '@vue-motion/core'
+import { onMounted } from 'vue'
+
+const { useAnimation, play } = usePlayer()
+
+const func = useWidget()
+onMounted(() => {
+  useAnimation(func)
+    .animate(trace, {
+      duration: 2
+    })
+  play()
+})
+</script>
+
+<template>
+  <Motion :width="1600" :height="900">
+    <NumberPlane :domain-x="[0,15]" :domain-y="[0, 15]" :x="-700" :y="400" :interval-x="100" :interval-y="100" :trend-y="x => x*100" :trend-x="x => x*100" />
+    <MathFunction  :division-x="1" :division-y="1" :x="-700" :y="400" :widget="func" :domain="[0, 1000]" :fn="(x) => { let t = 0; for(let i = 0; i < x; i+=1) { t += i*Math.sin(i) } return t}" />
+  </Motion>
+</template>
+
+4. Calculate the sum of the first X terms of the geometric series sum(1/(n*(n+1))).
+<script setup>
+import { MathFunction, NumberPlane } from '@vue-motion/extension-math'
+import { Motion, trace } from '@vue-motion/lib'
+import { usePlayer, useWidget } from '@vue-motion/core'
+import { onMounted } from 'vue'
+
+const { useAnimation, play } = usePlayer()
+
+const func = useWidget()
+onMounted(() => {
+  useAnimation(func)
+    .animate(trace, {
+      duration: 2
+    })
+  play()
+})
+</script>
+
+<template>
+  <Motion :width="1600" :height="900">
+    <NumberPlane :domain-x="[0,15]" :domain-y="[0, 15]" :x="-700" :y="400" :interval-x="100" :interval-y="100" :trend-y="x => x" :trend-x="x => x*100" />
+    <MathFunction  :division-x="1" :division-y="10" :x="-700" :y="400" :widget="func" :domain="[1, 1600]" :fn="(x) => {t=0;for(i=1;i<=x;i++){ t += 1/(i*(i+1)); } return 10*t}" />
+  </Motion>
+</template>
+
+5. Calculate the sum of the first X terms of the alternating series sum( ((-1)^n-1)*(i/(i+1)) ).
+<script setup>
+import { MathFunction, NumberPlane } from '@vue-motion/extension-math'
+import { Motion, trace } from '@vue-motion/lib'
+import { usePlayer, useWidget } from '@vue-motion/core'
+import { onMounted } from 'vue'
+
+const { useAnimation, play } = usePlayer()
+
+const func = useWidget()
+onMounted(() => {
+  useAnimation(func)
+    .animate(trace, {
+      duration: 2
+    })
+  play()
+})
+</script>
+
+<template>
+  <Motion :width="1600" :height="900">
+    <NumberPlane :domain-x="[0,15]" :domain-y="[0, 15]" :x="-700" :y="0" :interval-x="100" :interval-y="100" :trend-y="x => x" :trend-x="x => x*100" />
+    <MathFunction  :division-x="1" :division-y="10" :x="-700" :y="0" :widget="func" :domain="[1, 1600]" :fn="(x) => {t=0;for(i=1;i<=x;i++){ t += (i/(i+1))*Math.pow(-1,i%2); } return 10*t}" />
+  </Motion>
+</template>
+
+6. Calculate the sum of the first X terms of the harmonic series sum(1/i).
+<script setup>
+import { MathFunction, NumberPlane } from '@vue-motion/extension-math'
+import { Motion, trace } from '@vue-motion/lib'
+import { usePlayer, useWidget } from '@vue-motion/core'
+import { onMounted } from 'vue'
+
+const { useAnimation, play } = usePlayer()
+
+const func = useWidget()
+onMounted(() => {
+  useAnimation(func)
+    .animate(trace, {
+      duration: 2
+    })
+  play()
+})
+</script>
+
+<template>
+  <Motion :width="1600" :height="900">
+    <NumberPlane :domain-x="[0,15]" :domain-y="[0, 15]" :x="-700" :y="0" :interval-x="100" :interval-y="100" :trend-y="x => x*100" :trend-x="x => x*100" />
+    <MathFunction  :division-x="1" :division-y="1" :x="-700" :y="0" :widget="func" :domain="[1, 1600]" :fn="(x) => {t=0;for(i=1;i<=x;i++){ t += 1/i; } return 10*t}" />
+  </Motion>
+</template>
+
+7. Calculate the sum of the first X terms of the arithmetic series sum(1/n^2).
+<script setup>
+import { MathFunction, NumberPlane } from '@vue-motion/extension-math'
+import { Motion, trace } from '@vue-motion/lib'
+import { usePlayer, useWidget } from '@vue-motion/core'
+import { onMounted } from 'vue'
+
+const { useAnimation, play } = usePlayer()
+
+const func = useWidget()
+onMounted(() => {
+  useAnimation(func)
+    .animate(trace, {
+      duration: 2
+    })
+  play()
+})
+</script>
+
+<template>
+  <Motion :width="1600" :height="900">
+    <NumberPlane :domain-x="[0,15]" :domain-y="[0, 15]" :x="-700" :y="0" :interval-x="100" :interval-y="100" :trend-y="x => x" :trend-x="x => x*100" />
+    <MathFunction  :division-x="1" :division-y="100" :x="-700" :y="0" :widget="func" :domain="[1, 1600]" :fn="(x) => {t=0;for(i=1;i<=x;i++){ t += 1/(Math.pow(i,2)); } return t}" />
+  </Motion>
+</template>