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