Skip to content

Commit 605602c

Browse files
BKProgramsBKPrograms
committed
Added visual grid to PathFinding.js and created Node class
1 parent 035e6a4 commit 605602c

File tree

6 files changed

+246
-15
lines changed

6 files changed

+246
-15
lines changed

‎src/components/Node.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.node {
2+
width: 25px;
3+
height: 25px;
4+
outline: 1px solid black;
5+
display: inline-block;
6+
}
7+
8+
/*.node-finish {*/
9+
/* background-color: red;*/
10+
/*}*/
11+
12+
/*.node-start {*/
13+
/* background-color: green;*/
14+
/*}*/
15+
16+
/*.node-visited {*/
17+
/* animation-name: visitedAnimation;*/
18+
/* animation-duration: 1.5s;*/
19+
/* animation-timing-function: ease-out;*/
20+
/* animation-delay: 0s;*/
21+
/* animation-direction: alternate;*/
22+
/* animation-iteration-count: 1;*/
23+
/* animation-fill-mode: forwards;*/
24+
/* animation-play-state: running;*/
25+
/*}*/
26+
27+
/*@keyframes visitedAnimation {*/
28+
/* 0% {*/
29+
/* transform: scale(0.3);*/
30+
/* background-color: rgba(0, 0, 66, 0.75);*/
31+
/* border-radius: 100%;*/
32+
/* }*/
33+
34+
/* 50% {*/
35+
/* background-color: rgba(17, 104, 217, 0.75);*/
36+
/* }*/
37+
38+
/* 75% {*/
39+
/* transform: scale(1.2);*/
40+
/* background-color: rgba(0, 217, 159, 0.75);*/
41+
/* }*/
42+
43+
/* 100% {*/
44+
/* transform: scale(1);*/
45+
/* background-color: rgba(0, 190, 218, 0.75);*/
46+
/* }*/
47+
/*}*/
48+
49+
/*.node-wall {*/
50+
/* background-color: rgb(12, 53, 71);*/
51+
/*}*/
52+
53+
/*.node-shortest-path {*/
54+
/* animation-name: shortestPath;*/
55+
/* animation-duration: 1.5s;*/
56+
/* animation-timing-function: ease-out;*/
57+
/* animation-delay: 0s;*/
58+
/* animation-direction: alternate;*/
59+
/* animation-iteration-count: 1;*/
60+
/* animation-fill-mode: forwards;*/
61+
/* animation-play-state: running;*/
62+
/*}*/
63+
64+
/*@keyframes shortestPath {*/
65+
/* 0% {*/
66+
/* transform: scale(0.6);*/
67+
/* background-color: rgb(255, 254, 106);*/
68+
/* }*/
69+
70+
/* 50% {*/
71+
/* transform: scale(1.2);*/
72+
/* background-color: rgb(255, 254, 106);*/
73+
/* }*/
74+
75+
/* 100% {*/
76+
/* transform: scale(1);*/
77+
/* background-color: rgb(255, 254, 106);*/
78+
/* }*/
79+
/*}*/

‎src/components/Node.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, {Component} from "react";
2+
3+
import './Node.css';
4+
5+
6+
export default class Node extends Component {
7+
8+
constructor(props) {
9+
super(props);
10+
this.state = {};
11+
}
12+
13+
render() {
14+
15+
return <div className="node"></div>
16+
17+
}
18+
19+
20+
}

‎src/components/PathFinding.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.grid {
2+
margin: 100px 170px 0;
3+
4+
}

‎src/components/PathFinding.js‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,52 @@
11
import React from "react";
2-
import "./SortingVisualiser.css";
2+
import "./PathFinding.css";
3+
import Node from "./Node";
34

45
export default class PathFindingVisualiser extends React.Component {
56
constructor(props) {
67
super(props);
78

8-
this.state = {array: [], value: 450};
9+
this.state = {nodes: []};
10+
}
11+
12+
componentDidMount() {
13+
14+
const nodes = [];
15+
16+
for (let row = 0; row < 15; row++) {
17+
18+
const currRow = [];
19+
20+
for (let col = 0; col < 50; col++) {
21+
22+
currRow.push([]);
23+
24+
}
25+
26+
nodes.push(currRow);
27+
28+
}
29+
30+
this.setState({nodes});
31+
32+
933
}
1034

1135
render() {
12-
return (<div>hi</div>);
36+
37+
const nodes2 = this.state.nodes;
38+
39+
return (<div className="grid">
40+
41+
{
42+
nodes2.map((row, rowIndex) => {
43+
return(<div>
44+
{row.map((node, nodeIndex) => <Node></Node>)}
45+
</div>)
46+
})
47+
}
48+
49+
</div>);
1350
}
1451

1552
}

‎src/components/SortingVisualiser.js‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
getQuickSortAnims,
77
getHeapSortAnims,
88
getMinHeapSortAnims,
9-
getInsertSortAnims
9+
getInsertSortAnims, getSelectAnims
1010
} from "../sortingAlgos";
1111

12-
const SPEED = 1/100;
12+
const SPEED = 1 / 2;
1313

