From a7068251841e8603b33a91048c39eff878ffc88c Mon Sep 17 00:00:00 2001 From: Rajdeep Karmakar Date: Fri, 29 Nov 2019 23:00:39 +0530 Subject: [PATCH 01/16] Update README.md Added web app link --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index be21db4..852d191 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,11 @@ A javascript web application to visualise all the algorithms you encounter every Made with p5.js +## View web app at +``` +https://rajduino.github.io/Visualiser-Project/index.html +``` + ## Getting Started Download the ZIP file or Clone this repository from you Command Prompt or Terminal From dda939192922d619e8edfa67beb51e3947847e52 Mon Sep 17 00:00:00 2001 From: Rajdeep Karmakar Date: Fri, 29 Nov 2019 23:27:04 +0530 Subject: [PATCH 02/16] Hyperlinked link to webapp --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 852d191..6ad682d 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,8 @@ A javascript web application to visualise all the algorithms you encounter every Made with p5.js ## View web app at -``` + https://rajduino.github.io/Visualiser-Project/index.html -``` ## Getting Started From 063b72de2c64c8f5fa2867f7e93b35914c7860a4 Mon Sep 17 00:00:00 2001 From: Rajdeep Karmakar Date: Fri, 29 Nov 2019 23:28:25 +0530 Subject: [PATCH 03/16] Rectified link! --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6ad682d..bebe129 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Made with p5.js ## View web app at -https://rajduino.github.io/Visualiser-Project/index.html +https://rajduino.github.io/Algorithm-Visualiser/index.html ## Getting Started From 67e2b69e72409ad598758e9b4384c871bc9ff7c1 Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Sat, 30 Nov 2019 18:56:55 +0530 Subject: [PATCH 04/16] Updated clone link for repository --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bebe129..8c2ef3a 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,14 @@ A javascript web application to visualise all the algorithms you encounter every Made with p5.js -## View web app at +## View the App build at https://rajduino.github.io/Algorithm-Visualiser/index.html ## Getting Started -Download the ZIP file or Clone this repository from you Command Prompt or Terminal +Download the ZIP file or Clone this repository from your Command Prompt or Terminal. ``` -$git clone https://github.com/Rajduino/Visualiser-Project +$git clone https://github.com/Rajduino/Algorithm-Visualiser.git ``` From a2e726d535df99922a6506c7d1535068c7a0b2c7 Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Sun, 1 Dec 2019 20:10:08 +0530 Subject: [PATCH 05/16] Added gitignore file and minor changes to index file --- .gitignore | 1 + index.html | 24 +++++++++++++++++------- 2 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..27f746c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +demo.html \ No newline at end of file diff --git a/index.html b/index.html index ea0398e..fe1b2fd 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,24 @@ - + + - p5.js example - + Algorithm Visualizer | Project + - - - - + + + +

Algorithm Visualizer

+

This is a paragraph to describe my project

+ + + \ No newline at end of file From 9453b6be9f4e002b4d91faf2f236a2bde37b4047 Mon Sep 17 00:00:00 2001 From: rajduino Date: Mon, 2 Dec 2019 15:39:14 +0530 Subject: [PATCH 06/16] Added the functionality of dynamic app window resizing --- main.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 34cae99..9a4cd40 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,9 @@ +let appWidth,appHeight; //variable to maintain the size of the app function setup() { - createCanvas(windowWidth,windowHeight); + appWidth=(windowWidth<1280)?1280:windowWidth; //minimum width of the app should be 1280 pixels and max should be the windowWidth + appHeight=(windowHeight<720)?720:windowHeight; //minimum height of the app should be 720 pixels and max should be the windowHeight + createCanvas(appWidth,appHeight); } function draw() @@ -13,5 +16,7 @@ function draw() } function windowResized() { - resizeCanvas(windowWidth, windowHeight); + appWidth=(windowWidth<1280)?1280:windowWidth; + appHeight=(windowHeight<720)?720:windowHeight; + resizeCanvas(appWidth, appHeight); } \ No newline at end of file From 5b3e4278aa4cee4bd7227aec9d50555945a694ba Mon Sep 17 00:00:00 2001 From: rajduino Date: Mon, 2 Dec 2019 17:00:22 +0530 Subject: [PATCH 07/16] Set canvas position as absolute --- index.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ea0398e..8699a66 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,18 @@ - p5.js example - + Algorithm Visualiser + From 868b4dd3d30e1d53fa1bc0876bab81709e2d2d0d Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Tue, 3 Dec 2019 01:07:22 +0530 Subject: [PATCH 08/16] Adding slight CSS to index page --- index.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index d4c3e23..67add8d 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -13,6 +13,9 @@ canvas { position: absolute; + left: 0px; + top: 0px; + z-index: -1 } @@ -21,8 +24,8 @@ -

