javascript - Fibonacci sequence animation -
i attempting program fibonacci sequence animation on html5 canvas using javascript.
i have calculated fibonacci numbers , able add squares grid layout. trouble having being able calculate offset automatically fit side side nicely. have pointers how can achieved.
here javascript code:
var canvas; var context; function init(){ canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); drawgrid(); drawlines(); } function drawgrid(){ context.strokestyle="lightgrey"; for(var = 0; < 600; i+=20){ context.beginpath(); context.moveto(i, 0); context.lineto(i, 600); context.stroke(); context.beginpath(); context.moveto(0, i); context.lineto(600, i); context.stroke(); } } function drawlines(){ context.strokestyle="blue"; var startleft = (canvas.width / 2) - 20; var starttop = (canvas.height / 2) - 20; var first = 1; var second = 1; var next = 0; var c = 0; var count = 0; (var = 0; < 5; i++){ if ( c <= 1 ){ next = 1; }else{ next = first + second; first = second; second = next; } c++; next *= 20; //this minor attempt @ offsetting not work ever switch(count) { case 1: startleft += next; break; case 2: starttop-=next; break; case 3: starttop -= next - 20; startleft -= next; break; case 4: starttop += next - 80; startleft += next - 160; break; } context.beginpath(); context.rect(startleft,starttop,next,next); context.stroke(); count++; if (count > 4){ count = 1; } startleft = (canvas.width / 2) - 20; starttop = (canvas.height / 2) - 20; } }
one way keep track of coordinates @ times , increment depending of orientation of following square place. think whole structure ok, there info lacking, keeping bottom , right coordinates.
something seems work (i've put increment of 10 see if logic ok, should work any):
function drawlines() { context.strokestyle = "blue"; var curleft = (canvas.width / 2) - 10; var curtop = (canvas.height / 2) - 10; //you add right , bottom position calculate positioning later. var curright = curleft + 10; var curbottom = curtop + 10; var first = 0; var second = 1; var next = 10; var c = 0; //you draw first square out of loop cause it's conditions //not same, meaning positioning not dependent on previous square context.beginpath(); context.rect(curleft, curtop, next, next); context.stroke(); (var = 1; <= 9; i++) { next = first + second; first = second; second = next; next *= 10; //changed fetch if square should added right, top, left or bottom count = % 4 //you switch depending on you're at. each direction has increment pattern. //for example add right keep bottom, current right left positioning //and increment top depending on next value. structure //similar yours since have right , bottom it's //easier place each square correctly switch (count) { case 0: curright = curleft + next curleft = curleft curtop = curbottom curbottom = curbottom + next break; case 1: curleft = curright curright = curright + next curtop = curbottom - next curbottom = curbottom break; case 2: curleft = curright - next curright = curright curbottom = curtop curtop = curbottom - next break; case 3: curright = curleft curleft = curleft - next curbottom = curtop + next curtop = curtop break; } // rest pretty same context.beginpath(); context.rect(curleft, curtop, next, next); context.stroke(); count++; } } see fiddle: http://jsfiddle.net/a0alg6ly/3/
Comments
Post a Comment