Skip to content

Overhauled Update #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rajduino merged 2 commits into from
Mar 31, 2020
Merged

Overhauled Update #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab9c11f
Merge pull request #10 from Rajduino/gh-pages
Rajduino Dec 3, 2019
674f7bc
Overhauled the project from CSS to complete p5js
Rajduino Mar 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 0 additions & 60 deletions css/style.css
View file
Open in desktop

This file was deleted.

87 changes: 21 additions & 66 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,29 @@
<!DOCTYPE html>
<html lang="en">

<head>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Algorithm Visualizer | Project</title>
<!--Bootstrap CSS Linking-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Adding our custom style sheet from CSS folder-->
<link rel="stylesheet" href="./css/style.css" crossorigin="anonymous">
<style>
/*Write them inside style.css file */
</style>
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="p5.js"></script>
<script src="p5.sound.js"></script>
<script src="main.js"></script>
<script src="./js/merge-sort.js"></script>
</head>

<body>
<div class="container">
</head>
<body>
</body>
</html>

<!-- DIV containing heading and sub heading-->
<div id="" class="row">
<div id="" class="col-md-12">
<h1 align="center" id="heading"></h1>
<h4 align="center" id="subheading"></h4>
</div>
</div>
<!-- DIV containing all buttons-->
<div id="btns" class="row">
<div class="col-md-12">
<div id="myMenuBtns" class="btn-group btn-group-toggle" data-toggle="buttons">
<label id="sort" class="btn btn-secondary btn-lg">
<input type="radio" name="options" autocomplete="off" checked> Sorting
</label>
<label id="search" class="btn btn-secondary btn-lg">
<input type="radio" name="options" autocomplete="off"> Searching
</label>
<label id="tree" class="btn btn-secondary btn-lg">
<input type="radio" name="options" autocomplete="off"> Tree Travarsal
</label>
</div>
</div>
</div>
<!--DIV for all sort page buttons-->
<div id="allSortButtons" class="row">
<div class="col-md-12">
<div id="myMenuBtns" class="btn-group btn-group-toggle" data-toggle="buttons">
<label id="selectionSort" class="btn btn-secondary btn-lg">
<input type="radio" name="options" autocomplete="off" checked> Selection Sort
</label>
<label id="mergeSort" class="btn btn-secondary btn-lg">
<input type="radio" name="options" autocomplete="off"> Merge Sort
</label>
<label id="bubbleSort" class="btn btn-secondary btn-lg">
<input type="radio" name="options" autocomplete="off"> Bubble Sort
</label>
</div>
</div>
<div class="row">
<div id="btnForArrayGeneration" class="col-md-12" offset-md-1 style="padding:5px">
<button type="button" class="btn btn-primary btn-lg">Generate Array</button>
</div>
</div>
</div>
<div id="firstPageFooter" class="footer" style="text-align: center;">
<i class="subheading text">A project by: GROUP 66 | Anirban, Rajdeep, Rudranil, Sayantan, Sanket and Trishit | Team SEAL-6</i>
</div>
</div>
</body>
if (algoType === 1)
{

</html>
}
else if (algoType === 2)
{
if (algoNo === 1)
{
if (sorted === false) {
sorted = selectionSortS(iterator);
iterator = iterator + 1;
}
}
}
147 changes: 110 additions & 37 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,21 @@ function setup() {
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
//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------------------*/
/*
/*------------ Landing Page------------------
function showLandingPage() {
arr = [];
heading = select("#heading"); //Select heading on index page
Expand All @@ -53,9 +54,10 @@ function showLandingPage() {
sortBtn = select('#sort');
sortBtn.mousePressed(showSortingPage);
}
/* ------- End of Landing Page ----------*/

/*--------------------- Sorting Selected Page ----------------*/
// ------- End of Landing Page ----------
*/
/*
/*--------------------- Sorting Selected Page ----------------
function showSortingPage() {
// pageNo = 1;
// algoType = 2;
Expand All @@ -80,10 +82,13 @@ function showSortingPage() {
mergeSort.mousePressed(mergeSortSelected);
bubbleSort.mousePressed(bubbleSortSelected);
}
/* -------End of Sorting Page --------------*/
/* -------End of Sorting Page --------------
*/
/*
function createTheArray() {
generateArray(10);
}
*/

function draw() {
graphWidth = appWidth * 0.6;
Expand All @@ -98,22 +103,48 @@ function draw() {
//switch case to maintain required pages with pageNo value
switch (pageNo) {
case 0:

rect(graphPadLeft,graphPadTop,400,200);
rect(graphPadLeft+405,graphPadTop,400,200);
fill(0);
text("Searching Algorithms",graphPadLeft,graphPadTop+20);
text("Sorting Algorithms",graphPadLeft+405,graphPadTop+20);
break;
case 1:
if (algoType === 1) {
if (algoType === 1)
{
rect(graphPadLeft,graphPadTop,400,200);
rect(graphPadLeft+405,graphPadTop,400,200);
fill(0);
text("Linear Search",graphPadLeft,graphPadTop+20);
text("Binary Search",graphPadLeft+405,graphPadTop+20);
}
else if(algoType===2)
{
rect(graphPadLeft,graphPadTop,400,200);
rect(graphPadLeft+405,graphPadTop,400,200);
fill(0);
text("Selection Sort",graphPadLeft,graphPadTop+20);
text("Bubble Sort",graphPadLeft+405,graphPadTop+20);
}
break;
case 2:
if (algoType === 1)
{
if(algoNo===1)
{

} else if (algoType === 2) {
if (algoNo === 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++) {
Expand All @@ -128,15 +159,56 @@ function windowResized() {
}

function mousePressed() {
console.log("called");
pageNo = 1;
sorted = false;
iterator = 0;
//selectionSort();
switch (pageNo) {
case 0:
if(mouseX> graphPadLeft && mouseX< graphPadLeft+400 && mouseY>graphPadTop && mouseY<graphPadTop+200)
{
pageNo++;
algoType=1;
}
else if(mouseX> graphPadLeft+405 && mouseX< graphPadLeft+405+400 && mouseY>graphPadTop && mouseY<graphPadTop+200)
{
pageNo++;
algoType=2;
}
break;
case 1:
if (algoType === 1)
{
if(mouseX> graphPadLeft && mouseX< graphPadLeft+400 && mouseY>graphPadTop && mouseY<graphPadTop+200)
{
pageNo++;
algoNo=1;
}
else if(mouseX> graphPadLeft+405 && mouseX< graphPadLeft+405+400 && mouseY>graphPadTop && mouseY<graphPadTop+200)
{
pageNo++;
algoNo=2;
}
}
else if (algoType === 2)
{
if(mouseX> graphPadLeft && mouseX< graphPadLeft+400 && mouseY>graphPadTop && mouseY<graphPadTop+200)
{
pageNo++;
algoNo=1;
sorted=false;
generateArray(10);
iterator=0;
}
else if(mouseX> graphPadLeft+405 && mouseX< graphPadLeft+405+400 && mouseY>graphPadTop && mouseY<graphPadTop+200)
{
pageNo++;
algoNo=2;
}
}
break;
case 2:
break;
}
}

function generateArray(n) {
algoNo = 0;
arr = [];
max = 0;
for (let i = 0; i < n; i++) {
Expand All @@ -145,6 +217,7 @@ function generateArray(n) {
max = arr[i];
}
}
/*

function selectionSortSelected() {
pageNo = 1;
Expand All @@ -153,11 +226,11 @@ function selectionSortSelected() {

heading.html("Selection Sort"); //Text of heading on first page
subHeading.html("It's worst case complexity is O(n<sup>2</sup>). Pretty bad huh?"); //sub-heading text shown upon selecting this sort/search
/* Making button look selected */
/* Making button look selected
selectionSort.addClass("active");
bubbleSort.removeClass("active");
mergeSort.removeClass("active");
/* Making button look selected END*/
/* Making button look selected END

}

Expand All @@ -167,11 +240,11 @@ function mergeSortSelected() {
algoNo = 2;
heading.html("Merge Sort"); //Text of heading on first page
subHeading.html("It's worst case complexity is O(n*log(n)). Not Bad!!"); //sub-heading text shown upon selecting this sort/search
/* Making button look selected */
/* Making button look selected
selectionSort.removeClass("active");
bubbleSort.removeClass("active");
mergeSort.addClass("active");
/* Making button look selected END*/
/* Making button look selected END
}

function bubbleSortSelected() {
Expand All @@ -180,13 +253,13 @@ function bubbleSortSelected() {
algoNo = 3;
heading.html("Bubble Sort"); //Text of heading on first page
subHeading.html("Did you know? It's worst case complexity is O(n<sup>2</sup>)."); //sub-heading text shown upon selecting this sort/search
/* Making button look selected */
/* Making button look selected
selectionSort.removeClass("active");
bubbleSort.addClass("active");
mergeSort.removeClass("active");
/* Making button look selected END*/
/* Making button look selected END
}

*/
function selectionSortS(d) {
let y, m, t, n;
myDelay(500);
Expand Down