Algorithm Visualizer

-

This is a paragraph to describe my project

+

Algorithm Visualizer

+

Welcome! Watch animations of all Data Structures and Algorithms in Real time

\ No newline at end of file From 9f1d62750625651dc1beb233b14d57c92b493ae6 Mon Sep 17 00:00:00 2001 From: rajduino Date: Tue, 3 Dec 2019 14:17:52 +0530 Subject: [PATCH 09/16] Added required variables for maintaining pages and algorithms to be used and added switch case to maintain pages --- main.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 9a4cd40..bd0785f 100644 --- a/main.js +++ b/main.js @@ -1,18 +1,37 @@ let appWidth,appHeight; //variable to maintain the size of the app +let arr=[]; //array to store the required elements for the required algorithm +//pageNo: variable to store the current page number +//algoType: variable to store the selected algorithm type, Searching=1, sorting=2 +//algoNo: variable to store the selected algorithm within a selected algorithm type +let pageNo, algoType, algoNo; + function setup() { appWidth=(windowWidth<1280)?1280:windowWidth; //minimum width of the app should be 1280 pixels and max should be the windowWidth appHeight=(windowHeight<720)?720:windowHeight; //minimum height of the app should be 720 pixels and max should be the windowHeight createCanvas(appWidth,appHeight); + pageNo=0; + algoType=0; + algoNo=0; } function draw() { clear(); background(200,0,100); - fill(0,255,255); - noStroke(); - ellipse(mouseX,mouseY,50,50); + //switch case to maintain required pages with pageNo value + switch(pageNo) + { + case 0: + + break; + case 1: + + break; + case 2: + + break; + } } function windowResized() { From 66607778df735844b64049e28e52aa43b4088893 Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Tue, 3 Dec 2019 14:35:00 +0530 Subject: [PATCH 10/16] bunch of changes --- index.html | 27 ++++++++++++++++++++++++--- main.js | 38 ++++++++++++++++++++------------------ merge-sort.js | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+), 21 deletions(-) create mode 100644 merge-sort.js diff --git a/index.html b/index.html index 67add8d..d60e932 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,11 @@ Algorithm Visualizer | Project + + @@ -32,14 +32,14 @@

