Skip to content

Commit 4a235fb

Browse files
TamimEhsanTamimEhsan
committed
added archimedes spiral
1 parent fbb8f35 commit 4a235fb

11 files changed

Lines changed: 280 additions & 41 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,13 @@ I have implemented a total of `22 algorithms` so far. And will try to add more l
3535
- Merge sort
3636
- Quick sort
3737
- Sieve of Eratosthenes
38+
- Archimedes Spiral
3839
- N Queen Backtracking
3940
- Graham Scan for Convex Hull
4041
- Binary Search
4142
- Recursion
4243
- Fibonacci Number
43-
- Binomial Coeficient
44+
- Binomial Coefficient
4445
- Derangement
4546
- Fast Exponentiation
4647
- Stirling Number of Second Kind

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
work correctly both with client-side routing and a non-root public URL.
2626
Learn how to configure a non-root public URL by running `npm run build`.
2727
-->
28-
<title>Pathfinder</title>
28+
<title>Algorithm Visualizer</title>
2929
</head>
3030
<body>
3131
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/Graph/canvasSVG.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class CanvasSvg extends Component {
2525
let off = this.props.offset;
2626
return (
2727
<div>
28-
<svg viewBox="0 0 240 200" xmlns="http://www.w3.org/2000/svg">
28+
<svg viewBox="0 0 240 150" xmlns="http://www.w3.org/2000/svg">
2929
{
3030
this.props.edges.map((edge, cellidx) => {
3131
return (

‎src/Graph/details.jsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React, {Component} from 'react';
2+
3+
class Details extends Component {
4+
5+
Switcherr = () => {
6+
switch (this.props.algo) {
7+
case 0:
8+
return <div className='row bg-info m-0 p-2'>
9+
<div className='col-3 card me-1 bg-light '>
10+
The Fibonacci sequence, in which each number is the sum of the two preceding ones. The sequence
11+
commonly starts from 0 and 1
12+
</div>
13+
<div className='col-3 card me-1 bg-light '>
14+
N = Nth fibonacchi Number
15+
</div>
16+
<div className='col-3 bg-light '>
17+
function = nCr(n,r)
18+
</div>
19+
<div className='col-3 card me-1 bg-light'>
20+
Fib(0) = 0 <br/>
21+
Fib(1) = 1 <br/>
22+
Fib(n) = Fib(n-1) + Fib(n-2)
23+
</div>
24+
</div>;
25+
26+
case 1:
27+
return <div className='row bg-info m-0 p-2 '>
28+
<div className='col-3 card me-1 bg-light'>
29+
In mathematics, the binomial coefficients are the positive integers that occur as coefficients
30+
in the binomial theorem. It is the coefficient of
31+
the x^k term in the polynomial expansion of the binomial power (1+x)^n
32+
</div>
33+
<div className='col-3 card me-1 bg-light'>
34+
nCr = n! / ( k! * (n-k)! )
35+
</div>
36+
<div className='col-3 card me-1 bg-light'>
37+
function = nCr(n,r)
38+
</div>
39+
<div className='col-3 card me-1 bg-light'>
40+
nCr(a,a) = 1 <br/>
41+
nCr(a,0) = 1 <br/>
42+
nCr(n,r) = nCr(n-1,r-1)+nCr(n-1,r)
43+
</div>
44+
</div>;
45+
case 2:
46+
return <div className='row bg-info m-0 p-2 '>
47+
<div className='col-3 card me-1 bg-light '>
48+
In combinatorial mathematics, a derangement is a permutation of the elements of a set, such that
49+
no element appears in its original position.
50+
</div>
51+
<div className='col-3 card me-1 bg-light '>
52+
N = Nth Derangement
53+
</div>
54+
<div className='col-3 card me-1 bg-light '>
55+
function = der(n)
56+
</div>
57+
<div className='col-3 card me-1 bg-light '>
58+
der(0) = 1 <br/>
59+
der(1) = 0 <br/>
60+
der(n) = (n-1) * ( der(n-1) + der(n-2) )
61+
</div>
62+
</div>;
63+
case 3:
64+
return <div className='row bg-info m-0 p-2 '>
65+
<div className='col-3 card me-1 bg-light '>
66+
N = Number
67+
P = Power
68+
</div>
69+
<div className='col-3 card me-1 bg-light '>
70+
function = bigmod(n,p)
71+
</div>
72+
<div className='col-3 card me-1 bg-light '>
73+
bigmod(a,0) = 1 <br/>
74+
bigmod(a,1) = a <br/>
75+
bigmod(n,p) = bigmod(n,p/2)^2; p is even <br/>
76+
bigmod(n,p) = bigmod(n,(p-1)/2)^2 * n ; p is odd
77+
</div>
78+
</div>;
79+
case 4:
80+
return <div className='row bg-info m-0 p-2 '>
81+
<div className='col-3 card me-1 bg-light '>
82+
a Stirling number of the second kind (or Stirling partition number) is the number of ways to
83+
partition a set of n objects into k non-empty subsets
84+
</div>
85+
<div className='col-3 card me-1 bg-light '>
86+
N = Row
87+
R = Column
88+
</div>
89+
<div className='col-3 card me-1 bg-light '>
90+
function = stir2(n,r)
91+
</div>
92+
<div className='col-3 card me-1 bg-light '>
93+
stir2(a,a) = 1 <br/>
94+
stir2(0,a) = 0 <br/>
95+
stir2(n,r) = stir2(n-1,r) * r + stir2(n-1,r-1)
96+
97+
</div>
98+
</div>;
99+
100+
default:
101+
return <b>Henlo</b>;
102+
103+
}
104+
}
105+
106+
render() {
107+
return (
108+
<div>
109+
{this.Switcherr()}
110+
</div>
111+
);
112+
}
113+
}
114+
115+
export default Details;

‎src/Graph/graph.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import CanvasSvg from "./canvasSVG";
33
import {getFibTree, getTree} from "./fib";
44
import Menu from "./menu";
55
import Navbar from "./navbar";
6+
import Details from "./details";
67

78
class Graph extends Component {
89
constructor() {
@@ -106,6 +107,9 @@ class Graph extends Component {
106107
setAlgo={this.setAlgo}
107108
onStart={this.addNumber}
108109
/>
110+
<Details
111+
algo={this.state.algo}
112+
/>
109113
<CanvasSvg
110114
vertices={this.state.vertices}
111115
edges={this.state.edges}

‎src/algorithms/prime.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function seive(n){
2+
let vis = new Array(n+5).fill(0);
3+
4+
let primes = [];
5+
for(let p = 2;p<=n;p++){
6+
if( vis[p] === 0 ){
7+
primes.push(p);
8+
for(let q = p*p;q<=n;q+=p)
9+
vis[q] = 1;
10+
}
11+
}
12+
return primes;
13+
}

‎src/homeComponents/cardDetails.js‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ export function getDetails(){
1818
},
1919
{
2020
id:2,
21-
title:"Prime Numbers",
22-
description:"Visualize how Seive is better than brute force",
23-
route:"/prime",
24-
img:primes
21+
title:"Recursion Tree",
22+
description:"The process in which a function calls itself directly or indirectly is called recursion. Work in progress",
23+
route:"/graph",
24+
img:Recursion
2525
},
2626
{
2727
id:3,
@@ -31,49 +31,49 @@ export function getDetails(){
3131
img:sort
3232
},
3333
{
34-
id:9,
34+
id:4,
3535
title:"Recursive Sorting",
3636
description:"Compare different recursive sorting algorithms",
3737
route:"/recursivesort",
3838
img:sort
3939
},
4040
{
41-
id:4,
41+
id:5,
4242
title:"N Queen",
4343
description:"The N queens puzzle is the problem of placing N chess queens on an N*N chessboard so that no two queens threaten each other",
4444
route:"/nqueen",
4545
img:queen
4646
},
4747
{
48-
id:5,
48+
id:6,
49+
title:"Turing Machine",
50+
description:"A Turing machine is a mathematical model of computation that defines an abstract machine that manipulates symbols on a strip of tape according to a table of rules",
51+
route:"/turing",
52+
img:turing
53+
},
54+
{
55+
id:7,
56+
title:"Prime Numbers",
57+
description:"Visualize how Seive is better than brute force",
58+
route:"/prime",
59+
img:primes
60+
},
61+
{
62+
id:8,
4963
title:"Convex Hull",
5064
description:"The convex hull of a set of points is the smallest convex polygon that contains all the points of it",
5165
route:"/convexhull",
5266
img:convex
5367
},
5468
{
55-
id:7,
69+
id:9,
5670
title:"Binary Search",
5771
description:"Binary search is an efficient algorithm for finding an item from a sorted list of item",
5872
route:"/binarysearch",
5973
img:binSearch
6074
},
6175
{
62-
id:6,
63-
title:"Turing Machine",
64-
description:"A Turing machine is a mathematical model of computation that defines an abstract machine that manipulates symbols on a strip of tape according to a table of rules",
65-
route:"/turing",
66-
img:turing
67-
},
68-
{
69-
id:8,
70-
title:"Recursion",
71-
description:"Work in progress",
72-
route:"/graph",
73-
img:Recursion
74-
},
75-
{
76-
id:9,
76+
id:10,
7777
title:"15 Puzzle",
7878
description:"The 15 puzzle is a sliding puzzle having 15 square tiles numbered 1–15 in a frame that is 4 tiles high and 4 tiles wide, leaving one unoccupied tile position",
7979
route:"/15puzzle",

‎src/primeComponents/menu.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ class Menu extends Component {
77
return (
88
<nav className="nav alert-dark">
99
<button className="btn btn-primary btn-lg m-2" onClick={this.props.onRefresh} disabled={this.props.isDisabled} style={this.isClickable()}>Refresh</button>
10-
<SimpleSelect/>
10+
<SimpleSelect
11+
pos={0}
12+
onAlgoChanged={this.props.setAlgo}
13+
/>
1114
<DiscreteSlider
1215
onChange={this.props.onChangeSpeed}
1316
title="speed"

‎src/primeComponents/seive.jsx‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@ import Cells from "./cells";
33
import Navbar from "./navbar";
44
import DiscreteSlider from "./slider";
55
import Menu from "./menu";
6+
import {seive} from "../algorithms/prime";
7+
import Spiral from "./spiral";
68

79
class Seive extends Component {
810
state = {
911
number: 100,
1012
cells:[],
1113
isRunning:false,
12-
speed:500
14+
speed:500,
15+
primes:[],
16+
maxPrime:0,
17+
algo:0
1318
}
1419

1520
constructor(props) {
@@ -19,6 +24,13 @@ class Seive extends Component {
1924
const cells = getCells(this.state.number);
2025
this.setState({cells});
2126
}
27+
setAlgo = (pos, val) => {
28+
if (pos === 0) {
29+
30+
this.setState({algo: val});
31+
// console.log(this.state.algo);
32+
}
33+
}
2234

2335
render() {
2436
return (
@@ -27,14 +39,24 @@ class Seive extends Component {
2739
<Menu
2840
onChangeSpeed={this.changeSpeed}
2941
onChangeValues={this.handleValueIncease}
30-
onVisualize = {this.startSeive}
42+
onVisualize = {this.startAlgo}
3143
onRefresh = {this.handleRefresh}
3244
isDisabled = {this.state.isRunning}
45+
setAlgo={this.setAlgo}
3346
/>
34-
<Cells
35-
num={this.state.number}
36-
cells={this.state.cells}
37-
/>
47+
{this.state.algo === 0 &&
48+
<Cells
49+
num={this.state.number}
50+
cells={this.state.cells}
51+
/>
52+
}
53+
{this.state.algo === 1 &&
54+
<Spiral
55+
num={this.state.number}
56+
primes={this.state.primes}
57+
maxPrime={this.state.maxPrime}
58+
/>
59+
}
3860

3961
</div>
4062
);
@@ -46,12 +68,39 @@ class Seive extends Component {
4668
}
4769
handleValueIncease = (value) => {
4870
this.setState({number:value});
49-
this.setState({cells:getCells(value),isRunning:false});
50-
console.log(value);
71+
if( this.state.algo === 0 ){
72+
this.setState({cells:getCells(value),isRunning:false});
73+
74+
}
75+
// console.log(value);
5176
}
5277
handleRefresh = () => {
5378
this.setState({cells:getCells(this.state.number),isRunning:false});
5479
}
80+
81+
startAlgo = () =>{
82+
console.log(this.state.algo);
83+
if( this.state.algo === 0 ){
84+
this.startSeive();
85+
}else if( this.state.algo === 1 ){
86+
this.startSpiral();
87+
}
88+
}
89+
startSpiral = async () =>{
90+
let pprimes = seive(this.state.number*100);
91+
let primes = [];
92+
this.setState({primes:[],maxPrime:pprimes[pprimes.length-1]});
93+
let mod = Math.ceil(this.state.number/10);
94+
for(let i=0;i<pprimes.length;i++){
95+
primes.push(pprimes[i]);
96+
97+
if( i%mod === 0 ){
98+
this.setState({primes});
99+
await sleep(10);
100+
}
101+
}
102+
console.log('done');
103+
}
55104
startSeive = async () => {
56105
const speed = this.state.speed;
57106
this.setState({isRunning:true});

0 commit comments

Comments
 (0)