feat(topic): add topic5 description (#256)

* 1. modify avatar source 2. update stroke color in topic1 3. add topic5 description * fix commitlint * Revert "fix commitlint" This reverts commit 86fde63. * fix commitlint error * Revert "fix commitlint error" This reverts commit 80114a5. * feat(topic): add topic5 description * chore(*): replaced original commitlint gh action * chore(*): replaced original commitlint gh action * chore(*): replaced original commitlint gh action * chore(*): replaced original commitlint gh action * chore(*): replaced original commitlint gh action --------- Co-authored-by: kiyoshi.guo <kiyoshi.guo@bytedance.com> Co-authored-by: Kiyoshi <44930252+Kiyo5hi@users.noreply.github.com>
Geometry-Discovery-Project-UCI · May 1, 2024 · 869ab30 · 869ab30
1 parent 753af2b
commit 869ab30
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/src/consts.ts b/src/consts.ts
@@ -2,7 +2,7 @@ export const defaultGridParams = {
   gutter: 16, xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5, xxxl: 7,
 };
 
-export const avatarGenerator = "https://joeschmoe.io/api/v1/random";
+export const avatarGenerator = "https://source.boringavatars.com/beam/random?colors=595b5a,14c3a2,0de5a8,7cf49a,b8fd99";
 
 export enum Layout {
   Sider = "SiderLayout",

diff --git a/src/data.ts b/src/data.ts
@@ -369,6 +369,12 @@ export const KIRA_ZHANG: Contributor = {
   institute: Institute.UCIrvine,
 };
 
+export const MAUREEN_CHANG: Contributor = {
+  name: "Maureen Chang",
+  email: "yuhsuc7@uci.edu",
+  institute: Institute.UCIrvine,
+};
+
 export const contributors: Contributor[] = [
   ZHIQIN_LU,
   BRIAN_CABALLERO,
@@ -430,6 +436,7 @@ export const contributors: Contributor[] = [
   FELIX_YU,
   MELISSA_YU,
   KIRA_ZHANG,
+  MAUREEN_CHANG
 ].sort((a, b) => {
   const aLastName = a.name.split(" ").pop() as string;
   const bLastName = b.name.split(" ").pop() as string;
@@ -528,7 +535,7 @@ export const topics: Topic[] = [
     essay: "pdfs/topic05.pdf",
     animationContributors: [MELISSA_YU, YIXUAN_LI],
     essayContributors: [ZHIQIN_LU, SHIYI_LYU],
-    captionContributors: [],
+    captionContributors: [MAUREEN_CHANG],
   },
   {
     name: "Pascal and Brainchon Theorems",

diff --git a/src/views/topics/GdpTopic01View.vue b/src/views/topics/GdpTopic01View.vue
@@ -142,7 +142,6 @@ export default defineComponent(
               y1: coords[1].y,
               x2: aprime.x,
               y2: aprime.y,
-              stroke: "red"
             }
           );
 

diff --git a/src/views/topics/GdpTopic05View.vue b/src/views/topics/GdpTopic05View.vue
@@ -3,6 +3,21 @@
   <ATypographyParagraph> The description of Simson Line </ATypographyParagraph>
   <div id="Simson-Line-wapper">
     <ATypographyTitle :level="4">Simson Line</ATypographyTitle>
+    <ATypographyParagraph class="topics-description">
+      <p>
+        In the following <span v-katex>\triangle ABC</span>. Let
+        <span v-katex>P</span> be a point on the circumcircle. Let
+        <span v-katex>X, Y, Z</span> be the pedal points of <span v-katex>P</span> to
+        <span v-katex>BC,</span> <span v-katex>CA,</span> and
+        <span v-katex>AB</span> respectively. Then,
+        <span v-katex>X, Y, Z</span> are co-linear, such a
+        line is called the Simson Line.
+      </p>
+      <p>
+        Hold point <span v-katex>P</span> and move it along the circle, and one can see that
+        <span v-katex>X, Y, Z</span> are always collinear.
+      </p>
+    </ATypographyParagraph>
     <canvas id="Simson-Line-canvas" width="500" height="500" />
   </div>
 </template>
@@ -12,7 +27,12 @@ import { indexTopicMap } from "@/data";
 import { Topic } from "@/types";
 import { IEvent } from "fabric/fabric-impl";
 import { fabric } from "fabric";
-import { makeLine, makeLabel, makeCircle, makeMovablePoint } from "@/utils/canvas";
+import {
+  makeLine,
+  makeLabel,
+  makeCircle,
+  makeMovablePoint,
+} from "@/utils/canvas";
 import {
   getPedalPoint,
   calculateDistanceBetweenTwoPoints,
@@ -74,9 +94,18 @@ export default defineComponent({
       radius: radiusCircle,
       stroke: "black",
     });
-    const pC = [xx + Math.cos(pi / 6) * radiusCircle, yy + Math.sin(pi / 6) * radiusCircle];
-    const pB = [xx - Math.cos(pi / 6) * radiusCircle, yy + Math.sin(pi / 6) * radiusCircle];
-    const pA = [xx - Math.cos(pi / 3) * radiusCircle, yy - Math.sin(pi / 3) * radiusCircle];
+    const pC = [
+      xx + Math.cos(pi / 6) * radiusCircle,
+      yy + Math.sin(pi / 6) * radiusCircle,
+    ];
+    const pB = [
+      xx - Math.cos(pi / 6) * radiusCircle,
+      yy + Math.sin(pi / 6) * radiusCircle,
+    ];
+    const pA = [
+      xx - Math.cos(pi / 3) * radiusCircle,
+      yy - Math.sin(pi / 3) * radiusCircle,
+    ];
     const pointA = new fabric.Point(pA[0], pA[1]);
     const pointB = new fabric.Point(pB[0], pB[1]);
     const pointC = new fabric.Point(pC[0], pC[1]);
@@ -289,7 +318,10 @@ export default defineComponent({
           stroke: "gray",
           strokeDashArray: [2.5, 2.5],
           angle:
-            (Math.acos((disBC * disBC + disAC * disAC - disAB * disAB) / (2 * disAC * disBC)) *
+            (Math.acos(
+              (disBC * disBC + disAC * disAC - disAB * disAB) /
+                (2 * disAC * disBC)
+            ) *
               180) /
             Math.PI,
         });
@@ -304,7 +336,10 @@ export default defineComponent({
           stroke: "gray",
           strokeDashArray: [2.5, 2.5],
           angle:
-            (Math.acos((disBC * disBC + disAC * disAC - disAB * disAB) / (2 * disAC * disBC)) *
+            (Math.acos(
+              (disBC * disBC + disAC * disAC - disAB * disAB) /
+                (2 * disAC * disBC)
+            ) *
               180) /
               Math.PI +
             90,
@@ -320,7 +355,10 @@ export default defineComponent({
           stroke: "gray",
           strokeDashArray: [2.5, 2.5],
           angle:
-            (Math.acos((disBC * disBC + disAC * disAC - disAB * disAB) / (2 * disAC * disBC)) *
+            (Math.acos(
+              (disBC * disBC + disAC * disAC - disAB * disAB) /
+                (2 * disAC * disBC)
+            ) *
               180) /
               Math.PI +
             270,
@@ -336,7 +374,10 @@ export default defineComponent({
           stroke: "gray",
           strokeDashArray: [2.5, 2.5],
           angle:
-            (Math.acos((disBC * disBC + disAC * disAC - disAB * disAB) / (2 * disAC * disBC)) *
+            (Math.acos(
+              (disBC * disBC + disAC * disAC - disAB * disAB) /
+                (2 * disAC * disBC)
+            ) *
               180) /
               Math.PI +
             90,
@@ -352,7 +393,10 @@ export default defineComponent({
           stroke: "gray",
           strokeDashArray: [2.5, 2.5],
           angle:
-            (Math.acos((disBC * disBC + disAB * disAB - disAC * disAC) / (2 * disAB * disBC)) *
+            (Math.acos(
+              (disBC * disBC + disAB * disAB - disAC * disAC) /
+                (2 * disAB * disBC)
+            ) *
               180) /
               Math.PI +
             300,
@@ -368,7 +412,10 @@ export default defineComponent({
           stroke: "gray",
           strokeDashArray: [2.5, 2.5],
           angle:
-            (Math.acos((disBC * disBC + disAB * disAB - disAC * disAC) / (2 * disAB * disBC)) *
+            (Math.acos(
+              (disBC * disBC + disAB * disAB - disAC * disAC) /
+                (2 * disAB * disBC)
+            ) *
               180) /
               Math.PI +
             210,
@@ -384,7 +431,10 @@ export default defineComponent({
           stroke: "gray",
           strokeDashArray: [2.5, 2.5],
           angle:
-            (Math.acos((disBC * disBC + disAB * disAB - disAC * disAC) / (2 * disAB * disBC)) *
+            (Math.acos(
+              (disBC * disBC + disAB * disAB - disAC * disAC) /
+                (2 * disAB * disBC)
+            ) *
               180) /
               Math.PI +
             210,
@@ -401,7 +451,10 @@ export default defineComponent({
           strokeDashArray: [2.5, 2.5],
           angle:
             -(
-              (Math.acos((disBC * disBC + disAB * disAB - disAC * disAC) / (2 * disAB * disBC)) *
+              (Math.acos(
+                (disBC * disBC + disAB * disAB - disAC * disAC) /
+                  (2 * disAB * disBC)
+              ) *
                 180) /
               Math.PI
             ) - 180,
@@ -602,7 +655,10 @@ export default defineComponent({
       stroke: "gray",
       strokeDashArray: [2.5, 2.5],
       angle:
-        (Math.acos((disBC * disBC + disAC * disAC - disAB * disAB) / (2 * disAC * disBC)) * 180) /
+        (Math.acos(
+          (disBC * disBC + disAC * disAC - disAB * disAB) / (2 * disAC * disBC)
+        ) *
+          180) /
           Math.PI +
         270,
     });
@@ -615,7 +671,10 @@ export default defineComponent({
       stroke: "gray",
       strokeDashArray: [2.5, 2.5],
       angle:
-        (Math.acos((disBC * disBC + disAB * disAB - disAC * disAC) / (2 * disAB * disBC)) * 180) /
+        (Math.acos(
+          (disBC * disBC + disAB * disAB - disAC * disAC) / (2 * disAB * disBC)
+        ) *
+          180) /
           Math.PI +
         300,
     });