javascript - ajax undefined after a thousand iterations -
when creating animation try use javascript additional effects, namely snow being piled , falling off edges of foreground. figured javascript "calculations" on <canvas> had image, send "snow" php script create png images. placed on local "server" because 1 can write files.
<html> <head> <title>making snow</title> </head> <body bgcolor="black"> <canvas id="canvas" width="1920px" height="1080px"></canvas> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> var canvas; var ctx; var frame=-530; var simg = new image() var dimg = new image() onload = function() { canvas = document.getelementbyid("canvas"); ctx = canvas.getcontext("2d"); simg.src = "prodb/c/dgb.0530.png" } simg.onload = function() { var ipo=3; // initialize pixels on screen/page ctx.clearrect(0,0,canvas.width,canvas.height); ctx.drawimage(simg,0,0); document.title = "making snow " + (frame+530) + " / 7000"; snowdraw(); } dimg.onerror = function() { dimg.src = "../imagewriting/snow" + zerofill(frame+530,4) + ".png"; } dimg.onload = function() { frame++; if(frame<530) simg.src = "prodb/c/dgb.0530.png" else if(frame>4400) simg.src = "prodb/c/dgb.4400.png" else simg.src = "prodb/c/dgb." + zerofill(frame,4) + ".png" } var snowdraw = function() { var temp; var canvasdata = ""; // console.log(screen); // animation // choose random pixel @ top of screen if(frame<7000) { for(ny=canvas.height-2; ny>=0; ny--) { // iterate through pixels starting bottom right corner. for(nx=canvas.width-2; nx>=0; nx--) { canvasdata=canvasdata+"1"; } } $.ajax({ method: "post", url: "makesnow.php", data:{ imgdata: canvasdata, frame: (frame+530) } }) .done(function( msg ) { dimg.src = "../imagewriting/snow" + zerofill(frame+530,4) + ".png"; }); } else { document.title = "complete"; } } // http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript // peter bailey http://stackoverflow.com/users/8815 function zerofill( number, width ) { width -= number.tostring().length; if ( width > 0 ) { return new array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number; } return number + ""; // return string } </script> </html> however, on 1640th frame (or more precisely frame=1110) ajax undefined. image snow1640.png created, browser tells me ajax not defined , won't advance passed making snow 1640 / 7000. because of small random nature each "snow flake" can't pick left off, snow jump 1 frame next. though did try @ 1 point , ajax still stopped after frame.
i first ran on local machine running firefox (http://127.0.0.1/...) moved onto machine on network more powerful running chrome , both died on same frame. thought might memory or file limit moved complete frames out of there. still nothing.
edit: code snippit of problem.
also, console.log data , ajax.responsetext seem empty, both during successful "renders" , when starts iterating ajax not defined (every other line empty, every other error).
edit: new development! turns out error referenceerror: ajax not defined anyways gets called between frames (and 404 when asking dimg if image created).
edit: typing in console.log($.ajax) after onload , commenting out simg.src got function ajax().
error persists, time expanded reveal following:
success http://127.0.0.1/ag/makesnowbc.html 197:7 j http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 2:27131 firewith http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 2:27949 x http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 4:22242 b http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 4:26298 edit: changed code use synchronous ajax. time there no error messages ever, still stops @ 1640.
Comments
Post a Comment