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/README.md b/README.md
index be21db4..8c2ef3a 100644
--- a/README.md
+++ b/README.md
@@ -3,10 +3,14 @@ A javascript web application to visualise all the algorithms you encounter every
Made with p5.js
+## 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
```
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..7a57035
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,60 @@
+body {
+ padding: 30px;
+ margin: 0;
+ text-align: center;
+ font-family: 'Open Sans', serif;
+ color: #868e96;
+}
+
+canvas {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ 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
+}
+
+.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 ea0398e..5e92548 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,74 @@
-
-
+
+
+
- p5.js example
-
+ Algorithm Visualizer | Project
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/merge-sort.js b/js/merge-sort.js
new file mode 100644
index 0000000..2c72090
--- /dev/null
+++ b/js/merge-sort.js
@@ -0,0 +1,32 @@
+var unsortedArr = [340, 1, 3, 3, 76, 23, 4, 12, 122, 7642, 646];
+
+function merge(leftArr, rightArr) {
+ var sortedArr = [];
+ while (leftArr.length && rightArr.length) {
+ if (leftArr[0] <= rightArr[0]) {
+ sortedArr.push(leftArr[0]);
+ leftArr = leftArr.slice(1)
+ } else {
+ sortedArr.push(rightArr[0]);
+ rightArr = rightArr.slice(1)
+ }
+ }
+ while (leftArr.length)
+ sortedArr.push(leftArr.shift());
+ while (rightArr.length)
+ sortedArr.push(rightArr.shift());
+ return sortedArr;
+}
+
+function mergesort(arr) {
+ if (arr.length < 2) {
+ return arr;
+ } else {
+ var midpoint = parseInt(arr.length / 2);
+ var leftArr = arr.slice(0, midpoint);
+ var rightArr = arr.slice(midpoint, arr.length);
+ return merge(mergesort(leftArr), mergesort(rightArr));
+ }
+}
+console.log('sorted array=')
+console.log(mergesort(unsortedArr));
\ No newline at end of file
diff --git a/main.js b/main.js
index 34cae99..0220d65 100644
--- a/main.js
+++ b/main.js
@@ -1,17 +1,212 @@
-function setup()
-{
- createCanvas(windowWidth,windowHeight);
-}
-
-function draw()
-{
- clear();
- background(200,0,100);
- fill(0,255,255);
- noStroke();
- ellipse(mouseX,mouseY,50,50);
-}
-function windowResized()
-{
- resizeCanvas(windowWidth, windowHeight);
+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
+//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
+//selectionSort, mergeSort, bubbleSort: selecting the sorting buttons from html and storing inside them
+let pageNo, algoType, algoNo, sorted, iterator;
+let graphWidth, graphHeight, barWidth, max, graphPadLeft, graphPadTop;
+let sortBtn, searchBtn, treeBtn, firstPageBtns, backBtn;
+var heading, subheading, firstPageFooter;
+var sortPageBtns;
+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; //** */
+ 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("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');
+ 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
+
+ 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(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() {
+ appWidth = (windowWidth < 1280) ? 1280 : windowWidth;
+ appHeight = (windowHeight < 720) ? 720 : windowHeight;
+ 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 = 2;
+ algoNo = 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;
+ algoNo = 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 = 2;
+ algoNo = 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 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