canvas - How to add sleep and wait logic in javascript -
we working on visualization of sorting algorithms, required add sleep , wait logic visualize selected element , element compared. after searching li'l bit, found code "function sleep(milliseconds){...}" should work desired has failed far.
in function insertionsort(){...}, current element depicted color red , element compared depicted color blue, once current element swapped other color of element again changed white blue (working correctly, verified using debugger), during execution, these color transformations not visible (only element in red displayed after each iteration)
var element = function(value, color) { this.value = value; this.color = color; }; var x = []; x[0] = new element(2, "white"); x[1] = new element(1, "white"); x[2] = new element(5, "white"); x[3] = new element(4, "white"); x[4] = new element(3, "white"); x[5] = new element(7, "white"); x[6] = new element(6, "white"); x[7] = new element(8, "white"); x[8] = new element(10, "white"); x[9] = new element(9, "white"); var = 1; var context; var delaytime = 1000; function myfunction() { var bar = document.getelementbyid("bar"); width = bar.width; height = bar.height; context = bar.getcontext("2d"); window.setinterval(insertionsort, 3000); } function insertionsort() { if(i>=0 && i<x.length) { var j = i; x[j].color = "red"; drawgraph(j); while(j>0 && x[j-1].value > x[j].value) { x[j-1].color = "blue"; x[j].color = "red"; drawgraph(); //need add delay here sleep(delaytime); //swap var temp = x[j]; x[j] = x[j-1]; x[j-1] = temp; drawgraph(); // , here... sleep(delaytime); x[j].color = "white"; drawgraph(); j = j-1; } x[j].color = "white"; i++; } else if(i>=x.length) { for(k=0;k<x.length;k++) { x[k].color = "white"; } drawgraph(); i=-1; } } function sleep(milliseconds) { var start = new date().gettime(); for (var = 0; < 1e7; i++) { if ((new date().gettime() - start) > milliseconds) { break; } } } function drawgraph() { context.strokestyle = "black"; context.clearrect ( 0 , 0 , width, height); for(k=0;k<x.length;k++) { context.fillstyle = x[k].color; //x , y coordinate of top left corner of rectangle context.strokerect(400+k*20, 18, 20, x[k].value*10); context.fillrect(400+k*20, 18, 20, x[k].value*10); } }<html> <head> <script language="javascript" type="text/javascript" src="../p5.js"></script> <!-- uncomment lines below include p5 libraries --> <!--<script language="javascript" src="../addons/p5.dom.js"></script>--> <!--<script language="javascript" src="../addons/p5.sound.js"></script>--> <script language="javascript" type="text/javascript" src="sketch.js"></script> <!-- line removes default padding , style. might need 1 of these values set. --> <style> body {padding: 0; margin: 0;} </style> </head> <body> <button onclick="myfunction()">try it</button> <canvas id="bar" width="1000" height="400" style="border:2px"></canvas> </body> </html>
the approach used in implementation of sleep() terrible in programming language, because consumes lot of cpu while waiting. in javascript, however, it's bad, because javascript program required relinquish control frequently; not permitted keep computing extended period of time. in chrome browser, example, chrome consider program unresponsive, , suggest user kill it.
but if weren't case, won't produce desired effect, assume animation happens on screen, delay 1 step next. way javascript works in browser, changes make page rendered when program relinquishes control; nothing updated on-screen while javascript code running. if call sleep function one, not relinquishing control, running javascript whole time, , therefore browser not update screen during time. update when entire insertionsort method returns, , browser has 3000ms time window (from setinterval) take care of own stuff (rendering).
unfortunately, have find way split algorithm, each step want distinctly visible user happens in own timed callback.
it along lines of:
function stepone() { first bit; settimeout(secondstep, delay) } secondstep() { more stuff; settimeout(thirdstep, delay) } and on. way control speed of animation delay parameter 1 step next.
it's going tricky, because aren't trying animate insertion sort, various algorithms. then, break them in: insertionsortstepone/two/three, shellsortstepone/two/three? quite ugly.
depending on how ambitious are, , how want out of assignment, might explore feature of es6 (a newer version of javascript)
what lets let function, nested loops, remain structured pretty is, insert points relinquishes control. later, called continue point left off. use settimeout or setinterval that. i've not experimented myself, seems super-cool.
Comments
Post a Comment