arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-01-14 12:14:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

add render on client

Browse Source
This commit is contained in:
Arthur Danjou
2024-02-25 15:58:26 +01:00
parent 2cf7b07c9c
commit d984963370
1 changed files with 82 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/components/main/MainMaths.vue
View File

@@ -10,84 +10,86 @@ useIntervalFn(() => {
</script> </script>
<template> <template>
<section class="flex flex-col md:flex-row items-center justify-center gap-5 overflow-hidden py-4 sm:gap-8 mb-16"> <ClientOnly>
<div> <section class="flex flex-col md:flex-row items-center justify-center gap-5 overflow-hidden py-4 sm:gap-8 mb-16">
<Graph :domain-x="[-3, 3]" :domain-y="[-3, 3]"> <div>
<FunctionPlot <Graph :domain-x="[-3, 3]" :domain-y="[-3, 3]">
:function="(x) => Math.cos(x)" <FunctionPlot
:line-width="2" :function="(x) => Math.cos(x)"
animated :line-width="2"
color="hotpink" animated
/> color="hotpink"
<Label text="cos(x)" color="hotpink" :position="[2, -0.5]" size="small" /> />
<FunctionPlot <Label text="cos(x)" color="hotpink" :position="[2, -0.5]" size="small" />
:function="(x) => Math.sin(x)" <FunctionPlot
:line-width="2" :function="(x) => Math.sin(x)"
animated :line-width="2"
color="#33aabb" animated
/> color="#33aabb"
<Label text="sin(x)" color="#33aabb" :position="[2, 1]" size="small" /> />
<FunctionPlot <Label text="sin(x)" color="#33aabb" :position="[2, 1]" size="small" />
:function="(x) => Math.exp(x)" <FunctionPlot
:line-width="2" :function="(x) => Math.exp(x)"
animated :line-width="2"
/> animated
<Label text="exp(x)" :position="[0.7, 2]" size="small" /> />
<FunctionPlot <Label text="exp(x)" :position="[0.7, 2]" size="small" />
:function="(x) => Math.log(x)" <FunctionPlot
:domain="[0.001, 4]" :function="(x) => Math.log(x)"
:line-width="2" :domain="[0.001, 4]"
animated :line-width="2"
color="limegreen" animated
/> color="limegreen"
<Label text="ln(x)" color="limegreen" :position="[0.2, -2]" size="small" /> />
<FunctionPlot <Label text="ln(x)" color="limegreen" :position="[0.2, -2]" size="small" />
:function="(x) => -x" <FunctionPlot
:domain="[-3, 0]" :function="(x) => -x"
:line-width="2" :domain="[-3, 0]"
animated :line-width="2"
color="orange" animated
/> color="orange"
<FunctionPlot />
:function="(x) => x" <FunctionPlot
:domain="[0, 3]" :function="(x) => x"
:line-width="2" :domain="[0, 3]"
animated :line-width="2"
color="orange" animated
/> color="orange"
<Label text="|x|" color="orange" :position="[-2, 2]" size="small" /> />
</Graph> <Label text="|x|" color="orange" :position="[-2, 2]" size="small" />
</div> </Graph>
<div> </div>
<Graph <div>
:domain-x="[-2, 2]" <Graph
:domain-y="[-2, 2]" :domain-x="[-2, 2]"
> :domain-y="[-2, 2]"
<Circle :radius="1" color="#aaa" /> >
<Vector :to="[Math.cos(angle), Math.sin(angle)]" /> <Circle :radius="1" color="#aaa" />
<Line <Vector :to="[Math.cos(angle), Math.sin(angle)]" />
:from="[Math.cos(angle), 0]" <Line
:to="[Math.cos(angle), Math.sin(angle)]" :from="[Math.cos(angle), 0]"
:line-width="1.5" :to="[Math.cos(angle), Math.sin(angle)]"
color="hotpink" :line-width="1.5"
dashed color="hotpink"
/> dashed
<Line />
:from="[0, Math.sin(angle)]" <Line
:to="[Math.cos(angle), Math.sin(angle)]" :from="[0, Math.sin(angle)]"
:line-width="1.5" :to="[Math.cos(angle), Math.sin(angle)]"
color="#33aabb" :line-width="1.5"
dashed color="#33aabb"
/> dashed
<Point :position="[Math.cos(angle), Math.sin(angle)]" label="M" /> />
<Point :position="[Math.cos(angle), 0]" color="hotpink" label="cos(x)" /> <Point :position="[Math.cos(angle), Math.sin(angle)]" label="M" />
<Point <Point :position="[Math.cos(angle), 0]" color="hotpink" label="cos(x)" />
:position="[0, Math.sin(angle)]" <Point
color="#33aabb" :position="[0, Math.sin(angle)]"
label="sin(x)" color="#33aabb"
label-position="top" label="sin(x)"
/> label-position="top"
</Graph> />
</div> </Graph>
</section> </div>
</section>
</ClientOnly>
</template> </template>