-
diff --git a/main.js b/main.js index 21ccd6e..1749289 100644 --- a/main.js +++ b/main.js @@ -3,7 +3,16 @@ let arr = []; //array to store the required elements for the required algorithm //pageNo: variable to store the current page number //algoType: variable to store the selected algorithm type, Searching=1, sorting=2 //algoNo: variable to store the selected algorithm within a selected algorithm type +//sortBtn: variable to select the sort button on first page when clicked on it +//searchBtn: variable to select the search button on first page when clicked on it +//treeBtn: variable to select the tree button on first page when clicked on it. +//heading: variable that can be used to manipulate the text of the heading in index page +//subHeading: variable that can be used to manipulate the text of the sub-heading in index page +//firstPageBtns: variable to select all buttons on first page(selects entire div) +//backBtn: variable that will link to previous page let pageNo, algoType, algoNo; +let sortBtn, searchBtn, treeBtn, firstPageBtns, backBtn; +var heading, subheading; function setup() { appWidth = (windowWidth < 1280) ? 1280 : windowWidth; //minimum width of the app should be 1280 pixels and max should be the windowWidth @@ -12,10 +21,35 @@ function setup() { pageNo = 0; algoType = 0; algoNo = 0; - var heading = select("#heading"); //Select heading on index page - var subHeading = select("#subheading"); //Select sub-heading part on index page - heading.html("Algorithm Visualizer"); - subHeading.html("Welcome! Watch animations of all Data Structures and Algorithms in Real time"); + firstPageBtns = select('#btns'); //storing all btns in of first page in a variable + backBtn = createButton('Back'); //creating a back button + showLandingPage(); //show first page +} + +function showLandingPage() { + heading = select("#heading"); //Select heading on index page + subHeading = select("#subheading"); //Select sub-heading part on index page + heading.html("Algorithm Visualizer"); //Text of heading on first page + subHeading.html("Welcome! Watch animations of all Data Structures and Algorithms in Real time"); //text of subheading on first page + firstPageBtns.show(); //show all buttons of first page + backBtn.hide(); //Hiding back button on first page + sortBtn = select('#sort'); + sortBtn.mousePressed(showSortingPage); + +} + +function showSortingPage() { + //changing display text of headings + heading.html("Sorting Visualizer"); //Text of heading on first page + subHeading.html("Let's visualize some sorting algorithms!!!"); //text of subheading on first page + + //hiding the buttons of first page + firstPageBtns.hide(); + + //adding a back button + backBtn.show() + backBtn.mousePressed(showLandingPage); + } function draw() { From 1967c9e0a874e0911f095fc6561930054dd3ac28 Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Tue, 3 Dec 2019 16:50:50 +0530 Subject: [PATCH 12/16] pageNo variable updating when different pages called --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 1749289..e391bbb 100644 --- a/main.js +++ b/main.js @@ -42,7 +42,7 @@ function showSortingPage() { //changing display text of headings heading.html("Sorting Visualizer"); //Text of heading on first page subHeading.html("Let's visualize some sorting algorithms!!!"); //text of subheading on first page - + pageNo = 1; //Setting variable value to 1 as user chose Sorting //hiding the buttons of first page firstPageBtns.hide(); From 12043e135563ee4c7514afa0a538d577e39bf4e1 Mon Sep 17 00:00:00 2001 From: rajduino Date: Tue, 3 Dec 2019 17:25:49 +0530 Subject: [PATCH 13/16] Added functions searchingSelected(), sortingSelected(), generateArray(), selectionSort() to be modified later --- main.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/main.js b/main.js index bd0785f..0b5fa7e 100644 --- a/main.js +++ b/main.js @@ -38,4 +38,41 @@ function windowResized() appWidth=(windowWidth<1280)?1280:windowWidth; appHeight=(windowHeight<720)?720:windowHeight; resizeCanvas(appWidth, appHeight); +} +function searchingSelected() +{ + pageNo=1; + algoType=1; +} +function sortingSelected() +{ + pageNo=1; + algoType=2; +} +function generateArray(let n) +{ + arr=[]; + for(let i=0;iarr[j]) + m=j; + } + if(m!=i) + { + let t=arr[m]; + arr[m]=arr[i]; + arr[i]=t; + } + } } \ No newline at end of file From 44287f66e7485d382209377d46b817d5303679ae Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Tue, 3 Dec 2019 18:16:07 +0530 Subject: [PATCH 14/16] idk --- index.html | 1 + main.js | 46 +++++++++++++++------------------------------- 2 files changed, 16 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 2b45b7a..f13c6aa 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@

