Simple bubble sort algorithm implemented using p5.js
As per request I have added the sourcecode for this small project. Do note that this is by no means and example of “Best practice” or anything alike. It is simply a personal project for learning the p5.js framework. Provided “As is”:
var pointsY = [];
var sortSize = 0;
var lastMili = 0;
var startValues = [];
var offset = 0;
var running = false;
var slider;
var speed;
var speedCounter = 0;
var fullscreenNow = 0;
function setup() {
slider = createSlider(0, 9, 7);
slider.position(50, 4);
button = createButton('Start');
button.position(5, 30);
button.mousePressed(start);
button = createButton('Stop');
button.position(5, 55);
button.mousePressed(stop);
button = createButton('Restart');
button.position(5, 80);
button.mousePressed(reset);
button = createButton('Fullscreen');
button.position(5, 105);
button.mousePressed(fullscreenCall);
reset();
}
function fullscreenCall() {
fullscreen(!fullscreenNow);
fullscreenNow = !fullscreenNow
setTimeout(reset, 100)
}
function start() {
running = true;
}
function stop() {
running = false;
}
function reset() {
createCanvas(window.innerWidth, window.innerHeight);
sortSize = min(window.innerWidth, window.innerHeight) - 150;
offsetX = int((window.innerWidth - sortSize)/2);
offsetY = int((window.innerHeight - sortSize)/2);
for (var i = 0; i < sortSize; i++) {
pointsY[i] = i;
}
for (var j = 0; j < sortSize; j++) {
var temp = pointsY[j];
var rand = Math.floor(random(sortSize));
pointsY[j] = pointsY[rand];
pointsY[rand] = temp;
}
}
function draw() {
background(200);
var mili = millis()
text(int(1000/(mili-lastMili)), window.innerWidth - 18, 15);
lastMili=mili;
text(fullscreenNow, window.innerWidth - 18, 50);
text("Speed", 6, 20);
speed = slider.value();
if (running) {
speedCounter = speedCounter + 1;
if (speedCounter >= 10 - speed) {
for (var i = sortSize - 1; i >= 0; i--) {
if(pointsY[i] < pointsY[i+1]) {
var temp = pointsY[i];
pointsY[i] = pointsY[i+1];
pointsY[i+1] = temp;
}
speedCounter = 0;
}
}
}
stroke(51);
for (var j = 0; j < sortSize; j++) {
line(offsetX + j + 1,offsetY + pointsY[j] + 1,offsetX + j + 1,offsetY + sortSize);
}
}
Robin Andrews December 14, 2020
That’s great but it would be good to see the source code.
admin December 14, 2020 — Post author
Hello Robin,
Thank you for showing interest. I have included the sourcecode, and let me know if you have any comments or questions!
Best regards
Mads