dangitjason.github.io/path.html at master · DangItJason/dangitjason.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Jason Nguyen</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom fonts for this template -->
    <link
      href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i"
      rel="stylesheet"
    />
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="css/resume.min.css" rel="stylesheet" />
  </head>
  <body id="page-top">
    <nav
      class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top"
      id="sideNav"
    >
      <a class="navbar-brand js-scroll-trigger" href="#page-top">
        <span class="d-block d-lg-none">Jason Nguyen</span>
        <span class="d-none d-lg-block">
          <img
            class="img-fluid img-profile rounded-circle mx-auto mb-2"
            src="img/profile.jpg"
            alt=""
          />
        </span>
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="./index.html">Projects</a>
          </li>
        </ul>
      </div>
    </nav>
  </body>

  <div class="container-fluid p-0">
    <section
      class="resume-section p-3 p-lg-5 d-flex align-items-center"
      id="education"
    >
      <div class="w-100">
        <h2 class="mb-5">A* Search Path Visualization</h2>

        <div
          class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5"
        >
          <div class="resume-content">
            <h3 class="mb-0">Summary</h3>
            <div>
              I implemented the A* path search algorithm in Python and used
              Tkinter to visualize the algorithms decisions.
              <br />
              <br />
              Tools used: Python, Tkinter
            </div>
            <br />
            <br />
            <h3 class="mb-0">An Introduction</h3>

            <div>
              After finishing my algorithms class, I felt that the algorithms I
              learned about had too many shortcomings in pathfinding. Afterall,
              I just wanted to know the fastest way to get from A to B in real
              life scenario. After a quick google search, I learned that A* was
              the top result. Referred to as A-star, it is one of the best
              search algorithms because it uses information about it's paths and
              heuristics during it's path finding process to find the optimal
              solution. <br /><br />
              It's baby AI. Pretty cool if you ask me.
            </div>
            <br />
            <br />
            <h3 class="mb-0">What's next?</h3>
            <div>
              My implementation of this algorithm uses the Manhattan distance
              which is the distance between two points measured along the axes
              at right angles. The next version will include options to select
              different methods of calculating heuristics. There is also no
              option to turn on or off cutting corners as the current algorithm
              does not corners. For example, if you started at point (0, 0) and
              had an obstacle at (0, 1) and (1, 0), it's next move can not
              include (1, 1).
            </div>
            <br />
            <br />
            <h3 class="mb-0">Demo</h3>
            <div
              style="
                width: 100%;
                height: 0;
                padding-bottom: 117%;
                position: relative;
              "
            >
              <iframe
                src="https://giphy.com/embed/lNRyaV3EMEvMnSODXk"
                width="75%"
                height="75%"
                style="position: absolute;"
                frameborder="0"
                class="giphy-embed"
                allowfullscreen
              ></iframe>
            </div>
            <br />
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/resume.min.js"></script>
</html>