modified recursion tree

TamimEhsan · TamimEhsan · commit fbb8f35b95ee · 2022-05-02T19:16:26.000+06:00
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ So far there are 6 segments
 - Recursion Tree
 - Turing Machine
 
-I have implemented a total of `17 algorithms` so far. And will try to add more later.  
+I have implemented a total of `22 algorithms` so far. And will try to add more later.  
 
 ## Algorithms implemented 
 
@@ -39,7 +39,11 @@ I have implemented a total of `17 algorithms` so far. And will try to add more l
 - Graham Scan for Convex Hull
 - Binary Search
 - Recursion
-  - Fibonacci
+  - Fibonacci Number
+  - Binomial Coeficient
+  - Derangement
+  - Fast Exponentiation
+  - Stirling Number of Second Kind
 
 - Turing Machine
   - Bitwise NOT
diff --git a/src/Graph/Tree.js b/src/Graph/Tree.js
@@ -2,9 +2,10 @@
 
 
 export class Tree{
-    constructor(node=0,children=[]) {
+    constructor(node=0,children=[],label="") {
         this.id = 0;
         this.node = node;
+        this.label = label;
         this.width = node.length;
         this.children = children;
     }
diff --git a/src/Graph/canvasSVG.jsx b/src/Graph/canvasSVG.jsx
@@ -22,18 +22,19 @@ class CanvasSvg extends Component {
 
     render() {
         console.log(this.props.vertices.length);
+        let off = this.props.offset;
         return (
             <div>
-                <svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
+                <svg viewBox="0 0 240 200" xmlns="http://www.w3.org/2000/svg">
                     {
                         this.props.edges.map((edge, cellidx) => {
                             return (
                                 <Edge
                                     // key={vertex.id}
-                                    // id={cell.id+50}
+                                    id={cellidx}
 
-                                    pos={ {x1:edge.x1*10+50,y1:edge.y1*10+10,
-                                        x2:edge.x2*10+50,y2:edge.y2*10+10} }
+                                    pos={ {x1:(edge.x1-off)*15+120,y1:edge.y1*15+10,
+                                        x2:(edge.x2-off)*15+120,y2:edge.y2*15+10} }
                                 />
                             );
                         })}
@@ -43,10 +44,12 @@ class CanvasSvg extends Component {
                             return (
                                 <Vertex
                                     // key={vertex.id}
-                                    // id={cell.id+50}
+                                    id={cellidx}
                                     current={this.props.current === cellidx}
-                                    label={vertex.val}
-                                    pos={ {x:vertex.x*10+50,y:vertex.y*10+10} }
+                                    label={vertex.label}
+                                    ret={vertex.val}
+                                    pos={ {x:(vertex.x-off)*15+120,y:vertex.y*15+10,
+                                        px:(vertex.px-off)*15+120,py:vertex.py*15+10} }
                                 />
                             );
                         })}
diff --git a/src/Graph/edge.jsx b/src/Graph/edge.jsx
@@ -1,12 +1,91 @@
 import React, {Component} from 'react';
 
 class Edge extends Component {
+    constructor() {
+        super();
+        this.state={
+            x1:0
+        }
+    }
+    componentDidMount() {
+        this.setState({x1:this.props.pos.x1});
+        document.getElementById('vbanim1'+this.props.id).beginElement();
+        document.getElementById('vbanim2'+this.props.id).beginElement();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.state.x1 !== this.props.pos.x1) {
+            this.setState({x1:this.props.pos.x1});
+            document.getElementById('vbanim1'+this.props.id).beginElement();
+            document.getElementById('vbanim2'+this.props.id).beginElement();
+        }
+    }
+    getPolyPoints = ()=>{
+        let x1 = this.props.pos.x1;
+        let y1 = this.props.pos.y1;
+        let x2 = this.props.pos.x2;
+        let y2 = this.props.pos.y2;
+        let l = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
+        let r = 6.5;
+        let xx1 = ( x1*(l-r)+x2*r )/l;
+        let yy1 = ( y1*(l-r)+y2*r )/l;
+        return xx1+","+yy1+" "+x2+","+y2;
+    }
+    getPolyPointsX = ()=>{
+        let x1 = this.props.pos.x1;
+        let y1 = this.props.pos.y1;
+        let x2 = this.props.pos.x2;
+        let y2 = this.props.pos.y2;
+        let l = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
+        let r = 6.5;
+        let xx1 = ( x2*(l-r)+x1*r )/l;
+        let yy1 = ( y2*(l-r)+y1*r )/l;
+        return xx1;
+        // return xx1+","+yy1+" "+x2+","+y2;
+    }
+    getPolyPointsY = ()=>{
+        let x1 = this.props.pos.x1;
+        let y1 = this.props.pos.y1;
+        let x2 = this.props.pos.x2;
+        let y2 = this.props.pos.y2;
+        let l = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
+        let r = 6.5;
+        let xx1 = ( x2*(l-r)+x1*r )/l;
+        let yy1 = ( y2*(l-r)+y1*r )/l;
+        return yy1;
+        // return xx1+","+yy1+" "+x2+","+y2;
+    }
     render() {
         return (
             <g>
-                <line x1={this.props.pos.x1} y1={this.props.pos.y1} x2={this.props.pos.x2} y2={this.props.pos.y2}
-                      // style={{"stroke:rgb(255,0,0);stroke-width:2"}}/>
-                      style={{stroke:'rgb(255,0,0)', strokeWidth:'0.5'}}/>
+                <defs>
+                    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+                            markerWidth="4" markerHeight="4"
+                            orient="auto-start-reverse">
+                        <path d="M 0 0 L 10 5 L 0 10 z" />
+                    </marker>
+                </defs>
+                <line x2={this.getPolyPointsX()} y2={this.getPolyPointsY()} x1={this.props.pos.x1} y1={this.props.pos.y1}
+                      style={{stroke:'black', strokeWidth:'0.5'}}
+                      marker-end="url(#arrow)"
+                >
+                    <animate
+                        id={'vbanim1'+this.props.id}
+                        attributeName='x2'
+                        values={this.props.pos.x1+';'+this.getPolyPointsX()}
+                        dur='0.5s'
+                        repeatCount="1"
+                    />
+                    <animate
+                        id={'vbanim2'+this.props.id}
+                        attributeName='y2'
+                        values={this.props.pos.y1+';'+this.getPolyPointsY()}
+                        dur='0.5s'
+                        repeatCount="1"
+                    />
+                </line>
+                {/*<polyline points={this.getPolyPoints()} fill="none" stroke="black" strokeWidth={'0.5'}*/}
+                {/*          marker-start="url(#arrow)" />*/}
             </g>
         );
     }
diff --git a/src/Graph/fib.jsx b/src/Graph/fib.jsx
@@ -1,13 +1,19 @@
 import {Tree,buchheim} from './Tree';
-export function getTree(n,algo=0){
+export function getTree(n,algo=0,r=0){
     if(algo === 0)
         return buchheim( fib(n) );
     else if( algo === 1 )
-        return buchheim(sib(n));
+        return buchheim(NcR(n,r));
+    else if( algo === 2 )
+        return buchheim(derangement(n));
+    else if( algo === 3 )
+        return buchheim(bigmod(n,r));
+    else if( algo === 4 )
+        return buchheim(stirling2(n,r));
 }
 
 function fib(n){
-    let tree = new Tree(n,[]);
+    let tree = new Tree(n,[],n+"");
     if( n <2 ) return tree;
     tree.children.push( fib(n-1) );
     tree.children.push( fib(n-2) );
@@ -22,4 +28,61 @@ function sib(n){
     tree.children.push( sib(n-3) );
     tree.node = tree.children[0].node+tree.children[1].node;
     return tree;
+}
+
+function NcR(n,r){
+    if (r > n)
+        return new Tree(-1,[],"("+n+","+r+")");
+
+    if (n === r)
+        return new Tree(1,[],"("+n+","+r+")");
+
+    if (r === 0)
+        return new Tree(1,[],"("+n+","+r+")");;
+
+    // nCr(n, r) = nCr(n - 1, r - 1) + nCr(n - 1, r)
+    let tree = new Tree(0,[],"("+n+","+r+")");
+    tree.children.push( NcR(n-1,r-1) );
+    tree.children.push( NcR(n-1,r) );
+    tree.node = tree.children[0].node+tree.children[1].node;
+    return tree;
+}
+
+function derangement(n){
+    if( n == 0 ) return new Tree(1,[],n+"");
+    if( n == 1 ) return new Tree(0,[],n+"");
+    let tree = new Tree(0,[],n+"");
+    tree.children.push( derangement(n-1) );
+    tree.children.push( derangement(n-2) );
+    tree.node = (n-1)*(tree.children[0].node+tree.children[1].node);
+    return tree;
+}
+
+function bigmod(n,r){
+    if( r === 0 ) return new Tree(1,[],"("+n+","+r+")");
+    if( r === 1 ) return new Tree(n,[],"("+n+","+r+")");
+    let tree = new Tree(1,[],"("+n+","+r+")");
+    if( r%2 === 1 ){
+        tree.children.push( bigmod(n,(r-1)/2 ) );
+        tree.children.push( bigmod(n,(r-1)/2) );
+        tree.children.push( bigmod(n,1) );
+    }else{
+        tree.children.push( bigmod(n,r/2 ) );
+        tree.children.push( bigmod(n,r/2) );
+    }
+    for(let i=0;i<tree.children.length;i++){
+        tree.node *= tree.children[i].node;
+    }
+    return tree;
+}
+
+function stirling2(n,r){
+    if( n === r ) return new Tree(1,[],"("+n+","+r+")");
+    if( r === 0 ) return new Tree(0,[],"("+n+","+r+")");
+
+    let tree = new Tree(0,[],"("+n+","+r+")");
+    tree.children.push( stirling2(n-1,r) );
+    tree.children.push( stirling2(n-1,r-1) );
+    tree.node = tree.children[0].node*r+tree.children[1].node;
+    return tree;
 }
diff --git a/src/Graph/graph.jsx b/src/Graph/graph.jsx
@@ -13,7 +13,9 @@ class Graph extends Component {
             edges:[],
             current:-1,
             n:0,
-            algo:0
+            r:2,
+            algo:0,
+            offset:0
         }
     }
     // setNumber = (event)=>{
@@ -35,10 +37,16 @@ class Graph extends Component {
             this.setState({n: val});
         }
     }
+    setR = (pos, val) => {
+        if (pos === 0) {
+            // console.log("sup 0");
+            this.setState({r: val});
+        }
+    }
     addNumber = ()=>{
         // console.log(getFibTree(3));
-        let tree = getTree(this.state.n,this.state.algo);
-        this.setState({edges:[],vertices:[]});
+        let tree = getTree(this.state.n,this.state.algo,this.state.r);
+        this.setState({edges:[],vertices:[],offset:tree.x});
         this.state.vertices = [];
         // this.setState({});
         this.recur(tree,undefined);
@@ -49,12 +57,16 @@ class Graph extends Component {
         let vertices = this.state.vertices;
         let current = this.state.vertices.length;
 
-        if( node.children.length )
-            vertices.push({val:0,x:node.x,y:node.y});
-        else
-            vertices.push({val:node.tree.node,x:node.x,y:node.y});
-        this.setState({vertices,current});
+
         if( parent!==undefined ){
+            if( node.children.length )
+                vertices.push({label:node.tree.label,val:0,x:node.x,y:node.y,px:parent.x,py:parent.y});
+            else
+                vertices.push({label:node.tree.label,val:node.tree.node,x:node.x,y:node.y,px:parent.x,py:parent.y});
+            this.setState({vertices,current});
+
+
+
             let edges = this.state.edges;
             edges.push({
                 x1:parent.x,
@@ -63,31 +75,42 @@ class Graph extends Component {
                 y2:node.y
             });
             this.setState({edges});
+        }else{
+            if( node.children.length )
+                vertices.push({label:node.tree.label,val:0,x:node.x,y:node.y,px:node.x,py:node.y});
+            else
+                vertices.push({label:node.tree.label,val:node.tree.node,x:node.x,y:node.y,px:node.x,py:node.y});
+            this.setState({vertices,current});
         }
         await sleep(500);
 
 
         for(let i=0;i<node.children.length;i++){
             await this.recur( node.children[i],node );
-            let verticess = [...this.state.vertices];
-            verticess[current].val+=node.children[i].tree.node;
-            this.setState({current,vertices:verticess});
+            // let verticess = [...this.state.vertices];
+            // verticess[current].val+=node.children[i].tree.node;
+            this.setState({current});
             await sleep(500);
         }
+        let verticess = [...this.state.vertices];
+        verticess[current].val=node.tree.node;
+        this.setState({vertices:verticess});
     }
     render() {
         return (
             <div>
                 <Navbar/>
                 <Menu
                     setN={this.setN}
+                    setR={this.setR}
                     setAlgo={this.setAlgo}
                     onStart={this.addNumber}
                 />
                 <CanvasSvg
                     vertices={this.state.vertices}
                     edges={this.state.edges}
                     current={this.state.current}
+                    offset={this.state.offset}
                 />
             </div>
         );
diff --git a/src/Graph/menu.jsx b/src/Graph/menu.jsx
@@ -20,15 +20,21 @@ class Menu extends Component {
                 <SimpleSelect
                     pos={0}
                     label={'Task'}
-                    items={['Fibonacci','Sibonacci']}
+                    items={['Fibonacci','Binomial Coefficient',"Derangement","Bigmod","Stirling2"]}
                     onValueChanged={this.props.setAlgo}
                 />
                 <SimpleSelect
                     pos={0}
                     label={'N'}
-                    items={[1,2,3,4,5,6,7]}
+                    items={[0,1,2,3,4,5,6]}
                     onValueChanged={this.props.setN}
                 />
+                <SimpleSelect
+                    pos={0}
+                    label={'R'}
+                    items={[0,1,2,3,4,5,6]}
+                    onValueChanged={this.props.setR}
+                />
                 <button
                     className='btn btn-warning btn-lg m-2'
                     onClick={this.props.onReset}
diff --git a/src/Graph/vertex.jsx b/src/Graph/vertex.jsx
