Đây là demo nhỏ để mô phỏng bài Area query với lời giải của mình. Chi tiết về demo ở phía dưới. Bạn hãy đọc bài blog Lời giải bài Area Query - ICPC Việt Nam Regional 2023 để biết thêm chi tiết.
This is a small demo to visualize the Area query with my solution. Details about the demo are below.
Tính năng
- Cho phép nhập input của một test case với format đã mô tả ở trong đề bài.
- Input sẽ được validate, nhưng sẽ không kiểm tra chặt chẽ từng khoảng trắng.
- Vẽ hình:
- Các phần đa giác được chia, cấu trúc cây tạo bởi các vùng được cắt, và vùng cắt được giữ lại cho truy vấn cuối cùng.
- Màu của vùng cắt, màu của đường cắt và màu của các nút của cây tương ứng với nhau là giống nhau.
- Output:
- Euler tour của cây, với màu tương ứng với node trên cây.
- Thứ tự thăm các đường cắt khi đi trên cạnh của đa giác đã cho theo thứ tự đỉnh , với màu tương ứng với màu của đường cắt.
- Cũng là thứ tự thăm đường cắt nhưng in ra cả đường cắt thay vì mỗi đỉnh.
- Đáp án cho truy vấn cuối cùng.
- Control:
- Checkbox để ẩn/hiện output.
- Preview: link để có thể chèn vào blog khác mà không có phần control.
Source code
Ban đầu để code nhanh thì mình đã phát triển cái visualizer này trên codepen tại đây, và ban đầu mình cũng định dùng code pen để host luôn.
Song phần copy preview hoạt động không tốt lắm, nên cuối cùng mình lại host trên github page. Các bạn có thể xem source code tại đây.
Features
- Allows inputting a test case following the format described in the problem statement.
- The input will be validated but won't be strictly checked for each space.
- Drawing:
- Divides the polygons, creates a tree structure based on the cut regions, and keeps the cut region for the final query.
- The color of the cut region, the color of the cut path, and the color of the corresponding tree nodes are the same.
- Output:
- Euler tour of the tree, with colors corresponding to the nodes on the tree.
- Order of visiting the cut paths while traversing the edges of the given polygon in the order of vertices , with colors corresponding to the cut paths.
- Also the order of visiting cut paths but displaying the entire cut paths instead of individual vertices.
- Answer for the final query.
- Control:
- Checkbox to hide/show output.
- Preview: Link to embed into other blogs without the control section.
Source code
The initial idea was to develop this visualizer quickly on CodePen here, and originally, I planned to use CodePen to host it.
However, copying the preview didn't work well, so ultimately, I ended up hosting it on GitHub Pages. You can view the source code here.