Coder Social home page Coder Social logo

zmaqutu / 3d-pathfinding-visualizer Goto Github PK

View Code? Open in Web Editor NEW
36.0 2.0 14.0 211.28 MB

This is a three dimensional pathfinding algorithm visualizer project.

Home Page: https://zmaqutu.github.io/3D-Pathfinding-Visualizer/

HTML 2.12% CSS 0.45% JavaScript 92.09% SCSS 5.35%
threejs react-three-fiber reactjs algorithms pathfinding javascript dijkstra-algorithm breadth-first-search tweenjs webgl

3d-pathfinding-visualizer's Introduction

3D Pathfinding Algorithm Visualizer

A Visualizer for some common pathfinding and machine learning algorithms in 3D.

Live Demo

A live interactive demo can be found here.

Features

Machine Learning algorithms

  • Q-Learning
    This is classical reinforcement learning algorithm. We initialize an agent to a random location on the map and have it learn about its environment through a series of explorative(random) and exploitative(most rewarding) actions. In this algorithm the aim is to train an agent (in this case a robot delivering packages) to find an optimal path from start to finish, while avoiding "walls" or "ditches" at all costs. An example of a trained agent (with a curiosity of 0.3) is shown below.

Notice how the agent has learned to completely avoid the area south of its starting position because of a cluster of walls. You can change the agent's behaviour for both training and optimal policy visualization by changing the setting in the panel shown below.

Weighted and unweighted algorithms

  • Dijkstra’s algorithm (weighted)
    The father of pathfinding algorithms, it creates a tree of shortest paths from the starting vertex, the source, to all other points in the graph. As shown in the image below this algorithm does not care to avoid the area around the walls. Guarantees the shortest path!

  • A* Search algorithm (weighted)
    One of the best and a popular technique used in path-finding and graph traversals with heuristic. Guarantees the shortest path!

  • Breadth-First Search (unwighted)
    The algorithm starts at the tree root, and explores all of the neighbor nodes at the present depth prior to moving on to the nodes at the next depth level. Guarantees the shortest path!

  • Depth-First Search (unwighted)
    The algorithm starts at the root node and explores as far as possible along each branch before backtracking. Does not guarantee the shortest path!

Maze generation

Two methods to generate a maze:

  • Recursive Division
  • Random Maze

Libraries used

  • Three.js
  • react-three-fiber
  • Tween.js
  • Tensorflow JS

Contributing

Contributions are welcome. Please feel free to make a PR.

Project setup

This project was bootstrapped with Create React App.

npm install
npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Future Scope

  • Add model of the martian surface and a package delivery robot for visualization
  • Add button to toggle node information as text on each node in shortest path
  • Add more algorithms to visualize

Made with ❤️ in React JS

3d-pathfinding-visualizer's People

Contributors

zmaqutu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.