jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Jay
2026-03-21 15:05:08 +00:00
parent 2100334f1f
commit 13c8b0a28e
26 changed files with 3176 additions and 2631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
tutorials/tsp/index.html
View File

@@ -1,79 +1,116 @@
<!DOCTYPE html>
<!doctype html>
<html>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"
integrity="sha512-b/htz6gIyFi3dwSoZ0Uv3cuv3Ony7EeKkacgrcVg8CMzu90n777qveu0PBcbZUA7TzyENGtU+qZRuFAkfqgyoQ=="
crossorigin="anonymous"></script>
crossorigin="anonymous"
></script>
<title>Travelling Sales Person</title>
<h1>Travelling Sales Person Problem</h1>
<button id="backButton" onclick="window.location.href='/#tutorials'">Back</button>
<title>Travelling Sales Person</title>
<h1>Travelling Sales Person Problem</h1>
<button id="backButton" onclick="window.location.href = '/#tutorials'">
Back
</button>
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<div class="pictureContainer">
<img src="https://optimization.mccormick.northwestern.edu/images/e/ea/48StatesTSP.png" alt="TSP Problem"
id="Conway">
<img
src="https://optimization.mccormick.northwestern.edu/images/e/ea/48StatesTSP.png"
alt="TSP Problem"
id="Conway"
/>
</div>
<p>The travelling salesman problem (TSP) asks the following question: "Given a list of cities and the distances
between each pair of cities, what is the shortest possible route that visits each city and returns to the origin
city?" </p>
<p>The problem was first formulated in 1930 and is one of the most intensively studied problems in optimization. It
is used as a benchmark for many optimization methods. Even though the problem is computationally difficult, a
large number of heuristics and exact algorithms are known, so that some instances with tens of thousands of
cities can be solved completely and even problems with millions of cities can be approximated within a small
fraction of 1%.</p>
<p>The TSP has several applications even in its purest formulation, such as planning, logistics, and the manufacture
of microchips. Slightly modified, it appears as a sub-problem in many areas, such as DNA sequencing. In these
applications, the concept city represents, for example, customers, soldering points, or DNA fragments, and the
concept distance represents travelling times or cost, or a similarity measure between DNA fragments. The TSP
also appears in astronomy, as astronomers observing many sources will want to minimize the time spent moving the
telescope between the sources. In many applications, additional constraints such as limited resources or time
windows may be imposed.</p>
<p>
The travelling salesman problem (TSP) asks the following question: "Given
a list of cities and the distances between each pair of cities, what is
the shortest possible route that visits each city and returns to the
origin city?"
</p>
<p>
The problem was first formulated in 1930 and is one of the most
intensively studied problems in optimization. It is used as a benchmark
for many optimization methods. Even though the problem is computationally
difficult, a large number of heuristics and exact algorithms are known, so
that some instances with tens of thousands of cities can be solved
completely and even problems with millions of cities can be approximated
within a small fraction of 1%.
</p>
<p>
The TSP has several applications even in its purest formulation, such as
planning, logistics, and the manufacture of microchips. Slightly modified,
it appears as a sub-problem in many areas, such as DNA sequencing. In
these applications, the concept city represents, for example, customers,
soldering points, or DNA fragments, and the concept distance represents
travelling times or cost, or a similarity measure between DNA fragments.
The TSP also appears in astronomy, as astronomers observing many sources
will want to minimize the time spent moving the telescope between the
sources. In many applications, additional constraints such as limited
resources or time windows may be imposed.
</p>
<h2>These are some of the algorithms I used</h2>
<p>Note the purple route is the best route it's found so far and the thin white lines are the routes it's trying
real time.</p>
</head>
<p>
Note the purple route is the best route it's found so far and the thin
white lines are the routes it's trying real time.
</p>
</head>
<body>
<body>
<div class="canvasBody">
<h3>Random Sort</h3>
<span id="c1"></span>
<p class="canvasText">This canvas sorts through random possiblities. Every frame the program chooses two random
points (cities) and swaps them around. eg say the order was London, Paris, Madrid, the program would swap
London and Paris so that the new order is: Paris, London, Madrid. The program then compares the distance
against the record distance to decide whether the new order is better than the old order. This search method
is the most inefficient way, the worst case scenario is never ending, as the point swaping is random the
program may never reach the optimum route</p><br>
<h3>Lexicographic Order</h3>
<span id="c2"></span>
<p class="canvasText">This canvas sorts through all possible orders sequentially, so after n! (where n is the
number of points) this algorithm is guaranteed to have found the quickest possible route. However it is
highly inefficient always taking n! frames to complete and as n increases, time taken increases
exponentially.</p>
<a target="_blank"
href="https://www.quora.com/How-would-you-explain-an-algorithm-that-generates-permutations-using-lexicographic-ordering">Click
here to learn more about the algorithm</a><br>
<h3>Genetic Algorithm</h3>
<span id="c3"></span>
<p class="canvasText">This canvas is the most efficient at finding the quickest route, it is a mixture of the
two methods above. It starts off by creating a population of orders, a fitness is then generated for each
order in the population. This fitness decides how likely the order is to be picked and is based on the
distance it takes (lower distance is better). When two orders are picked, the algorithm splices the two
together at a random term, it's then mutated and compared against the record distance. This takes the least
amount of time to find the shortest distance as the algorithm doesn't search through permuations that are
obviously longer due to the order.</p><br>
<h3>Random Sort</h3>
<span id="c1"></span>
<p class="canvasText">
This canvas sorts through random possiblities. Every frame the program
chooses two random points (cities) and swaps them around. eg say the
order was London, Paris, Madrid, the program would swap London and Paris
so that the new order is: Paris, London, Madrid. The program then
compares the distance against the record distance to decide whether the
new order is better than the old order. This search method is the most
inefficient way, the worst case scenario is never ending, as the point
swaping is random the program may never reach the optimum route
</p>
<br />
<h3>Lexicographic Order</h3>
<span id="c2"></span>
<p class="canvasText">
This canvas sorts through all possible orders sequentially, so after n!
(where n is the number of points) this algorithm is guaranteed to have
found the quickest possible route. However it is highly inefficient
always taking n! frames to complete and as n increases, time taken
increases exponentially.
</p>
<a
target="_blank"
href="https://www.quora.com/How-would-you-explain-an-algorithm-that-generates-permutations-using-lexicographic-ordering"
>Click here to learn more about the algorithm</a
><br />
<h3>Genetic Algorithm</h3>
<span id="c3"></span>
<p class="canvasText">
This canvas is the most efficient at finding the quickest route, it is a
mixture of the two methods above. It starts off by creating a population
of orders, a fitness is then generated for each order in the population.
This fitness decides how likely the order is to be picked and is based
on the distance it takes (lower distance is better). When two orders are
picked, the algorithm splices the two together at a random term, it's
then mutated and compared against the record distance. This takes the
least amount of time to find the shortest distance as the algorithm
doesn't search through permuations that are obviously longer due to the
order.
</p>
<br />
</div>
</body>
</body>
<script src="sketch.js"></script>
<footer>
<p>This page was inspired by The Coding Train</p><a
href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw">Check him out here</a>
</footer>
<script src="sketch.js"></script>
<footer>
<p>This page was inspired by The Coding Train</p>
<a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw"
>Check him out here</a
>
</footer>
</html>

