Skip to content

Commit f86b854

Browse files
arpit-omprakasharpit-omprakash
committed
Added navbar and footer to site
1 parent 99e2c78 commit f86b854

File tree

4 files changed

+210
-86
lines changed

4 files changed

+210
-86
lines changed

Diff for: ‎docs/bubble_sort.html

+116-85
Original file line numberDiff line numberDiff line change
@@ -7,111 +7,142 @@
77
</head>
88

99
<body>
10+
<!-- Bootstrap navbar -->
11+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
12+
<a class="navbar-brand" href="https://github.com/aceking007/Sort_Visualizer">Fork Me!</a>
13+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
14+
<span class="navbar-toggler-icon"></span>
15+
</button>
16+
<div class="collapse navbar-collapse" id="navbarNav">
17+
<ul class="navbar-nav">
18+
<li class="nav-item">
19+
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
20+
</li>
21+
<li class="nav-item">
22+
<a class="nav-link" href="https://aceking007.github.io/">Blog <span class="sr-only">(current)</span></a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link" href="https://aceking007.github.io/projects/">Projects</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link" href="https://github.com/aceking007">GitHub</a>
29+
</li>
30+
</ul>
31+
</div>
32+
</nav>
33+
1034
<h1>Bubble Sort</h1>
1135

1236
<script type="application/processing">
13-
//array of numbers to sort
14-
float[] numbers;
15-
//bin size
16-
int n;
17-
//index of current traversal
18-
int a;
19-
//end index of current traversal
20-
int b;
21-
//number of comparisions
22-
int comparision = 0;
23-
//numeber of swaps
24-
int swp = 0;
37+
//array of numbers to sort
38+
float[] numbers;
39+
//bin size
40+
int n;
41+
//index of current traversal
42+
int a;
43+
//end index of current traversal
44+
int b;
45+
//number of comparisions
46+
int comparision = 0;
47+
//numeber of swaps
48+
int swp = 0;
2549

