cartesian-point-distance

Author: nazarpunk

Writerside/Geometry.tree

@@ -13,5 +13,10 @@
         <toc-element topic="number-line-segment.md"/>
         <toc-element topic="number-line-segment-intersect.md"/>
     </toc-element>
+    <toc-element topic="cartesian-coordinate-system.md">
+        <toc-element topic="cartesian-point-distance.md"/>
+        <toc-element topic="cartesian-line.md"/>
+        <toc-element topic="cartesian-line-equation.md"/>
+    </toc-element>
     <toc-element topic="donate.md"/>
 </instance-profile>

Writerside/cfg/buildprofiles.xml

@@ -35,12 +35,18 @@
             <include-in-head>js/core/color.js</include-in-head>
             <include-in-head>js/core/grid.js</include-in-head>
             <include-in-head>js/core/point.js</include-in-head>
+
             <include-in-head>js/example/number-line.js</include-in-head>
             <include-in-head>js/example/number-line-abs.js</include-in-head>
             <include-in-head>js/example/number-line-distance.js</include-in-head>
             <include-in-head>js/example/number-line-segment.js</include-in-head>
             <include-in-head>js/example/number-line-segment-intersect.js</include-in-head>
 
+            <include-in-head>js/example/cartesian-coordinate-system.js</include-in-head>
+            <include-in-head>js/example/cartesian-point-distance-a.js</include-in-head>
+            <include-in-head>js/example/cartesian-point-distance-b.js</include-in-head>
+            <include-in-head>js/example/cartesian-line.js</include-in-head>
+
             <include-in-head>js/core/observe.js</include-in-head>
             <include-in-head>js/head-end.html</include-in-head>
 

Writerside/cfg/js/core/grid.js

