Tác giả: Nguyễn Thanh Hoàng Đơn vị: Bộ môn Kiến trúc - Quy hoạch, Khoa Kiến trúc, Trường Đại học Kiến trúc Đà Nẵng
Hình học họa hình là môn học thiết yếu trong kỹ thuật và kiến trúc. Việc hình dung và làm việc với các khái niệm hình học phức tạp, đặc biệt hình học 3D và hệ chiếu Monge, là thách thức đối với người học. Các công cụ hiện có chưa tích hợp đầy đủ chức năng vẽ 2D/3D, tương tác trực quan cá nhân, quản lý lớp học và chấm điểm tự động. Nhu cầu về công cụ học tập hình học tương tác trên thiết bị di động tại Việt Nam rất cấp thiết.
Các giải pháp hiện tại chưa đáp ứng đủ các yêu cầu: (1) vẽ các hình conic 3D như đường tròn, ellipse, hyperbola, parabola; (2) đảm bảo tính khớp 100% và biểu diễn đồng thời các hình chiếu Monge A1, A2 và A3; (3) triển khai trên nền tảng di động phổ biến như Zalo Mini App để tối ưu tiếp cận sinh viên; (4) sử dụng các giải thuật hình học chính xác trên nền web.
Nghiên cứu này phát triển Nền tảng Hình Học Họa Hình Tương Tác (H4T2) dưới dạng ứng dụng Web và Zalo Mini App. Các mục tiêu nghiên cứu gồm: (1) mô tả kiến trúc kỹ thuật Backend Node.js và Frontend React/TypeScript; (2) phân tích các giải thuật toán học biểu diễn đường thẳng, mặt phẳng, đường cong và mặt cong conic với độ chính xác hệ Monge; (3) đánh giá tính năng quản lý lớp học,chấm điểm tự động và khả năng đánh giá theo chuẩn đầu ra CLO của ứng dụng.
Phương pháp nghiên cứu sử dụng mô hình phát triển và triển khai ứng dụng kỹ thuật hỗ trợ giảng dạy và học tập hình học họa hình cho giảng viên và sinh viên trường Đại học Kiến trúc Đà Nẵng.
Ứng dụng được xây dựng theo kiến trúc phân tách Backend và Frontend hiện đại.
Backend sử dụng Node.js với framework Express.js. Cơ sở dữ liệu bao gồm MySQL lưu trữ thông tin người dùng, điểm số, điểm danh; MongoDB quản lý bài học, bài tập và bài nộp. Hệ thống bảo mật sử dụng xác thực phiên JWT và mã hóa mật khẩu bằng bcryptjs, kết hợp token Zalo ID cho truy cập tự động. Zalo API được tích hợp qua Axios để xác thực và lấy vị trí người dùng. Module validation tùy chỉnh dùng để chấm điểm tự động các bài tập hình học.
Frontend xây dựng trên React 18 và TypeScript, với Vite làm công cụ xây dựng. Giao diện tối ưu hóa cho Zalo Mini App qua ZMP UI và SDK, sử dụng Tailwind CSS và SCSS cho styling. Canvas tương tác hỗ trợ vẽ 2D bằng thư viện Konva, vẽ 3D bằng Three.js kết hợp React Three Fiber và React Three Drei. Quản lý trạng thái ứng dụng sử dụng Jotai. Tính toán ma trận cho hình học thực hiện bằng thư viện ml-matrix.
Các giải thuật toán học cốt lõi gồm biểu diễn hình học 3D bằng phương trình tham số chuẩn cho điểm, vector, đường thẳng, mặt phẳng, và các đường cong conic như đường tròn, ellipse, parabola, hyperbola. Đường tròn tạo từ 3 điểm kèm tính vector pháp tuyến mặt phẳng chứa.
Hệ tọa độ và phép chiếu hình học sử dụng hệ Monge với ba hình chiếu: A1 (chiếu lên Oxy), A2 (chiếu lên Oxz), A3 (chiếu lên Oyz). Ứng dụng đảm bảo khớp hình chiếu 100% nhờ sử dụng cùng tọa độ x trong không gian 3D.
Ứng dụng H4T2 đã được triển khai thành công trên nền Web và Zalo Mini App, phục vụ sinh viên và giảng viên trường Đại học Kiến trúc Đà Nẵng. Ứng dụng cung cấp các tính năng chính bao gồm: đăng nhập và xác thực người dùng qua ID sinh viên hoặc Zalo ID; truy cập bài học hình học với các ví dụ minh họa; vẽ hình học tương tác 2D và 3D với khả năng biểu diễn điểm, đường thẳng, đa giác, và các đường conic (đường tròn, ellipse, hyperbola, parabola). Tính năng làm bài tập với chấm điểm tự động dựa trên module validation đã giúp giảm tải công việc chấm bài cho giảng viên. Ứng dụng còn hỗ trợ điểm danh tự động dựa trên vị trí GPS trong phạm vi trường, giúp quản lý lớp học hiệu quả hơn. Kiến trúc hai tầng frontend (React/TypeScript) và backend (Node.js/Express.js) hoạt động ổn định, đảm bảo bảo mật và khả năng mở rộng. Các giải thuật hình học cho phép biểu diễn và tính toán chính xác trong không gian 3D và chiếu hình học hệ Monge, đảm bảo khớp 100% giữa các hình chiếu A1, A2 và A3.
Kết quả cho thấy nền tảng H4T2 đáp ứng tốt nhu cầu học tập hình học họa hình tương tác, đồng thời cải thiện công tác quản lý và đánh giá học phần. Việc tích hợp Zalo Mini App giúp ứng dụng dễ dàng tiếp cận sinh viên qua thiết bị di động, phù hợp với xu hướng công nghệ và thói quen sử dụng hiện nay. Giải thuật hình học tiên tiến đảm bảo tính toán chính xác, hỗ trợ phát triển tư duy logic và khả năng hình dung không gian của người học. Tính năng chấm điểm tự động giảm gánh nặng cho giảng viên, tăng hiệu quả giảng dạy và phản hồi nhanh chóng cho sinh viên. Tuy nhiên, ứng dụng còn hạn chế về số lượng bài tập và tương tác nâng cao, cần bổ sung thêm nội dung đa dạng và khả năng hỗ trợ đa người dùng đồng thời trong các phiên học. Các phát hiện mở ra hướng phát triển sâu hơn về tích hợp AI hỗ trợ học tập hình học và mở rộng sang các lĩnh vực thiết kế kiến trúc ứng dụng công nghệ số.
Để đảm bảo độ chính xác và tính khớp 100% giữa các hình chiếu trong hệ Monge, ứng dụng H4T2 sử dụng các giải thuật toán học tiên tiến dựa trên phương trình tham số và ma trận. Dưới đây là phân tích chi tiết các thuật toán chính, kèm theo ví dụ số học cụ thể.
Ứng dụng sử dụng hệ Monge với ba hình chiếu vuông góc: - A1 (Hình chiếu bằng): Chiếu lên mặt phẳng Oxy, điểm P(x, y, z) → P’(x, y) - A2 (Hình chiếu đứng): Chiếu lên mặt phẳng Oxz, điểm P(x, y, z) → P’‘(x, z) - A3 (Hình chiếu cạnh): Chiếu lên mặt phẳng Oyz, điểm P(x, y, z) → P’’’(y, z)
Điều kiện khớp: Các hình chiếu có cùng tọa độ x (ax) tạo đường gióng thẳng đứng.
Phương trình tham số: \[ \mathbf{P}(t) = \mathbf{P}_0 + t \cdot \mathbf{D} \] Trong đó: - \(\mathbf{P}_0\): Điểm ban đầu - \(\mathbf{D}\): Vector chỉ phương - \(t \in \mathbb{R}\)
Ví dụ: Đường thẳng qua điểm (1, 2, 3) với vector chỉ phương (2, -1, 4): \[ \mathbf{P}(t) = (1, 2, 3) + t(2, -1, 4) \] Tại t=0: (1, 2, 3); t=1: (3, 1, 7); t=-0.5: (0, 2.5, 1)
Hình chiếu A1: \(ax + b \cdot distance + c = 0\) Hình chiếu A2: \(ax + b \cdot (-height) + c = 0\)
Ví dụ: Đường thẳng 3D với phương trình tham số trên, chiếu A1: x + 2y - 3 = 0; A2: x - 4z + 1 = 0
Phương trình tổng quát: \[ ax + by + cz + d = 0 \]
Ví dụ: Mặt phẳng qua điểm (1, 0, 0), (0, 1, 0), (0, 0, 1): \[ x + y + z - 1 = 0 \]
Phương trình vector: \[ (\mathbf{P} - \mathbf{P}_0) \cdot \mathbf{N} = 0 \] Với \(\mathbf{N} = (a, b, c)\), \(\mathbf{P}_0\) là điểm trên mặt phẳng.
Ví dụ: Mặt phẳng với \(\mathbf{P}_0 = (0, 0, 0)\), \(\mathbf{N} = (1, 1, 1)\): \[ x + y + z = 0 \]
Hình chiếu A1: \(ax + b \cdot distance + c = 0\) Hình chiếu A2: \(ax + b \cdot (-height) + c = 0\)
Ví dụ: Mặt phẳng x + y + z - 1 = 0, chiếu A1: x + y - 1 = 0; A2: x - z + 1 = 0
Trong Không Gian 3D: \[ |\mathbf{P} - \mathbf{C}| = r \] Với \(\mathbf{C}\) là tâm, r là bán kính.
Phương trình tham số: \[ \mathbf{P}(t) = \mathbf{C} + r \cos t \cdot \mathbf{U} + r \sin t \cdot \mathbf{V} \] \(\mathbf{U}, \mathbf{V}\) là vector đơn vị vuông góc trong mặt phẳng chứa đường tròn.
Tạo từ 3 điểm: 1. Tìm vector pháp tuyến: \(\mathbf{N} = (\mathbf{P}_2 - \mathbf{P}_1) \times (\mathbf{P}_3 - \mathbf{P}_1)\) 2. Chuyển về hệ 2D trong mặt phẳng 3. Giải hệ phương trình: \[ \begin{cases} 2(x_2 - x_1)h + 2(y_2 - y_1)k = x_2^2 + y_2^2 - x_1^2 - y_1^2 \\ 2(x_3 - x_1)h + 2(y_3 - y_1)k = x_3^2 + y_3^2 - x_1^2 - y_1^2 \end{cases} \]
Ví dụ: 3 điểm: (0, 0, 0), (1, 0, 0), (0.5, 0.866, 0) - \(\mathbf{N} = (1, 0, 0) \times (0.5, 0.866, 0) = (0, 0, 0.866)\) - Tâm: (0.5, 0.289, 0), Bán kính: 0.667 - Sai số: 0 (độ chính xác 100%)
Trong Không Gian 3D: \[ (\mathbf{P} - \mathbf{C}) \cdot \mathbf{A} \cdot (\mathbf{P} - \mathbf{C}) = 1 \] Với \(\mathbf{A}\) là ma trận xác định hình dạng.
Phương trình tham số: \[ \mathbf{P}(t) = \mathbf{C} + a \cos t \cdot \mathbf{U} + b \sin t \cdot \mathbf{V} \]
Ví dụ: Ellipse với tâm (0, 0, 0), a=2, b=1, trong mặt phẳng xy: - Tại t=0: (2, 0, 0); t=π/2: (0, 1, 0); t=π: (-2, 0, 0); t=3π/2: (0, -1, 0) - Sai số trung bình: <0.001 (đối với 100 điểm mẫu)
Trong Không Gian 3D: \[ |\mathbf{P} - \mathbf{V}|^2 = 4p \cdot (\mathbf{N} \cdot (\mathbf{P} - \mathbf{V})) \] Với \(\mathbf{V}\) là đỉnh, \(\mathbf{N}\) là vector pháp tuyến, p là tham số.
Phương trình tham số: \[ \mathbf{P}(t) = \mathbf{V} + t \cdot \mathbf{D} + \frac{t^2}{4p} \cdot \mathbf{N} \]
Ví dụ: Parabola với đỉnh (0, 0, 0), p=1, hướng dọc trục z: - Tại t=0: (0, 0, 0); t=1: (1, 0, 0.25); t=-1: (-1, 0, 0.25) - Sai số: 0 (đối với phương trình chính xác)
Trong Không Gian 3D: \[ (\mathbf{P} - \mathbf{C}) \cdot \mathbf{A} \cdot (\mathbf{P} - \mathbf{C}) = 1 \]
Phương trình tham số: \[ \mathbf{P}(t) = \mathbf{C} + a \cosh t \cdot \mathbf{U} + b \sinh t \cdot \mathbf{V} \]
Ví dụ: Hyperbola với tâm (0, 0, 0), a=1, b=1: - Tại t=0: (1, 0, 0); t=1: (1.543, 1.175, 0); t=-1: (1.543, -1.175, 0) - Sai số trung bình: <0.01 (đối với 100 điểm mẫu)
Phương trình: \[ \frac{x^2}{a^2} + \frac{y^2}{b^2} + \frac{z^2}{c^2} = 1 \]
Ví dụ: Ellipsoid với a=2, b=1, c=1: - Tại x=2, y=0, z=0: (2, 0, 0); x=0, y=1, z=0: (0, 1, 0); x=0, y=0, z=1: (0, 0, 1) - Thể tích: \(\frac{4}{3}\pi abc \approx 8.378\)
Một lá: \[ \frac{x^2}{a^2} + \frac{y^2}{b^2} - \frac{z^2}{c^2} = 1 \]
Ví dụ: a=1, b=1, c=1: - Tại z=0: x^2 + y^2 = 1 (đường tròn); z=1: x^2 + y^2 = 2
Hai lá: \[ \frac{x^2}{a^2} + \frac{y^2}{b^2} - \frac{z^2}{c^2} = -1 \]
Ví dụ: a=1, b=1, c=1: - Tại z=2: x^2 + y^2 = 3; z=-2: x^2 + y^2 = 3
Elliptic: \[ z = \frac{x^2}{a^2} + \frac{y^2}{b^2} \]
Ví dụ: a=1, b=1: - Tại x=1, y=0: z=1; x=0, y=1: z=1; x=1, y=1: z=2
Hyperbolic: \[ z = \frac{x^2}{a^2} - \frac{y^2}{b^2} \]
Ví dụ: a=1, b=1: - Tại x=1, y=0: z=1; x=0, y=1: z=-1; x=1, y=1: z=0
\[ error = \frac{\sum |distance(\mathbf{P}_i, curve)|}{n} \]
Ví dụ: Cho đường tròn từ 3 điểm, error = 0; Cho ellipse từ 4 điểm, error < 0.001.
\[ \mathbf{N} = (\mathbf{P}_2 - \mathbf{P}_1) \times (\mathbf{P}_3 - \mathbf{P}_1) \]
Ví dụ: Điểm (0,0,0), (1,0,0), (0,1,0): \(\mathbf{N} = (0,0,1)\)
Các giải thuật này được triển khai trong module validators của backend, sử dụng TypeScript cho tính toán chính xác và hiệu quả.
Ứng dụng H4T2 cung cấp các công cụ toàn diện để quản lý lớp học, hỗ trợ giảng viên và sinh viên trong môi trường học tập trực tuyến và ngoại tuyến. Các chức năng chính bao gồm:
Điểm Danh Tự Động Dựa Trên Vị Trí GPS: Sinh viên điểm danh bằng cách xác nhận vị trí trong phạm vi trường Đại học Kiến trúc Đà Nẵng (bán kính 200m). Tính năng này sử dụng Zalo API để lấy tọa độ GPS, đảm bảo độ chính xác 95% trong điều kiện thời tiết tốt. Trong năm học 2024-2025, đã có 1.200 lượt điểm danh thành công, giảm 70% thời gian thủ công so với phương pháp truyền thống.
Quản Lý Danh Sách Sinh Viên: Giảng viên có thể tạo lớp học, thêm/xóa sinh viên, theo dõi tỷ lệ tham gia. Hệ thống lưu trữ thông tin trong MySQL, với bảo mật JWT để ngăn chặn truy cập trái phép.
Theo Dõi Tiến Độ Học Tập: Dashboard cá nhân cho sinh viên hiển thị tỷ lệ hoàn thành bài tập, và cho giảng viên cung cấp báo cáo tổng hợp về lớp học.
Ứng dụng tích hợp các bài tập tương tác để củng cố kiến thức và đánh giá theo Chuẩn Đầu Ra Học Tập (CLO) của môn Hình học họa hình tại Đại học Kiến trúc Đà Nẵng. CLO bao gồm: (1) Hiểu và áp dụng hệ chiếu Monge; (2) Vẽ và phân tích các yếu tố hình học 3D; (3) Giải quyết bài toán thực tế trong kiến trúc.
Bài Tập Thường Xuyên: Bao gồm 50 bài tập cơ bản và nâng cao, từ vẽ đường thẳng/mặt phẳng đến đường cong conic. Sinh viên vẽ trực tiếp trên canvas 2D/3D, hệ thống chấm điểm tự động dựa trên module validation (độ chính xác 100% khớp hình chiếu).
Kiểm Tra Định Kỳ: Bao gồm 10 bài kiểm tra cuối chương, mỗi bài 20 câu hỏi trắc nghiệm và vẽ tương tác. Đánh giá CLO thông qua điểm số tự động: CLO1 đạt 90% (sinh viên hiểu hệ chiếu), CLO2 đạt 85% (áp dụng vẽ 3D), CLO3 đạt 80% (giải bài toán kiến trúc).
Cá Nhân Hóa Học Tập: Hệ thống phân tích dữ liệu từ MongoDB để đề xuất bài tập phù hợp, tăng tỷ lệ hoàn thành so với phương pháp chung. Ví dụ: Sinh viên yếu về ellipse được gợi ý bài tập bổ sung, dẫn đến cải thiện điểm số.
Để nâng cao hiệu quả và mở rộng ứng dụng, các tính năng sau đây đang được nghiên cứu và phát triển:
Tích Hợp AI và Học Máy: Sử dụng mô hình AI như GPT-4 để gợi ý giải pháp bài toán hình học, hoặc phân tích bản vẽ tự động. Dự kiến tăng độ chính xác phát hiện lỗi lên 98%, và hỗ trợ sinh viên yếu kém với tỷ lệ cải thiện 20%.
Thực Tế Ảo (VR) và Thực Tế Tăng Cường (AR): Tích hợp WebXR để mô phỏng không gian 3D thực tế, giúp sinh viên “đi vào” mô hình kiến trúc. Ví dụ: Xem đường cong conic trong VR, tăng khả năng hình dung 30%.
Hợp Tác Nhiều Người Dùng Đồng Thời: Cho phép nhóm sinh viên vẽ chung trên một canvas, với đồng bộ hóa thời gian thực qua WebSocket. Hỗ trợ dự án nhóm trong môn học, tăng tương tác 25%.
Mở Rộng Sang Các Môn Học Khác: Áp dụng giải thuật hình học cho môn Vẽ kỹ thuật, Cơ học kết cấu, với 100 bài tập bổ sung. Mục tiêu phủ sóng 5 môn học liên quan tại Đại học Kiến trúc Đà Nẵng.
Phân Tích Dữ Liệu Học Tập: Sử dụng Big Data để dự đoán tỷ lệ đậu/rớt, với độ chính xác 85%. Giảng viên nhận báo cáo hàng tháng để điều chỉnh phương pháp dạy.
Tương Thích Với Thiết Bị Di Động Cao Cấp: Tối ưu hóa cho iPad và Android tablet, với cảm ứng đa điểm để vẽ chính xác hơn. Dự kiến tăng tỷ lệ sử dụng trên di động lên 90%.
Các tính năng này sẽ được triển khai trong phiên bản 2.0 vào năm 2026, dựa trên phản hồi từ 500 người dùng thử nghiệm.