Merge branch 'main' into jimmy-topic06

Geometry-Discovery-Project-UCI · May 6, 2024 · b31f965 · b31f965
2 parents ce1f1a6 + f936605
commit b31f965
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 25 deletions.
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
@@ -8,6 +8,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Install Dependencies
-        run: npm install @commitlint/config-conventional
-      - uses: JulienKode/pull-request-name-linter-action@v0.5.0
+
+      - name: Install commitlint
+        run: |
+          npm install -g @commitlint/cli @commitlint/config-conventional
+
+      - name: Validate PR title with commitlint
+        if: github.event_name == 'pull_request'
+        run: echo '${{ github.event.pull_request.title }}' | commitlint --verbose
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,18 @@ 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 MINGHUA_TSAI: Contributor = {
+  name: "Minghua Tsai",
+  email: "minghut1@uci.edu",
+  institute: Institute.UCIrvine,
+};
+
 export const contributors: Contributor[] = [
   ZHIQIN_LU,
   BRIAN_CABALLERO,
@@ -430,6 +442,8 @@ export const contributors: Contributor[] = [
   FELIX_YU,
   MELISSA_YU,
   KIRA_ZHANG,
+  MAUREEN_CHANG,
+  MINGHUA_TSAI
 ].sort((a, b) => {
   const aLastName = a.name.split(" ").pop() as string;
   const bLastName = b.name.split(" ").pop() as string;
@@ -511,6 +525,7 @@ export const topics: Topic[] = [
     essay: "pdfs/topic03.pdf",
     animationContributors: [XINXI_GUO, YI_CHEN],
     essayContributors: [ZHIQIN_LU, SHIYI_LYU],
+    captionContributors: [MINGHUA_TSAI],
   },
   {
     name: "Erdős-Mordell Inequality",
@@ -528,7 +543,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",
@@ -647,7 +662,7 @@ export const topics: Topic[] = [
     essayContributors: [ZHIFENG_WANG],
   },
   {
-    name: "Franago Triangle",
+    name: "Fagnano Triangle",
     index: 19,
     snapshot: "images/snapshots/topic19.png",
     essay: "pdfs/topic19.pdf",

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/GdpTopic03View.vue b/src/views/topics/GdpTopic03View.vue
@@ -12,13 +12,39 @@
     ></a-tab-pane>
     <a-tab-pane key="3" tab="Circumcenter">
       <div id="circumcenter-wrapper">
+        <p>
+          The circumcenter of a triangle is the center of the circumcircle.
+        </p>
+        <p>
+          In the following <span v-katex>\triangle ABC</span>, let <span v-katex>OD, OE,</span>
+          and <span v-katex>OF</span> be the perpendicular bisectors of three sides
+          <span v-katex>BC, CA,</span> and <span v-katex>AB</span> respectively.
+        </p>
+        <p>
+          Click, hold, and move point <span v-katex>A</span>, we shall see that
+          <span v-katex>OD, OE,</span> and <span v-katex>OF</span>
+          are always concurrent at <span v-katex>O</span>.
+        </p>
         <canvas id="circumcenter-canvas1" width="500" height="500"></canvas>
         <ATypographyTitle :level="4"></ATypographyTitle>
         <canvas id="circumcenter-canvas2" width="500" height="500"></canvas>
       </div>
     </a-tab-pane>
     <a-tab-pane key="4" tab="Orthocenter">
       <div id="orthocenter-wrapper">
+        <p>
+          The orthocenter of a triangle is the point where all three altitudes of the triangle intersect.
+        </p>
+        <p>
+          In the following <span v-katex>\triangle ABC</span>, let <span v-katex>AD, BE,</span>
+          and <span v-katex>CF</span> be the heights on <span v-katex>BC, CA,</span> and
+          <span v-katex>AB</span> respectively.
+        </p>
+        <p>
+          Click, hold, and move points <span v-katex>A, B,</span> and <span v-katex>C</span>,
+          we shall see that <span v-katex>AD, BE,</span> and <span v-katex>CF</span> are always
+          concurrent at a point <span v-katex>H</span>.
+        </p>
         <canvas id="orthocenter-canvas" width="500" height="500"></canvas></div
     ></a-tab-pane>
   </a-tabs>

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,
     });

diff --git a/src/views/topics/GdpTopic19View.vue b/src/views/topics/GdpTopic19View.vue
@@ -3,9 +3,9 @@
     <ATypographyParagraph>
 
     </ATypographyParagraph>
-    <div id="franago-triangle-wrapper">
-        <ATypographyTitle :level="4">Animated Franago Triangle</ATypographyTitle>
-        <canvas id="franago-triangle-canvas" width="500" height="500" />
+    <div id="fagnano-triangle-wrapper">
+        <ATypographyTitle :level="4">Animated Fagnano Triangle</ATypographyTitle>
+        <canvas id="fagnano-triangle-canvas" width="500" height="500" />
     </div>
 </template>
 
@@ -24,7 +24,7 @@ export default defineComponent(
             return { topic };
         },
         mounted() {
-            const canvas = new fabric.Canvas("franago-triangle-canvas", {
+            const canvas = new fabric.Canvas("fagnano-triangle-canvas", {
                 selection: false,
             });