Path Planning Visualizer Project

Программный проект онлайн-визуализатор работы алгоритмов Дейкстры и А*.

Онлайн запуск проекта

Сервер задеплоен при помощи github pages, поэтому сейчас достаточно перейти по ссылке https://danielshinoda.github.io/pathplanning/.

Запуск через localhost

Клонируйте содержимое этого репозитория в нужную директорию при помощи Git bash'a. (В нужной директории Rightclick + Git Bash here)

git clone https://github.com/*account*/pathplanning.git

Чтобы запустить локально войдите в директорию проекта и пропишите

npm start

В браузере откроется вкладка http://localhost:3000. Если вы измените содержимое проекта локально, то локальный сайт автоматически обновится, а так же можно будет увидеть ошибки компиляции в консоли, если таковые имеются.

Для запуска в режиме тестирования пропишите в bash команду

npm test

Чтобы закоммитить обновления в ваш гитхаб репозиторий пропишите следующие команды в bash:

npm run deploy
git add .
git commit -m "First commit!"
git push

Интерфейс сайта

На сайте расположено поле размера 20х50 клеток, а так же начальная клетка(зелёный квадрат) и конечная клетка(красный квадрат).

В верхней часте сайта прикреплена панель навигации, в которой расположены кнопки:

• Clear grid(очищает все клетки кроме начальной и конечной)
• Visualize Dijkstra(запускает алгоритм Дейкстры)
• Visualize A*(запускает алгоритм А*)
• Clear Walls - очищает все текущие стены
• Generate Maze - генератор случайного лабиринта

Присутствует так же кнопка Options, в которой можно выбрать опции поиска:

• Allow diagonal - разрешить движение по диагонали.
• Allow squeeze - разрешить просачиваться между двумя стенами.
• Cutcorners - разрешить срезать углы, если есть стена

Посещённые клетки окрашиваются в голубой цвет, кратчайший путь в жёлтый цвет, стены тёмно-синего цвета, а вершины, которые лежат в рассмотрении фиолетового цвета.

Чтобы поставить стены нужно зажать ЛКМ и передвигать, на том месте, где была мышь, появятся стены, чтобы остановить установку стен отпустите ЛКМ.

В ближайшей разработке:

Backend

Опции движения.

Frontend

Настройка масштаба карты, описание интерфейса на сайте.