Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Implemented Back button #1

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 1 commit into from
Apr 5, 2020
Merged

Implemented Back button #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
235 changes: 154 additions & 81 deletions 235 sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,48 @@ 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
quickSortHoare,
auxualary: {
name: 'And a lot more coming soon!!',
count: 0,
representation: LINE,
sorter: function* (arr, colors) { }
}
}

function initialiseElements()
{
let select_algorithm = createSelect();
function initialiseElements() {
select_algorithm = createSelect();
select_algorithm.position(10, 10);

for (let algo in algorithms) {
select_algorithm.option(algorithms[algo]['name'], algo);
}
Expand All @@ -47,60 +68,73 @@ function initialiseElements()
shuffle(array, true);
});

let input_count = createInput(algorithms[select_algorithm.value()]['count'].toString());
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 = createButton('Ordered');
button_range.position(10, 80);
button_range.mousePressed(() => {
init(algorithms[select_algorithm.value()], parseInt(input_count.value()));
});

let button_reversed = createButton('Reversed');
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 = createButton('Shuffled');
button_shuffled.position(10, 120);
button_shuffled.mousePressed(() => {
init(algorithms[select_algorithm.value()], parseInt(input_count.value()));
shuffle(array, true);
});

/*
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_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_pause = createButton('Pause');
button_pause = createButton('Pause');
button_pause.position(10, 35);
button_pause.mousePressed(() => {
paused = true
});

let button_next = createButton('Next');
button_next = createButton('Next');
button_next.position(60, 35);
button_next.mousePressed(() => {
if (paused) {
Expand All @@ -109,42 +143,69 @@ function initialiseElements()
paused = true;
}
});

let button_sort = createButton('Sort!');
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 landingPage()
function showElements()
{
textAlign(CENTER,CENTER);
fill(0);
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');
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);
initialiseElements();
hideElements();
}

function init(algo, length) {
Expand All @@ -166,35 +227,47 @@ 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);

//hideElements();
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]);
} 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

Expand All @@ -203,13 +276,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;
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;
showElements();
}
}
}

Expand Down
Morty Proxy This is a proxified and sanitized view of the page, visit original site.