Git Product home page Git Product logo

crosscut's Introduction

Crosscut

Live Site

Overview

Crosscut is a visualizer for pathfinding algorithms. Users are able to create mazes and move elements around to watch the different algorithms traverse the graph.

demo

Functionality and MVPs

  • Select from different algorithms
  • Draw or generate the maze
  • Move the start or target nodes

Algorithms

  • Dijkstra's Algorithm: guarantees the shortest path
const dijkstras = (graph) => {
    const { nodes } = graph;
    let distance = {};

    for (let node in nodes) {
        distance[node] = Infinity;
    }
    distance[graph.start.id] = 0;

    let unvisited = new Set(Object.keys(nodes)); 
    let searched = new Set();

    while (unvisited.size) {
        let currentId = minDistanceNode(unvisited, distance);
        unvisited.delete(currentId);
        if (nodes[currentId].status === 1) continue;
        searched.add(currentId);
        if (distance[currentId] === Infinity) return animateSearch(graph, searched);
        if (currentId === graph.target.id) {
          return animateSearch(graph, searched);
        }
        for (let neighbor of nodes[currentId].neighbors) {
          if (!searched.has(neighbor.id)) {
            neighbor.previousId = currentId;
            distance[neighbor.id] = distance[currentId] + 1;
          }
        }
    }
};
const minDistanceNode = (unvisited, distance) => {
  return Array.from(unvisited).reduce((minNode, node) =>
    distance[node] < distance[minNode] ? node : minNode
  );
};
  • Breath-first Search: guarantees the shortest path
const breadthFirst = (graph) => {
  let queue = [graph.start];
  let searched = new Set();
  let searching = true;
  while (queue.length) {
    let currentNode = queue.shift();
    if (!searched.has(currentNode.id)) {
      searched.add(currentNode.id);
      currentNode.neighbors.forEach((neighbor, idx) => {
        if (!searched.has(neighbor.id) && neighbor.status === 5) {
          neighbor.previousId = currentNode.id;
          queue.push(neighbor);
          queue.push(graph.target);
          searched.add(graph.target.id);
          searching = false;
        } else if (!searched.has(neighbor.id) && neighbor.status === 0) {
          neighbor.previousId = currentNode.id;
          queue.push(neighbor);
        } else {
        }
      });
    }
    if (!searching) return animateSearch(graph, searched);
  }
  return animateSearch(graph, searched);
};
  • Depth-first Search: does not guarantee the shortest path
const depthFirst = (graph) => {
    let stack = [graph.start];
    let searched = new Set();
    let searching = true;
    while (stack.length) {
        let currentNode = stack.pop();
        if (!searched.has(currentNode.id)) {
            searched.add(currentNode.id);
            currentNode.neighbors.forEach((neighbor, idx) => {
              if (!searched.has(neighbor.id) && neighbor.status === 5) {
                neighbor.previousId = currentNode.id;
                stack.push(neighbor);
                stack.push(graph.target);
                searched.add(graph.target.id);
                searching = false;
              } else if (!searched.has(neighbor.id) && neighbor.status === 0) {
                neighbor.previousId = currentNode.id;
                stack.push(neighbor);
              } else {

              }
            });
        }
        if (!searching) return animateSearch(graph, searched);
    }
    return animateSearch(graph, searched);
};

Technologies, Libraries, APIs

  • Vanila JS for logic/animations, CSS for styling, HTML
  • Webpack to bundle and transpile the source JavaScript code
  • npm to manage project dependencies

crosscut's People

Contributors

7ylerkoh avatar

Watchers

James Cloos 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.