0

When creating an animation I try to use javascript for additional effects, namely snow being piled up and falling off the edges of the foreground. I figured that the javascript could do the "calculations" on a <canvas> that had the image, then send the "snow" to a php script that would create the png images. This is all placed on my local "server" because that is the only one that 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 all pixels on the 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 a random pixel at the top of the screen
            if(frame<7000)
            {
                for(ny=canvas.height-2; ny>=0; ny--)
                {   // Iterate through all the pixels starting from the 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
// by 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 + ""; // always return a string
}
</script>

</html>

However, on the 1640th frame (or more precisely frame=1110) ajax is suddenly undefined. The image snow1640.png is created, but the browser tells me ajax is not defined and won't advance passed Making Snow 1640 / 7000. Because of the small random nature for each "snow flake" I can't just pick it up from where I left off, as the snow would jump from one frame to the next. Though I did try that at one point and ajax still stopped after that frame.

I first ran it on the local machine running Firefox (http://127.0.0.1/...) then moved onto another machine on the network which is more powerful running Chrome and both died on that same frame. Thought it might be a memory or file limit so I moved the complete frames out of there. Still nothing.

EDIT: Code now snippit of just the problem.

Also, console.log for data and ajax.responseText seem to be generally empty, both during successful "renders" and when it starts iterating ajax is not defined (every other line empty, every other error).

EDIT: New development! Turns out that the error ReferenceError: ajax is not defined anyways gets called between frames (and the 404 when asking dimg if image was created).

EDIT: By typing in console.log($.ajax) after onload and commenting out simg.src I got function ajax().

Error persists, this time I expanded it to reveal the 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 the code to now use Synchronous ajax. This time there are no error messages what so ever, but it still stops at 1640.

Edward
  • 495
  • 1
  • 6
  • 20
  • 2
    A lot of code to go through. Can you condense this into a working snippet for a [**Minimal, Complete, and Verifiable example**](https://stackoverflow.com/help/mcve) to demonstrate the issue? – Nope Sep 12 '17 at 11:33
  • and does it work for smaller farmes? and what does the `console.logs` say? – Edwin Sep 12 '17 at 11:34
  • @Edwin Console.logs are quite empty... Blank breaks in the console between the 404 and ReferenceError. – Edward Sep 12 '17 at 12:24
  • it's a little bit hard to follow you :), can you update your jquery to a newer one? and do you say anything if you do: `console.log($.ajax);`? – Edwin Sep 12 '17 at 12:45
  • @Edwin Is there a newer version than the one at ajax.googleapis.com? Because that is where I'm loading those references from directly. No local copies. – Edward Sep 12 '17 at 16:17
  • Although it is not a good practice, have you tried what happens, if you make the AJAX Synchronous ? (Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.) – halfbit Sep 12 '17 at 19:12
  • just a comment: it looks like you are stressing the net / the server for just an effect, think about moving the logic to the client – halfbit Sep 12 '17 at 19:15
  • @halfbit Like I said, I did try running this on the local server and another computer on the network. You think I should run this from work? Also, I looked up synchronous ajax and implemented that. This time no repeat ReferenceErrors, however it still stopped at 1640, and not a single error message on that. – Edward Sep 13 '17 at 16:45
  • I like errors like this: I suggest to try: stay Synchronous, download only the same picture || download an empty or no picture || don't draw the canvas || don't clear it || take a new canvas with every pic – halfbit Sep 13 '17 at 18:21
  • what do you see in network debugger? – halfbit Sep 13 '17 at 18:21
  • @halfbit Having a look on the `Network` tab from the remote computer reveals the following: `200 GET DGB.1111.png 192.168.1... js img png --- 0 B` ... 200 does mean successful, right? – Edward Sep 14 '17 at 12:12
  • 200 - ok, but 0 B? is what you expect? – halfbit Sep 14 '17 at 18:58
  • Hm... No... ... ¤facepalm¤ Well, the file DOES exist, but is it a valid image? javascript needs a "verbose" flag. – Edward Sep 14 '17 at 20:27

0 Answers0