{"id":301,"date":"2017-12-15T23:43:55","date_gmt":"2017-12-15T21:43:55","guid":{"rendered":"https:\/\/mabl.dk\/wp\/?p=301"},"modified":"2020-12-14T10:54:18","modified_gmt":"2020-12-14T08:54:18","slug":"bubble-sort","status":"publish","type":"post","link":"https:\/\/mabl.dk\/wp\/2017\/bubble-sort\/","title":{"rendered":"Bubble Sort"},"content":{"rendered":"<p>Simple bubble sort algorithm implemented using p5.js<\/p>\n<p><iframe src=\"https:\/\/mabl.dk\/p5\/BubbleSort\/\" height=\"600\"><\/iframe><\/p>\n\n\n<p>As per request I have added the sourcecode for this small project. Do note that this is by no means and example of &#8220;Best practice&#8221; or anything alike. It is simply a personal project for learning the p5.js framework. Provided &#8220;As is&#8221;:<\/p>\n\n\n\n<pre class=\"wp-block-code\" title=\"sketch.js\"><code lang=\"javascript\" class=\"language-javascript\">\nvar pointsY = [];\nvar sortSize = 0;\nvar lastMili = 0;\nvar startValues = [];\nvar offset = 0;\nvar running = false;\nvar slider;\nvar speed;\nvar speedCounter = 0;\nvar fullscreenNow = 0;\n\nfunction setup() {\n\n  slider = createSlider(0, 9, 7);\n  slider.position(50, 4);\n  \n  button = createButton('Start');\n  button.position(5, 30);\n  button.mousePressed(start);\n  \n  button = createButton('Stop');\n  button.position(5, 55);\n  button.mousePressed(stop);\n  \n  button = createButton('Restart');\n  button.position(5, 80);\n  button.mousePressed(reset);\n  \n  button = createButton('Fullscreen');\n  button.position(5, 105);\n  button.mousePressed(fullscreenCall);\n  \n  reset();\n}\n\nfunction fullscreenCall() {\n    fullscreen(!fullscreenNow);\n    fullscreenNow = !fullscreenNow\n    setTimeout(reset, 100)\n}\n\nfunction start() {\n  running = true;\n}\n\nfunction stop() {\n  running = false;\n}\n\nfunction reset() {\n  createCanvas(window.innerWidth, window.innerHeight);\n  \n  sortSize = min(window.innerWidth, window.innerHeight) - 150;\n  offsetX = int((window.innerWidth - sortSize)\/2);\n  offsetY = int((window.innerHeight - sortSize)\/2);\n  \n  for (var i = 0; i &lt; sortSize; i++) {\n    pointsY[i] = i;\n  }\n  \n  for (var j = 0; j &lt; sortSize; j++) {\n    var temp = pointsY[j];\n    var rand = Math.floor(random(sortSize));\n    pointsY[j] = pointsY[rand];\n    pointsY[rand] = temp;\n  }\n}\n\nfunction draw() {\n  background(200);\n  \n  var mili = millis()\n  text(int(1000\/(mili-lastMili)), window.innerWidth - 18, 15);\n  lastMili=mili;\n  \n  text(fullscreenNow, window.innerWidth - 18, 50);\n  \n  text(\"Speed\", 6, 20);\n  \n  speed = slider.value();\n  \n  if (running) {\n    speedCounter = speedCounter + 1;\n    if (speedCounter >= 10 - speed) {\n      for (var i = sortSize - 1; i >= 0; i--) {\n        if(pointsY[i] &lt; pointsY[i+1]) {\n          var temp = pointsY[i];\n          pointsY[i] = pointsY[i+1];\n          pointsY[i+1] = temp;\n        }\n        speedCounter = 0;\n      }\n    }\n  }\n  \n  stroke(51);\n  \n  for (var j = 0; j &lt; sortSize; j++) {\n    line(offsetX + j + 1,offsetY + pointsY[j] + 1,offsetX + j + 1,offsetY + sortSize);\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;Best practice&#8221; or anything alike. It is simply a personal project for learning the p5.js framework. Provided &#8220;As is&#8221;:<\/p>\n","protected":false},"author":1,"featured_media":306,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/posts\/301"}],"collection":[{"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/comments?post=301"}],"version-history":[{"count":5,"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/posts\/301\/revisions"}],"predecessor-version":[{"id":464,"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/posts\/301\/revisions\/464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/media\/306"}],"wp:attachment":[{"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/media?parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/categories?post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mabl.dk\/wp\/wp-json\/wp\/v2\/tags?post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}