From 8edaa5bbeba3dd63fa47edc5362c57a4deba4892 Mon Sep 17 00:00:00 2001 From: rajduino Date: Mon, 6 Apr 2020 15:50:46 +0530 Subject: [PATCH 1/2] Revert "Implemented Back button" This reverts commit 49af056049240c451d384e291ddbbda5b29c96d7. --- sketch.js | 235 +++++++++++++++++++----------------------------------- 1 file changed, 81 insertions(+), 154 deletions(-) diff --git a/sketch.js b/sketch.js index c19028a..8be1fbe 100644 --- a/sketch.js +++ b/sketch.js @@ -15,48 +15,27 @@ const quickSortHoare = new QuickSortHoare(); const DOT = 0, LINE = 1; -const col = { - r: 250, - g: 0, - b: 190 -}; - -const spot = { - x: 0, - y: 0 -}; - -let select_algorithm; -let input_count; -let button_range; -let button_reversed; -let button_shuffled; -let button_random; -let button_noise; -let button_back; -let button_pause; -let button_next; -let button_sort; - const algorithms = { bubbleSort, selectionSortMax, selectionSortMin, insertionSort, + // heapSort: { + // name: 'Heap Sort (Max, coming soon)', + // count: 200, + // representation: LINE, + // sorter: function* (arr, colors) { } + // }, mergeSort, quickSortLomuto, - quickSortHoare, - auxualary: { - name: 'And a lot more coming soon!!', - count: 0, - representation: LINE, - sorter: function* (arr, colors) { } - } + quickSortHoare } -function initialiseElements() { - select_algorithm = createSelect(); +function initialiseElements() +{ + let select_algorithm = createSelect(); select_algorithm.position(10, 10); + for (let algo in algorithms) { select_algorithm.option(algorithms[algo]['name'], algo); } @@ -68,73 +47,60 @@ function initialiseElements() { shuffle(array, true); }); - input_count = createInput(algorithms[select_algorithm.value()]['count'].toString()); + let input_count = createInput(algorithms[select_algorithm.value()]['count'].toString()); input_count.position(10, 60); input_count.attribute('type', 'number'); input_count.attribute('min', '10'); input_count.attribute('max', '1000'); - button_range = createButton('Ordered'); + let button_range = createButton('Ordered'); button_range.position(10, 80); button_range.mousePressed(() => { init(algorithms[select_algorithm.value()], parseInt(input_count.value())); }); - button_reversed = createButton('Reversed'); + let button_reversed = createButton('Reversed'); button_reversed.position(10, 100); button_reversed.mousePressed(() => { init(algorithms[select_algorithm.value()], parseInt(input_count.value())); reverse(array); }); - button_shuffled = createButton('Shuffled'); + let button_shuffled = createButton('Shuffled'); button_shuffled.position(10, 120); button_shuffled.mousePressed(() => { init(algorithms[select_algorithm.value()], parseInt(input_count.value())); shuffle(array, true); }); - /* - button_random = createButton('Random'); - button_random.position(10, 140); - button_random.mousePressed(() => { - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - - let maximum = max(array); - let minimum = min(array); - - for (let i in array) { - array[i] = random(minimum, maximum); - } - }); - - button_noise = createButton('Noise'); - button_noise.position(10, 160); - button_noise.mousePressed(() => { - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - }); - */ - - button_back = createButton('Back'); - button_back.position(width - 200, 10); - button_back.mousePressed(() => { - pageNo = 0; - colors = null; - sorter = null; - representation = 0; - paused = true; - w = 0; - hideElements(); - clear(); - background(0); + /* + let button_random = createButton('Random'); + button_random.position(10, 140); + button_random.mousePressed(() => { + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + + let maximum = max(array); + let minimum = min(array); + + for (let i in array) { + array[i] = random(minimum, maximum); + } + }); + + let button_noise = createButton('Noise'); + button_noise.position(10, 160); + button_noise.mousePressed(() => { + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); }); + */ - button_pause = createButton('Pause'); + let button_pause = createButton('Pause'); button_pause.position(10, 35); button_pause.mousePressed(() => { paused = true }); - button_next = createButton('Next'); + + let button_next = createButton('Next'); button_next.position(60, 35); button_next.mousePressed(() => { if (paused) { @@ -143,69 +109,42 @@ function initialiseElements() { paused = true; } }); - button_sort = createButton('Sort!'); + + let button_sort = createButton('Sort!'); button_sort.position(110, 35); button_sort.mousePressed(() => { if (!paused) { init(algorithms[select_algorithm.value()], parseInt(input_count.value())); shuffle(array, true); } + paused = false; }); init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - shuffle(array, true); + shuffle(array, true); } -function showElements() +function landingPage() { - select_algorithm.show(); - input_count.show(); - button_range.show(); - button_reversed.show(); - button_shuffled.show(); - //button_random.show(); - //button_noise.show(); - button_back.show(); - button_pause.show(); - button_next.show(); - button_sort.show(); -} -function hideElements() -{ - select_algorithm.hide(); - input_count.hide(); - button_range.hide(); - button_reversed.hide(); - button_shuffled.hide(); - //button_random.hide(); - //button_noise.hide(); - button_back.hide(); - button_pause.hide(); - button_next.hide(); - button_sort.hide(); -} -function landingPage() { - - textAlign(CENTER, CENTER); - fill('#A8A8A8'); + textAlign(CENTER,CENTER); + fill(0); textSize(50); - text('Algorithm Visualiser', windowWidth * 0.1, windowHeight * 0.2, windowWidth * 0.8, windowHeight * 0.2); - textSize(18); - text('Algorithms, from the first time we learnt them in school till now as we are completing our engineering, we can\'t leave them. We may understand them but how is it like to watch them in action? The objective of this project is to visualise some of the common algorithms while they are in execution.', windowWidth * 0.2, windowHeight * 0.3, windowWidth * 0.6, windowHeight * 0.4); - fill(0, 200, 100); - rect(windowWidth * 0.4, windowHeight * 0.6, windowWidth * 0.2, windowHeight * 0.1); + text('Algorithm Visualiser',windowWidth*0.1,windowHeight*0.2,windowWidth*0.8,windowHeight*0.2); + textSize(20); + text('Algorithms, from the first time we learnt in school till now as we are completing our engineering, we can\'t leave them. We may understand them but how is it like to watch them in action? The objective of this project is to visualise some of the common algorithms while they are in execution',windowWidth*0.2,windowHeight*0.3,windowWidth*0.6,windowHeight*0.4); + fill(0,200,100); + rect(windowWidth*0.4,windowHeight*0.6,windowWidth*0.2,windowHeight*0.1); fill(0); - text('Let\'s get started !', windowWidth * 0.4, windowHeight * 0.6, windowWidth * 0.2, windowHeight * 0.1); + text('Let\'s get started',windowWidth*0.4,windowHeight*0.6,windowWidth*0.2,windowHeight*0.1); } // Sketch function setup() { createCanvas(windowWidth, windowHeight); //initialiseElements(); - pageNo = 0; - background(0); - initialiseElements(); - hideElements(); + pageNo=0; + landingPage(); + } function init(algo, length) { @@ -227,47 +166,35 @@ function init(algo, length) { - function draw() { - - if (pageNo === 0) { - - col.r = random(70, 170); - col.b = random(70, 140); - spot.x = random(0, width); - spot.y = random(0, height); - - //hideElements(); - fill(col.r, col.g, col.b, 70); - noStroke(); - ellipse(spot.x, spot.y, 30, 30); + background(120, 0, 200); + // frameRate(2); + noStroke(); + if(pageNo===0) + { landingPage(); } - else if (pageNo === 1) { - // background(160, 0, 180); - background('#353966'); - // frameRate(2); - noStroke(); - if (!paused) { - let next = sorter.next(); + else{ + if (!paused) { + let next = sorter.next(); - colors = next.value; - paused = next.done; - } + colors = next.value; + paused = next.done; + } - for (let i = 0; i < array.length; ++i) { - fill(colors[i]); - if (representation === LINE) { - stroke(0); - rect(i * w, height - array[i], w, array[i]); - } else if (representation === DOT) { - ellipse(i * w, height - array[i], w, w) - } - // stroke(colors[i]); - // point(i * w, height - array[i]); + for (let i = 0; i < array.length; ++i) { + fill(colors[i]); + if (representation === LINE) { + stroke(0); + rect(i * w, height - array[i], w, array[i]); + } else if (representation === DOT) { + ellipse(i * w, height - array[i], w, w) } + // stroke(colors[i]); + // point(i * w, height - array[i]); } } +} // Helper functions @@ -276,13 +203,13 @@ function swap(arr, i, j) { [arr[i], arr[j]] = [arr[j], arr[i]]; } -function mousePressed() { - if (pageNo === 0) { - if (mouseX > windowWidth * 0.4 && mouseX < windowWidth * 0.6 && mouseY > windowHeight * 0.6 && mouseY < windowHeight * 0.7) - { - pageNo = 1; - showElements(); - } +function mousePressed() +{ + if(pageNo===0) + { + if(mouseX>windowWidth*0.4 && mouseXwindowHeight*0.6 && mouseY< windowHeight*0.7) + pageNo=1; + initialiseElements(); } } From bf2478047271ec6e7dfc5279ed5d35f753e57c29 Mon Sep 17 00:00:00 2001 From: rajduino Date: Mon, 6 Apr 2020 16:24:21 +0530 Subject: [PATCH 2/2] Added element value --- sketch.js | 297 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 169 insertions(+), 128 deletions(-) diff --git a/sketch.js b/sketch.js index 8be1fbe..f2662c2 100644 --- a/sketch.js +++ b/sketch.js @@ -15,135 +15,163 @@ const quickSortHoare = new QuickSortHoare(); const DOT = 0, LINE = 1; +const col = { + r: 250, + g: 0, + b: 190 +}; + +const spot = { + x: 0, + y: 0 +}; + + const algorithms = { bubbleSort, selectionSortMax, selectionSortMin, insertionSort, - // heapSort: { - // name: 'Heap Sort (Max, coming soon)', - // count: 200, - // representation: LINE, - // sorter: function* (arr, colors) { } - // }, mergeSort, quickSortLomuto, - quickSortHoare + quickSortHoare, + auxualary: { + name: 'And a lot more coming soon!!', + count: 0, + representation: LINE, + sorter: function* (arr, colors) { } + } } -function initialiseElements() -{ +function initialiseElements() { + if (pageNo === 1) { let select_algorithm = createSelect(); - select_algorithm.position(10, 10); - - for (let algo in algorithms) { - select_algorithm.option(algorithms[algo]['name'], algo); - } - - select_algorithm.changed(() => { - let algorithm = algorithms[select_algorithm.value()]; - input_count.value(algorithm['count']); - init(algorithm, algorithm['count']); - shuffle(array, true); - }); - - let input_count = createInput(algorithms[select_algorithm.value()]['count'].toString()); - input_count.position(10, 60); - input_count.attribute('type', 'number'); - input_count.attribute('min', '10'); - input_count.attribute('max', '1000'); - - let button_range = createButton('Ordered'); - button_range.position(10, 80); - button_range.mousePressed(() => { - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - }); + select_algorithm.position(10, 10); - let button_reversed = createButton('Reversed'); - button_reversed.position(10, 100); - button_reversed.mousePressed(() => { - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - reverse(array); - }); - - let button_shuffled = createButton('Shuffled'); - button_shuffled.position(10, 120); - button_shuffled.mousePressed(() => { - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - shuffle(array, true); - }); + for (let algo in algorithms) { + select_algorithm.option(algorithms[algo]['name'], algo); + } - /* - let button_random = createButton('Random'); - button_random.position(10, 140); - button_random.mousePressed(() => { - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + select_algorithm.changed(() => { + let algorithm = algorithms[select_algorithm.value()]; + input_count.value(algorithm['count']); + init(algorithm, algorithm['count']); + shuffle(array, true); + }); - let maximum = max(array); - let minimum = min(array); + let input_count = createInput(algorithms[select_algorithm.value()]['count'].toString()); + input_count.position(10, 60); + input_count.attribute('type', 'number'); + input_count.attribute('min', '10'); + input_count.attribute('max', '1000'); - for (let i in array) { - array[i] = random(minimum, maximum); - } - }); + let button_range = createButton('Ordered'); + button_range.position(10, 80); + button_range.mousePressed(() => { + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + }); - let button_noise = createButton('Noise'); - button_noise.position(10, 160); - button_noise.mousePressed(() => { - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - }); - */ - - let button_pause = createButton('Pause'); - button_pause.position(10, 35); - button_pause.mousePressed(() => { - paused = true - }); - - let button_next = createButton('Next'); - button_next.position(60, 35); - button_next.mousePressed(() => { - if (paused) { - paused = false; - redraw(); - paused = true; - } - }); + let button_reversed = createButton('Reversed'); + button_reversed.position(10, 100); + button_reversed.mousePressed(() => { + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + reverse(array); + }); - let button_sort = createButton('Sort!'); - button_sort.position(110, 35); - button_sort.mousePressed(() => { - if (!paused) { + let button_shuffled = createButton('Shuffled'); + button_shuffled.position(10, 120); + button_shuffled.mousePressed(() => { init(algorithms[select_algorithm.value()], parseInt(input_count.value())); shuffle(array, true); - } + }); - paused = false; - }); + /* + let button_random = createButton('Random'); + button_random.position(10, 140); + button_random.mousePressed(() => { + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + + let maximum = max(array); + let minimum = min(array); + + for (let i in array) { + array[i] = random(minimum, maximum); + } + }); + + let button_noise = createButton('Noise'); + button_noise.position(10, 160); + button_noise.mousePressed(() => { + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + }); + */ + + // let button_back = createButton('Back'); + // button_back.position(width - 200, 10); + // button_back.mousePressed(() => { + // pageNo = 0; + // // colors = null; + // // sorter = null; + // // representation = 0; + // // paused = true; + // // w = 0; + // // noLoop(); + // // clear(); + // background(0); + // // loop(); + // }); + + let button_pause = createButton('Pause'); + button_pause.position(10, 35); + button_pause.mousePressed(() => { + paused = true + }); + + let button_next = createButton('Next'); + button_next.position(60, 35); + button_next.mousePressed(() => { + if (paused) { + paused = false; + redraw(); + paused = true; + } + }); + + let button_sort = createButton('Sort!'); + button_sort.position(110, 35); + button_sort.mousePressed(() => { + if (!paused) { + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + shuffle(array, true); + } - init(algorithms[select_algorithm.value()], parseInt(input_count.value())); - shuffle(array, true); + paused = false; + }); + + init(algorithms[select_algorithm.value()], parseInt(input_count.value())); + shuffle(array, true); + } } -function landingPage() -{ - textAlign(CENTER,CENTER); - fill(0); +function landingPage() { + + textAlign(CENTER, CENTER); + fill('#A8A8A8'); textSize(50); - text('Algorithm Visualiser',windowWidth*0.1,windowHeight*0.2,windowWidth*0.8,windowHeight*0.2); - textSize(20); - text('Algorithms, from the first time we learnt in school till now as we are completing our engineering, we can\'t leave them. We may understand them but how is it like to watch them in action? The objective of this project is to visualise some of the common algorithms while they are in execution',windowWidth*0.2,windowHeight*0.3,windowWidth*0.6,windowHeight*0.4); - fill(0,200,100); - rect(windowWidth*0.4,windowHeight*0.6,windowWidth*0.2,windowHeight*0.1); + text('Algorithm Visualiser', windowWidth * 0.1, windowHeight * 0.2, windowWidth * 0.8, windowHeight * 0.2); + textSize(18); + text('Algorithms, from the first time we learnt them in school till now as we are completing our engineering, we can\'t leave them. We may understand them but how is it like to watch them in action? The objective of this project is to visualise some of the common algorithms while they are in execution.', windowWidth * 0.2, windowHeight * 0.3, windowWidth * 0.6, windowHeight * 0.4); + fill(0, 200, 100); + rect(windowWidth * 0.4, windowHeight * 0.6, windowWidth * 0.2, windowHeight * 0.1); fill(0); - text('Let\'s get started',windowWidth*0.4,windowHeight*0.6,windowWidth*0.2,windowHeight*0.1); + text('Let\'s get started !', windowWidth * 0.4, windowHeight * 0.6, windowWidth * 0.2, windowHeight * 0.1); } // Sketch function setup() { createCanvas(windowWidth, windowHeight); //initialiseElements(); - pageNo=0; - landingPage(); + pageNo = 0; + background(0); } @@ -166,35 +194,50 @@ function init(algo, length) { + function draw() { - background(120, 0, 200); - // frameRate(2); - noStroke(); - if(pageNo===0) - { + + if (pageNo === 0) { + + col.r = random(70, 170); + col.b = random(70, 140); + spot.x = random(0, width); + spot.y = random(0, height); + + + fill(col.r, col.g, col.b, 70); + noStroke(); + ellipse(spot.x, spot.y, 30, 30); landingPage(); } - else{ - if (!paused) { - let next = sorter.next(); + else if (pageNo === 1) { + // background(160, 0, 180); + background('#353966'); + // frameRate(2); + noStroke(); + if (!paused) { + let next = sorter.next(); - colors = next.value; - paused = next.done; - } + colors = next.value; + paused = next.done; + } - for (let i = 0; i < array.length; ++i) { - fill(colors[i]); - if (representation === LINE) { - stroke(0); - rect(i * w, height - array[i], w, array[i]); - } else if (representation === DOT) { - ellipse(i * w, height - array[i], w, w) + for (let i = 0; i < array.length; ++i) { + fill(colors[i]); + if (representation === LINE) { + stroke(0); + rect(i * w, height - array[i], w, array[i]); + textAlign(LEFT, TOP); + fill(0); + text(int(array[i]/10),(i+0.1)*w,height-array[i]+(height*.005)); + } else if (representation === DOT) { + ellipse(i * w, height - array[i], w, w) + } + // stroke(colors[i]); + // point(i * w, height - array[i]); } - // stroke(colors[i]); - // point(i * w, height - array[i]); } } -} // Helper functions @@ -203,13 +246,11 @@ function swap(arr, i, j) { [arr[i], arr[j]] = [arr[j], arr[i]]; } -function mousePressed() -{ - if(pageNo===0) - { - if(mouseX>windowWidth*0.4 && mouseXwindowHeight*0.6 && mouseY< windowHeight*0.7) - pageNo=1; - initialiseElements(); +function mousePressed() { + if (pageNo === 0) { + if (mouseX > windowWidth * 0.4 && mouseX < windowWidth * 0.6 && mouseY > windowHeight * 0.6 && mouseY < windowHeight * 0.7) + pageNo = 1; + initialiseElements(); } }