@@ -418,13 +418,13 @@ class CanvasGrid extends HTMLElement {
      * @param {Point} a
      * @param {Point} b
      * @param {number[]} dash
-     * @param {boolean} line
+     * @param {Color?} line
      * @param {Color} color
      * @return {this}
      */
     segment(a, b, {
         dash = [],
-        line = false,
+        line = null,
         color = Color.yellow,
     } = {}) {
         const dpr = window.devicePixelRatio ?? 1
@@ -460,11 +460,11 @@ class CanvasGrid extends HTMLElement {
         ctx.stroke()
         ctx.closePath()
 
-        if (line) {
+        if (line !== null) {
             const ld = Math.max(this.canvas.width, this.canvas.height) * 10
 
             ctx.beginPath()
-            ctx.strokeStyle = Colors.point.track.fill
+            ctx.strokeStyle = line.strokeStyle
             let cos = Math.cos(angle)
             let sin = Math.sin(angle)
             ctx.moveTo(cos * r + bx, sin * r + by)

Writerside/cfg/js/example/cartesian-coordinate-system.js

@@ -0,0 +1,29 @@
+class CartesianCoordinateSystem extends CanvasGrid {
+    static name = 'cartesian-coordinate-system'
+
+    get height() {
+        return 12
+    }
+
+    constructor() {
+        super()
+
+        this
+            .roundInit(false)
+            .points.push(
+            new Point(5, 3),
+        )
+    }
+
+    draw() {
+        this.grid().dragRelease()
+
+        const [A] = this.points
+
+        for (const p of this.points) p.round = this.round
+
+        this.point(A, {trackX: true, trackY: true, name: 'A'})
+    }
+}
+
+CanvasGrid.define(CartesianCoordinateSystem)

Writerside/cfg/js/example/cartesian-line.js

@@ -0,0 +1,33 @@
+class CartesianLine extends CanvasGrid {
+    static name = 'canvas-cartesian-line'
+
+    get height() {
+        return 12
+    }
+
+    constructor() {
+        super()
+
+        this
+            .roundInit(false)
+            .points.push(
+            new Point(2, 3),
+            new Point(-2, 1),
+        )
+    }
+
+    draw() {
+        this.grid().dragRelease()
+
+        const [A, B] = this.points
+
+        for (const p of this.points) p.round = this.round
+
+        this
+            .point(A, {trackX: true, trackY: true, name: 'A'})
+            .point(B, {trackX: true, trackY: true, name: 'B'})
+            .segment(A, B, {line: Color.yellow})
+    }
+}
+
+CanvasGrid.define(CartesianLine)

Writerside/cfg/js/example/cartesian-point-distance-a.js

@@ -0,0 +1,38 @@
+class CartesianPointDistanceA extends CanvasGrid {
+    static name = 'canvas-cartesian-point-distance-a'
+
+    get height() {
+        return 14
+    }
+
+    constructor() {
+        super()
+
+        this
+            .roundInit(false)
+            .points.push(
+            new Point(4, 3),
+        )
+    }
+
+    draw() {
+        this.grid().dragRelease()
+
+        const [A] = this.points
+
+        const O = new Point(0, 0)
+
+        A.round = O.round = this.round
+
+        const d = Math.sqrt(A.x * A.x + A.y * A.y)
+
+
+        this
+            .point(A, {trackX: true, trackY: true, name: 'A'})
+            .point(O, {name: '(0,0)', dash: [2, 2]})
+            .segment(A, O, {dash: [2, 2]})
+            .text(`Расстояние ${d.toFixed(2)}`, {x: 0, y: 4})
+    }
+}
+
+CanvasGrid.define(CartesianPointDistanceA)

Writerside/cfg/js/example/cartesian-point-distance-b.js

@@ -0,0 +1,49 @@
+class CartesianPointDistanceB extends CanvasGrid {
+    static name = 'canvas-cartesian-point-distance-b'
+
+    get height() {
+        return 16
+    }
+
+    constructor() {
+        super()
+
+        this
+            .roundInit(false)
+            .points.push(
+            new Point(3, -2),
+            new Point(6, -6),
+        )
+    }
+
+    draw() {
+        this.grid().dragRelease()
+
+        const [A, B] = this.points
+
+        for (const p of this.points) p.round = this.round
+
+        const dx = B.x - A.x
+        const dy = B.y - A.y
+
+        const d = Math.sqrt(dx * dx + dy * dy)
+
+        const A1 = new Point(0, 0)
+        const B1 = new Point(dx, dy)
+
+        A1.round = this.round
+
+        this
+            .point(A1, {name: 'A′', dash: [2, 2]})
+            .point(B1, {name: 'B′', dash: [2, 2]})
+            .segment(A1, B1, {dash: [2, 2]})
+
+            .point(A, {trackX: true, trackY: true, name: 'A'})
+            .point(B, {trackX: true, trackY: true, name: 'B'})
+
+            .segment(A, B)
+            .text(`Расстояние ${d.toFixed(2)}`, {x: 0, y: 5})
+    }
+}
+
+CanvasGrid.define(CartesianPointDistanceB)

Writerside/cfg/js/example/test.html

@@ -7,6 +7,7 @@
         :root {
             color-scheme: dark;
         }
+
         html, body {
             background-color: #252528;
         }
@@ -23,13 +24,18 @@
     <script type="text/javascript" src="number-line-segment.js"></script>
     <script type="text/javascript" src="number-line-segment-intersect.js"></script>
 
+
+    <script type="text/javascript" src="cartesian-line.js"></script>
+    <script type="text/javascript" src="cartesian-point-distance-a.js"></script>
+    <script type="text/javascript" src="cartesian-point-distance-b.js"></script>
+
+
     <script type="text/javascript" src="../core/observe.js"></script>
 </head>
 
 <body>
 
-
-<div id="canvas-number-line-segment-intersect"></div>
+<div id="canvas-cartesian-point-distance-b"></div>
 
 </body>
 

Writerside/cfg/js/head-start.html

@@ -1,6 +1,7 @@
 <!--suppress CssUnusedSymbol -->
 <style>
-    div.h1-related > .MathJax {
+    div.h1-related > .MathJax,
+    div.h2-related > .MathJax {
         display: flex;
         align-items: center;
         justify-content: center;

Writerside/topics/cartesian-coordinate-system.md

@@ -0,0 +1,26 @@
+<show-structure for="chapter,procedure" depth="3"/>
+
+# Декартова система координат
+
+Система координат, которая позволяет однозначным образом определить каждую точку на плоскости с помощью пары числовых
+координат.
+
+```.``` {id=cartesian-coordinate-system}
+
+> Была придумана Рене Декартом *(René Descartes)*, чьё латинизированное имя Renatus Cartesius. Посему в англоязычных
+> источниках она называется *Cartesian coordinate system*.
+
+## Оси {id="axis"}
+
+По сути — две [числовые прямые](number-line.md), которые пересекаются в точке $(0,0)$ под прямым углом:
+
+- горизонтальная ось $X$, растёт слева направо
+- вертикальная ось $Y$, растёт снизу вверх
+
+При записи координаты, значение по оси $X$ записывают первым:
+
+$$
+A(x,y)
+$$
+
+