184
tutorials/tsp/style.css
View File

@@ -1,15 +1,18 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
a{font-family: 'Roboto Condensed', sans-serif; font-size: 18pt;}
a {
font-family: "Roboto Condensed", sans-serif;
font-size: 18pt;
}
h1 {
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
margin: 0;
padding: 0 0 15px 0;
}
h2 {
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
margin: 0;
padding: 0 0 15px 0;
text-align: center;
@@ -17,89 +20,150 @@ h2 {
}
@media (min-width: 350px) {
h1 {font-size: 3.25em;}
img{height: 40px;}
p{font-size: 10px;}
h2{font-size: 17px;}
h1 {
font-size: 3.25em;
}
img {
height: 40px;
}
p {
font-size: 10px;
}
h2 {
font-size: 17px;
}
}
@media (min-width: 400px) {
h1 {font-size: 3.25em;}
img{height: 45px;}
p{font-size: 15px;}
h2{font-size: 17px;}
h1 {
font-size: 3.25em;
}
img {
height: 45px;
}
p {
font-size: 15px;
}
h2 {
font-size: 17px;
}
}
@media (min-width: 440px) {
h1 {font-size: 3.5em;}
img {height: 100px;}
p{font-size: 16px;}
h2{font-size: 18px;}
h1 {
font-size: 3.5em;
}
img {
height: 100px;
}
p {
font-size: 16px;
}
h2 {
font-size: 18px;
}
}
@media (min-width: 500px) {
h1 {font-size: 3.75em;}
img{height: 125px;}
p{font-size: 16px;}
h2{font-size: 19px;}
h1 {
font-size: 3.75em;
}
img {
height: 125px;
}
p {
font-size: 16px;
}
h2 {
font-size: 19px;
}
}
@media (min-width: 630px) {
h1 {font-size: 5em;}
img{height: 150px;}
p{font-size: 20px;}
h2{font-size: 24px;}
h1 {
font-size: 5em;
}
img {
height: 150px;
}
p {
font-size: 20px;
}
h2 {
font-size: 24px;
}
}
@media (min-width: 768px) {
h1 {
h1 {
font-size: 5em;
padding-bottom: 30px;
}
img{height: 175px;}
p{font-size: 22px;}
h2{font-size: 26px;}
img {
height: 175px;
}
p {
font-size: 22px;
}
h2 {
font-size: 26px;
}
}
@media (min-width: 1200px) {
h1 {font-size: 8em;}
img{height: 250px;}
p{font-size: 24px;}
h2{font-size: 28px;}
h1 {
font-size: 8em;
}
img {
height: 250px;
}
p {
font-size: 24px;
}
h2 {
font-size: 28px;
}
}
p{
font-family: 'Roboto Condensed', sans-serif;
p {
font-family: "Roboto Condensed", sans-serif;
}
h3{
h3 {
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
}
footer{
footer {
padding: 20px;
background-color: #e0e0e0;
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
}
@keyframes dimImg{
from {opacity: 1;
filter: alpha(opacity=100);}
to {opacity: 0.4;
filter: alpha(opacity=50);}
@keyframes dimImg {
from {
opacity: 1;
filter: alpha(opacity=100);
}
to {
opacity: 0.4;
filter: alpha(opacity=50);
}
}
@keyframes revealText{
from {opacity: 0.4;
filter: alpha(opacity=50);}
to {opacity: 1;
filter: alpha(opacity=100);}
@keyframes revealText {
from {
opacity: 0.4;
filter: alpha(opacity=50);
}
to {
opacity: 1;
filter: alpha(opacity=100);
}
}
.pictureContainer{
float: right;
.pictureContainer {
float: right;
position: relative;
}
.pictureContainer a{
.pictureContainer a {
opacity: 0;
position: absolute;
text-align: center;
@@ -107,36 +171,36 @@ footer{
left: 5px;
}
.pictureContainer:hover img{
.pictureContainer:hover img {
animation-name: dimImg;
animation-duration: 1s;
opacity: 0.4;
filter: alpha(opacity=50);
}
.pictureContainer:hover a{
.pictureContainer:hover a {
animation-name: revealText;
animation-duration: 1s;
opacity: 1;
}
.canvasText{
.canvasText {
margin: 0px;
display: inline-block;
text-align: left;
}
#c1, #c2, #c3{
#c1,
#c2,
#c3 {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.button{
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
@@ -156,5 +220,3 @@ footer{
background-color: #555555;
color: white;
}