Mabl

Strange programming and other stuff

Bubble Sort

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);
  }
}

Next Post

Previous Post


Warning: Use of undefined constant comment - assumed 'comment' (this will throw an Error in a future version of PHP) in /var/www/mabl.dk/public_html/wp/wp-content/themes/hitchcock/comments.php on line 17
2 Comments

  1. 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

Leave a Reply to Robin Andrews Cancel reply

© 2022 Mabl

Theme by Anders Norén