1414
export default class SortingVisualiser extends React.Component {
1515

@@ -213,7 +213,7 @@ export default class SortingVisualiser extends React.Component {
213213

214214
const cChange = anim5[i][2];
215215

216-
if (cChange === 0){
216+
if (cChange === 0) {
217217

218218
const [baronei, bartwoi, j] = anim5[i];
219219
const barOneStyle = arrbar[baronei].style;
@@ -234,11 +234,43 @@ export default class SortingVisualiser extends React.Component {
234234
}
235235

236236

237-
238237
}
239238

240239
}
241240

241+
selectionSort() {
242+
const anim6 = getSelectAnims(this.state.array);
243+
244+
const arrbar = document.getElementsByClassName('array-bar');
245+
246+
for (let i = 0; i < anim6.length; i++) {
247+
248+
const cChange = anim6[i][2];
249+
250+
if (cChange === 0) {
251+
252+
const [baronei, bartwoi, j] = anim6[i];
253+
const barOneStyle = arrbar[baronei].style;
254+
const barTwoStyle = arrbar[bartwoi].style;
255+
const color = i % 4 === 0 ? 'red' : 'green';
256+
257+
setTimeout(() => {
258+
barOneStyle.backgroundColor = color;
259+
barTwoStyle.backgroundColor = color;
260+
}, i * SPEED);
261+
262+
} else {
263+
setTimeout(() => {
264+
const [barOneIdx, newHeight, j] = anim6[i];
265+
const barOneStyle = arrbar[barOneIdx].style;
266+
barOneStyle.height = `${newHeight}px`;
267+
}, i * SPEED);
268+
}
269+
270+
271+
}
272+
}
273+
242274
render() {
243275
const arr2 = this.state.array;
244276

@@ -249,7 +281,7 @@ export default class SortingVisualiser extends React.Component {
249281
(<div className="array-bar" key={i} style={{height: `${value}px`}}></div>)
250282
)}
251283
<div>
252-
<button onClick={() => this.resetArray()}>Generate new array</button>
284+
253285
<button onClick={() => this.mergeSort()}>Mergesort</button>
254286
<button onClick={() => this.quickSort()}>Quicksort</button>
255287
<button onClick={() => this.maxheapSort()}>MaxHeapsort</button>
@@ -264,8 +296,9 @@ export default class SortingVisualiser extends React.Component {
264296
(event) => this.setState({value: event.target.value}
265297
)
266298
} step="1"/>
299+
<span id="output">{this.state.value}</span>
267300
</div>
268-
<span id="output">{this.state.value}</span>
301+
<button onClick={() => this.resetArray()}>Generate new array</button>
269302
</div>
270303

271304

‎src/sortingAlgos.js‎

Lines changed: 64 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,6 @@ function maxHeapify(arr, n, i, animations) {
207207
}
208208

209209

210-
211210
}
212211

213212
function minHeapify(arr, n, i, animations) {
@@ -243,7 +242,6 @@ function minHeapify(arr, n, i, animations) {
243242
}
244243

245244

246-
247245
}
248246

249247
export function getHeapSortAnims(array) {
@@ -254,11 +252,11 @@ export function getHeapSortAnims(array) {
254252

255253
let n = c.length;
256254

257-
for (let i = Math.floor(n / 2) - 1; i >= 0; i--){
255+
for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
258256
maxHeapify(c, n, i, anims);
259257
}
260258

261-
for (let j = n - 1; j > 0; j--){
259+
for (let j = n - 1; j > 0; j--) {
262260

263261
swap(c, 0, j); // Move largest to end of list
264262

@@ -281,11 +279,11 @@ export function getMinHeapSortAnims(array) {
281279

282280
let n = c.length;
283281

284-
for (let i = Math.floor(n / 2) - 1; i >= 0; i--){
282+
for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
285283
minHeapify(c, n, i, anims);
286284
}
287285

288-
for (let j = n - 1; j > 0; j--){
286+
for (let j = n - 1; j > 0; j--) {
289287

290288
swap(c, 0, j); // Move largest to end of list
291289

@@ -301,3 +299,63 @@ export function getMinHeapSortAnims(array) {
301299
}
302300

303301

302+
// Insertion sort
303+
304+
export function getInsertSortAnims(array) {
305+
306+
const anims = [];
307+
308+
const c = array.slice();
309+
310+
for (let i = 1; i < c.length; i++) {
311+
312+
let compareMe = c[i];
313+
let j = i - 1;
314+
315+
while (j >= 0 && c[j] > compareMe) {
316+
317+
anims.push([j, i, 0]);
318+
319+
c[j + 1] = c[j];
320+
j = j - 1;
321+
anims.push([j + 1, c[j], 1]);
322+
323+
if (j >= 0) {
324+
anims.push([j, i, 0]);
325+
}
326+
327+
}
328+
329+
330+
c[j + 1] = compareMe;
331+
332+
anims.push([j + 1, compareMe, 1]);
333+
}
334+
return anims;
335+
}
336+
337+
// Selection Sort:
338+
339+
export function getSelectAnims(array) {
340+
341+
const anims = [];
342+
343+
for (let i = 0; i < array.length - 1; i++) {
344+
345+
let min_idx = i;
346+
347+
for (let j = i + 1; j < array.length; j++) {
348+
if (array[j] < array[min_idx]) {
349+
min_idx = j;
350+
}
351+
}
352+
353+
swap(array, min_idx, i);
354+
355+
anims.push([min_idx, array[i], 1]);
356+
anims.push([i, array[min_idx], 1]);
357+
}
358+
359+
return anims;
360+
361+
}

0 commit comments

Comments
 (0)