+ diff --git a/main.js b/main.js index 2da52b7..e391bbb 100644 --- a/main.js +++ b/main.js @@ -52,41 +52,25 @@ function showSortingPage() { } -function windowResized() { - appWidth = (windowWidth < 1280) ? 1280 : windowWidth; - appHeight = (windowHeight < 720) ? 720 : windowHeight; - resizeCanvas(appWidth, appHeight); -} +function draw() { + clear(); + background(200, 0, 100); + //switch case to maintain required pages with pageNo value + switch (pageNo) { + case 0: -function searchingSelected() { - pageNo = 1; - algoType = 1; -} + break; + case 1: -function sortingSelected() { - pageNo = 1; - algoType = 2; -} + break; + case 2: -function generateArray(let n) { - arr = []; - for (let i = 0; i < n; i++) { - append(arr, random(1, 100)); + break; } } -function selectionSort() { - let m; - for (let i = 0; i < arr.length - 1; i++) { - m = i; - for (let j = i + 1; j < arr.length; j++) { - if (arr[m] > arr[j]) - m = j; - } - if (m != i) { - let t = arr[m]; - arr[m] = arr[i]; - arr[i] = t; - } - } +function windowResized() { + appWidth = (windowWidth < 1280) ? 1280 : windowWidth; + appHeight = (windowHeight < 720) ? 720 : windowHeight; + resizeCanvas(appWidth, appHeight); } \ No newline at end of file From 0e3450591b2fd2f7c81599dbd33b5e4725155d7d Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Tue, 3 Dec 2019 20:48:07 +0530 Subject: [PATCH 15/16] implemented sorting page with buttons --- css/style.css | 30 ++++++++++++++++++ index.html | 52 ++++++++++++++++++++---------- main.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 149 insertions(+), 20 deletions(-) diff --git a/css/style.css b/css/style.css index de42807..2f2cd05 100644 --- a/css/style.css +++ b/css/style.css @@ -2,6 +2,8 @@ body { padding: 50px; margin: 0; text-align: center; + font-family: 'Open Sans', serif; + color: #868e96; } canvas { @@ -11,7 +13,35 @@ canvas { z-index: -1 } +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Saira Extra Condensed', serif; + font-weight: 700; + text-transform: uppercase; + color: #343a40; +} + +h1 { + font-size: 4rem; + line-height: 5rem; +} + +h2 { + font-size: 3.5rem; +} + #btns { margin-top: 150px; text-align: center; +} + +.subheading { + text-transform: uppercase; + font-weight: 500; + font-family: 'Saira Extra Condensed', serif; + font-size: 1.35rem; } \ No newline at end of file diff --git a/index.html b/index.html index f13c6aa..42f83e7 100644 --- a/index.html +++ b/index.html @@ -20,32 +20,52 @@
-
- -
-
-

-

-
+ + +
+
+

+

- -
-
-
-
+ +
+
+
+ -
-
+ +
+
+
+ + + +
+
+
+
+ +
+
+
+
diff --git a/main.js b/main.js index e391bbb..b011e86 100644 --- a/main.js +++ b/main.js @@ -10,9 +10,12 @@ let arr = []; //array to store the required elements for the required algorithm //subHeading: variable that can be used to manipulate the text of the sub-heading in index page //firstPageBtns: variable to select all buttons on first page(selects entire div) //backBtn: variable that will link to previous page +//selectionSort, mergeSort, bubbleSort: selecting the sorting buttons from html and storing inside them let pageNo, algoType, algoNo; let sortBtn, searchBtn, treeBtn, firstPageBtns, backBtn; var heading, subheading; +var sortPageBtns; +var selectionSort, mergeSort, bubbleSort; function setup() { appWidth = (windowWidth < 1280) ? 1280 : windowWidth; //minimum width of the app should be 1280 pixels and max should be the windowWidth @@ -22,10 +25,16 @@ function setup() { algoType = 0; algoNo = 0; firstPageBtns = select('#btns'); //storing all btns in of first page in a variable + sortPageBtns = select('#allSortButtons'); //storing the div containing all sort related buttons backBtn = createButton('Back'); //creating a back button + backBtn.addClass('btn'); + backBtn.addClass('btn-danger'); + selectionSort = select('#selectionSort'); + mergeSort = select('#mergeSort'); + bubbleSort = select('#bubbleSort'); showLandingPage(); //show first page } - +/*------------ Landing Page------------------*/ function showLandingPage() { heading = select("#heading"); //Select heading on index page subHeading = select("#subheading"); //Select sub-heading part on index page @@ -33,24 +42,35 @@ function showLandingPage() { subHeading.html("Welcome! Watch animations of all Data Structures and Algorithms in Real time"); //text of subheading on first page firstPageBtns.show(); //show all buttons of first page backBtn.hide(); //Hiding back button on first page + sortPageBtns.hide() //hiding sort page buttons sortBtn = select('#sort'); sortBtn.mousePressed(showSortingPage); - } +/* ------- End of Landing Page ----------*/ +/*--------------------- Sorting Selected Page ----------------*/ function showSortingPage() { + // pageNo = 1; + // algoType = 2; //changing display text of headings heading.html("Sorting Visualizer"); //Text of heading on first page subHeading.html("Let's visualize some sorting algorithms!!!"); //text of subheading on first page pageNo = 1; //Setting variable value to 1 as user chose Sorting - //hiding the buttons of first page - firstPageBtns.hide(); + + firstPageBtns.hide(); //hiding the buttons of first page + sortPageBtns.show(); //showing sort page buttons //adding a back button backBtn.show() backBtn.mousePressed(showLandingPage); + //calling each function when clicked on given algorithm + selectionSort.mousePressed(selectionSortSelected); + mergeSort.mousePressed(mergeSortSelected); + bubbleSort.mousePressed(bubbleSortSelected); + } +/* -------End of Sorting Page --------------*/ function draw() { clear(); @@ -73,4 +93,63 @@ function windowResized() { appWidth = (windowWidth < 1280) ? 1280 : windowWidth; appHeight = (windowHeight < 720) ? 720 : windowHeight; resizeCanvas(appWidth, appHeight); +} + +function selectionSortSelected() { + pageNo = 1; + algoType = 1; + + heading.html("Selection Sort"); //Text of heading on first page + /* Making button look selected */ + selectionSort.addClass("active"); + bubbleSort.removeClass("active"); + mergeSort.removeClass("active"); + /* Making button look selected END*/ + + +} + +function mergeSortSelected() { + pageNo = 1; + algoType = 2; + heading.html("Merge Sort"); //Text of heading on first page + /* Making button look selected */ + selectionSort.removeClass("active"); + bubbleSort.removeClass("active"); + mergeSort.addClass("active"); + /* Making button look selected END*/ +} + +function bubbleSortSelected() { + pageNo = 1; + algoType = 3; + heading.html("Bubble Sort"); //Text of heading on first page + /* Making button look selected */ + selectionSort.removeClass("active"); + bubbleSort.addClass("active"); + mergeSort.removeClass("active"); + /* Making button look selected END*/ +} + +// function generateArray(let n) { +// arr = []; +// for (let i = 0; i < n; i++) { +// append(arr, (int)(100 * random())); +// } +// } + +function selectionSort() { + let m; + for (let i = 0; i < arr.length - 1; i++) { + m = i; + for (let j = i + 1; j < arr.length; j++) { + if (arr[m] > arr[j]) + m = j; + } + if (m != i) { + let t = arr[m]; + arr[m] = arr[i]; + arr[i] = t; + } + } } \ No newline at end of file From d2b9226f9df38e9af6c068a88021b8bee40e1337 Mon Sep 17 00:00:00 2001 From: Anirban Dey Date: Tue, 3 Dec 2019 23:15:02 +0530 Subject: [PATCH 16/16] Integrated the interface with array drawing function --- css/style.css | 17 +++++++- index.html | 6 ++- main.js | 119 +++++++++++++++++++++++++++++++++++++------------- 3 files changed, 107 insertions(+), 35 deletions(-) diff --git a/css/style.css b/css/style.css index 2f2cd05..7a57035 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,5 @@ body { - padding: 50px; + padding: 30px; margin: 0; text-align: center; font-family: 'Open Sans', serif; @@ -43,5 +43,18 @@ h2 { text-transform: uppercase; font-weight: 500; font-family: 'Saira Extra Condensed', serif; - font-size: 1.35rem; + font-size: 1.35rem +} + +.footer { + display: block; + padding: 10px; + text-align: justify; + margin-top: 200px +} + +.footer .text { + font-size: 15px; + font-style: oblique; + text-align: center } \ No newline at end of file diff --git a/index.html b/index.html index 42f83e7..5e92548 100644 --- a/index.html +++ b/index.html @@ -60,12 +60,14 @@

-
+
- +
diff --git a/main.js b/main.js index b011e86..0220d65 100644 --- a/main.js +++ b/main.js @@ -11,36 +11,43 @@ let arr = []; //array to store the required elements for the required algorithm //firstPageBtns: variable to select all buttons on first page(selects entire div) //backBtn: variable that will link to previous page //selectionSort, mergeSort, bubbleSort: selecting the sorting buttons from html and storing inside them -let pageNo, algoType, algoNo; +let pageNo, algoType, algoNo, sorted, iterator; +let graphWidth, graphHeight, barWidth, max, graphPadLeft, graphPadTop; let sortBtn, searchBtn, treeBtn, firstPageBtns, backBtn; -var heading, subheading; +var heading, subheading, firstPageFooter; var sortPageBtns; -var selectionSort, mergeSort, bubbleSort; +var selectionSort, mergeSort, bubbleSort, btnForArrayGeneration; + function setup() { appWidth = (windowWidth < 1280) ? 1280 : windowWidth; //minimum width of the app should be 1280 pixels and max should be the windowWidth appHeight = (windowHeight < 720) ? 720 : windowHeight; //minimum height of the app should be 720 pixels and max should be the windowHeight createCanvas(appWidth, appHeight); pageNo = 0; - algoType = 0; + algoType = 0; //** */ algoNo = 0; firstPageBtns = select('#btns'); //storing all btns in of first page in a variable + firstPageFooter = select('#firstPageFooter'); sortPageBtns = select('#allSortButtons'); //storing the div containing all sort related buttons backBtn = createButton('Back'); //creating a back button backBtn.addClass('btn'); backBtn.addClass('btn-danger'); + backBtn.position(appWidth * 0.02, appHeight * 0.237) selectionSort = select('#selectionSort'); mergeSort = select('#mergeSort'); bubbleSort = select('#bubbleSort'); + btnForArrayGeneration = select('#btnForArrayGeneration'); showLandingPage(); //show first page } /*------------ Landing Page------------------*/ function showLandingPage() { + arr = []; heading = select("#heading"); //Select heading on index page subHeading = select("#subheading"); //Select sub-heading part on index page heading.html("Algorithm Visualizer"); //Text of heading on first page - subHeading.html("Welcome! Watch animations of all Data Structures and Algorithms in Real time"); //text of subheading on first page + subHeading.html("Watch animations of all Data Structures & Algorithms in Real time"); //text of subheading on first page firstPageBtns.show(); //show all buttons of first page + firstPageFooter.show(); //show entire footer on first page backBtn.hide(); //Hiding back button on first page sortPageBtns.hide() //hiding sort page buttons sortBtn = select('#sort'); @@ -58,35 +65,60 @@ function showSortingPage() { pageNo = 1; //Setting variable value to 1 as user chose Sorting firstPageBtns.hide(); //hiding the buttons of first page + firstPageFooter.hide(); //hiding the footer that was on the landing page. sortPageBtns.show(); //showing sort page buttons //adding a back button backBtn.show() backBtn.mousePressed(showLandingPage); + //generating and displaying the random array bars + btnForArrayGeneration.mousePressed(createTheArray); + //calling each function when clicked on given algorithm selectionSort.mousePressed(selectionSortSelected); mergeSort.mousePressed(mergeSortSelected); bubbleSort.mousePressed(bubbleSortSelected); - } /* -------End of Sorting Page --------------*/ +function createTheArray() { + generateArray(10); +} function draw() { + graphWidth = appWidth * 0.6; + graphHeight = appHeight * 0.6; + barWidth = graphWidth / arr.length; + graphPadLeft = appWidth * 0.2; + graphPadTop = appHeight * 0.3; clear(); - background(200, 0, 100); + //background(200, 0, 100); + background(247, 185, 199); + fill(0, 200, 200); //switch case to maintain required pages with pageNo value switch (pageNo) { case 0: break; case 1: - + if (algoType === 1) { + + } else if (algoType === 2) { + if (algoNo === 1) { + if (sorted === false) { + sorted = selectionSortS(iterator); + iterator = iterator + 1; + } + } + } break; case 2: break; } + for (let i = 0; i < arr.length; i++) { + rect(graphPadLeft + i * barWidth, graphPadTop + (max - arr[i]) * graphHeight / max, barWidth, arr[i] * graphHeight / max); + } } function windowResized() { @@ -95,9 +127,29 @@ function windowResized() { resizeCanvas(appWidth, appHeight); } +function mousePressed() { + console.log("called"); + pageNo = 1; + sorted = false; + iterator = 0; + //selectionSort(); +} + +function generateArray(n) { + algoNo = 0; + arr = []; + max = 0; + for (let i = 0; i < n; i++) { + append(arr, (int)(100 * random())); + if (max < arr[i]) + max = arr[i]; + } +} + function selectionSortSelected() { pageNo = 1; - algoType = 1; + algoType = 2; + algoNo = 1; heading.html("Selection Sort"); //Text of heading on first page /* Making button look selected */ @@ -106,12 +158,12 @@ function selectionSortSelected() { mergeSort.removeClass("active"); /* Making button look selected END*/ - } function mergeSortSelected() { pageNo = 1; algoType = 2; + algoNo = 2; heading.html("Merge Sort"); //Text of heading on first page /* Making button look selected */ selectionSort.removeClass("active"); @@ -122,7 +174,8 @@ function mergeSortSelected() { function bubbleSortSelected() { pageNo = 1; - algoType = 3; + algoType = 2; + algoNo = 3; heading.html("Bubble Sort"); //Text of heading on first page /* Making button look selected */ selectionSort.removeClass("active"); @@ -131,25 +184,29 @@ function bubbleSortSelected() { /* Making button look selected END*/ } -// function generateArray(let n) { -// arr = []; -// for (let i = 0; i < n; i++) { -// append(arr, (int)(100 * random())); -// } -// } - -function selectionSort() { - let m; - for (let i = 0; i < arr.length - 1; i++) { - m = i; - for (let j = i + 1; j < arr.length; j++) { - if (arr[m] > arr[j]) - m = j; - } - if (m != i) { - let t = arr[m]; - arr[m] = arr[i]; - arr[i] = t; - } +function selectionSortS(d) { + let y, m, t, n; + myDelay(500); + n = arr.length; + if (d >= n) + return true; + m = d; + for (y = d + 1; y < n; y++) { + if (arr[m] > arr[y]) + m = y; + } + if (m != d) { + t = arr[m]; + arr[m] = arr[d]; + arr[d] = t; } + if (d < (n - 1)) + return false; + else + return true; +} + +function myDelay(deltaT) { + let startT = millis(); + while (millis() < startT + deltaT); } \ No newline at end of file