26-
void setup(){
27-
size(1350, 300);
28-
background(0);
29-
n = 10;
30-
numbers = new float[width/n];
31-
for(int i = 0; i < numbers.length; i++){
32-
numbers[i] = random(0, height); //randomly generate numbers
33-
//numbers[i] = height - 3*i; //reverse sorted array
34-
//numbers[i] = 3*i; //sorted array
35-
}
36-
a = 0;
37-
b = numbers.length - 1;
50+
void setup(){
51+
size(1350, 300);
52+
background(0);
53+
n = 10;
54+
numbers = new float[width/n];
55+
for(int i = 0; i < numbers.length; i++){
56+
numbers[i] = random(0, height); //randomly generate numbers
57+
//numbers[i] = height - 3*i; //reverse sorted array
58+
//numbers[i] = 3*i; //sorted array
3859
}
60+
a = 0;
61+
b = numbers.length - 1;
62+
}
3963

40-
void draw(){
41-
//prevents traversal of sorted array elements
42-
if (a >= b){
43-
a = 0;
44-
b -= 1;
45-
//render final array after sorting
46-
display(numbers.length + 1);
47-
} else {
48-
//render each step
49-
display(a);
50-
//if current > next, swap (bubble sort logic)
51-
if(numbers[a] > numbers[a+1]){
52-
//increment swaps
53-
swp++;
54-
swap(a, a+1);
55-
}
56-
//increment current
57-
a += 1;
58-
//increment comparision
59-
comparision += 1;
64+
void draw(){
65+
//prevents traversal of sorted array elements
66+
if (a >= b){
67+
a = 0;
68+
b -= 1;
69+
//render final array after sorting
70+
display(numbers.length + 1);
71+
} else {
72+
//render each step
73+
display(a);
74+
//if current > next, swap (bubble sort logic)
75+
if(numbers[a] > numbers[a+1]){
76+
//increment swaps
77+
swp++;
78+
swap(a, a+1);
6079
}
80+
//increment current
81+
a += 1;
82+
//increment comparision
83+
comparision += 1;
6184
}
85+
}
6286

63-
//function to swap elements
64-
void swap(int left, int right){
65-
float lVal = numbers[left];
66-
numbers[left] = numbers[right];
67-
numbers[right] = lVal;
68-
}
87+
//function to swap elements
88+
void swap(int left, int right){
89+
float lVal = numbers[left];
90+
numbers[left] = numbers[right];
91+
numbers[right] = lVal;
92+
}
6993

70-
//function to draw the array
71-
//ellipse and bar visualizations
72-
void render(int coloured){
73-
int x = 0;
74-
int sz;
75-
for(int i = 0; i < numbers.length; i++){
76-
float num = numbers[i];
77-
if (i == coloured){
78-
fill(255, 204, 0);
79-
sz = 10;
80-
} else {
81-
fill(255);
82-
sz = 5;
83-
}
84-
rect(x, height - num, n, num);
85-
//pushMatrix();
86-
//translate(n/2, 0);
87-
//ellipse(x, height - num, sz, sz);
88-
//popMatrix();
89-
x += n;
94+
//function to draw the array
95+
//ellipse and bar visualizations
96+
void render(int coloured){
97+
int x = 0;
98+
int sz;
99+
for(int i = 0; i < numbers.length; i++){
100+
float num = numbers[i];
101+
if (i == coloured){
102+
fill(255, 204, 0);
103+
sz = 10;
104+
} else {
105+
fill(255);
106+
sz = 5;
90107
}
108+
rect(x, height - num, n, num);
109+
//pushMatrix();
110+
//translate(n/2, 0);
111+
//ellipse(x, height - num, sz, sz);
112+
//popMatrix();
113+
x += n;
91114
}
115+
}
92116

93-
//function to display the sorting
94-
void display(int coloured){
95-
background(0);
96-
//print stats
97-
text("Array size:", 10, 10);
98-
text(width/n, 100, 10);
99-
text("Comparisions:", 10, 20);
100-
text(comparision, 100, 20);
101-
text("Swaps:", 10, 30);
102-
text(swp, 100, 30);
103-
text("% sorted:", 10, 40);
104-
text(((float) (numbers.length - max(b, 0))/numbers.length) * 100, 100, 40);
105-
//draw the array with current item highlighted
106-
render(coloured);
107-
}
117+
//function to display the sorting
118+
void display(int coloured){
119+
background(0);
120+
//print stats
121+
text("Array size:", 10, 10);
122+
text(width/n, 100, 10);
123+
text("Comparisions:", 10, 20);
124+
text(comparision, 100, 20);
125+
text("Swaps:", 10, 30);
126+
text(swp, 100, 30);
127+
text("% sorted:", 10, 40);
128+
text(((float) (numbers.length - max(b, 0))/numbers.length) * 100, 100, 40);
129+
//draw the array with current item highlighted
130+
render(coloured);
131+
}
108132
</script>
109133
<canvas tabindex="0" style="image-rendering: -webkit-optimize-constrast !important"></canvas>
110134
<br/>
111135
So, that's what bubble sort is all about. The highest values rise to the end of the list as if a bubble is rising up in water!
112136
<br/>
113137
There are no controls currently, but I'll add them later and also include some designing probably.
114138

139+
<!-- sticky footer for copyright and other information -->
140+
<footer class="footer bg-info py-2 fixed-bottom">
141+
<div class="container">
142+
<span class="text-white">&copy; 2020 Arpit Omprakash</span>
143+
</div>
144+
</footer>
145+
115146
</body>
116147

117148
</html>

Diff for: ‎docs/index.html

+32-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,30 @@
66
</head>
77

88
<body>
9+
<!-- Bootstrap navbar -->
10+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
11+
<a class="navbar-brand" href="https://github.com/aceking007/Sort_Visualizer">Fork Me!</a>
12+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
13+
<span class="navbar-toggler-icon"></span>
14+
</button>
15+
<div class="collapse navbar-collapse" id="navbarNav">
16+
<ul class="navbar-nav">
17+
<li class="nav-item">
18+
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
19+
</li>
20+
<li class="nav-item">
21+
<a class="nav-link" href="https://aceking007.github.io/">Blog<span class="sr-only">(current)</span></a>
22+
</li>
23+
<li class="nav-item">
24+
<a class="nav-link" href="https://aceking007.github.io/projects/">Projects</a>
25+
</li>
26+
<li class="nav-item">
27+
<a class="nav-link" href="https://github.com/aceking007">GitHub</a>
28+
</li>
29+
</ul>
30+
</div>
31+
</nav>
32+
933
<div class="container-fluid">
1034
<h1>Links to the respective visualization sites</h1><br/>
1135
Click on the blue buttons to proceed to the sort visualization.
@@ -61,6 +85,13 @@ <h3>Comparision based sorts</h3>
6185
<h3></h3>
6286
</div>
6387

64-
</body>
88+
<!-- sticky footer for copyright and other information -->
89+
<footer class="footer bg-info py-2">
90+
<div class="container">
91+
<span class="text-white">&copy; 2020 Arpit Omprakash</span>
92+
</div>
93+
</footer>
94+
95+
</body>
6596

6697
</html>

Diff for: ‎docs/insertion_sort.html

+31
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,30 @@
77
</head>
88

99
<body>
10+
<!-- Bootstrap navbar -->
11+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
12+
<a class="navbar-brand" href="https://github.com/aceking007/Sort_Visualizer">Fork Me!</a>
13+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
14+
<span class="navbar-toggler-icon"></span>
15+
</button>
16+
<div class="collapse navbar-collapse" id="navbarNav">
17+
<ul class="navbar-nav">
18+
<li class="nav-item">
19+
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
20+
</li>
21+
<li class="nav-item">
22+
<a class="nav-link" href="https://aceking007.github.io/">Blog <span class="sr-only">(current)</span></a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link" href="https://aceking007.github.io/projects/">Projects</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link" href="https://github.com/aceking007">GitHub</a>
29+
</li>
30+
</ul>
31+
</div>
32+
</nav>
33+
1034
<h1>Insertion Sort</h1>
1135

1236
<script type="application/processing">
@@ -124,6 +148,13 @@ <h1>Insertion Sort</h1>
124148
<br/>
125149
There are no controls currently, but I'll add them later and also include some designing probably.
126150

151+
<!-- sticky footer for copyright and other information -->
152+
<footer class="footer bg-info py-2 fixed-bottom">
153+
<div class="container">
154+
<span class="text-white">&copy; 2020 Arpit Omprakash</span>
155+
</div>
156+
</footer>
157+
127158
</body>
128159

129160
</html>

Diff for: ‎docs/selection_sort.html

+31
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,30 @@
77
</head>
88

99
<body>
10+
<!-- Bootstrap navbar -->
11+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
12+
<a class="navbar-brand" href="https://github.com/aceking007/Sort_Visualizer">Fork Me!</a>
13+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
14+
<span class="navbar-toggler-icon"></span>
15+
</button>
16+
<div class="collapse navbar-collapse" id="navbarNav">
17+
<ul class="navbar-nav">
18+
<li class="nav-item">
19+
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
20+
</li>
21+
<li class="nav-item">
22+
<a class="nav-link" href="https://aceking007.github.io/">Blog <span class="sr-only">(current)</span></a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link" href="https://aceking007.github.io/projects/">Projects</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link" href="https://github.com/aceking007">GitHub</a>
29+
</li>
30+
</ul>
31+
</div>
32+
</nav>
33+
1034
<h1>Selection Sort</h1>
1135

1236
<script type="application/processing">
@@ -126,6 +150,13 @@ <h1>Selection Sort</h1>
126150
<br/>
127151
There are no controls currently, but I'll add them later and also include some designing probably.
128152

153+
<!-- sticky footer for copyright and other information -->
154+
<footer class="footer bg-info py-2 fixed-bottom">
155+
<div class="container">
156+
<span class="text-white">&copy; 2020 Arpit Omprakash</span>
157+
</div>
158+
</footer>
159+
129160
</body>
130161

131162
</html>

0 commit comments

Comments
 (0)