Setinterval and getImageData

Question

Ok so my problem is this im trying to get a Pixel collision. When im using getImageData in a single function call it works. But if im using Setinterval its like getImageData becomes a Break. The code after getImageData essent being compiled anymore. Why is this happening??

If I do this its works:

checkCollision();
function checkCollision()
{
    var imgData = context.getImageData(0, 0, 10, 10);
    context.log(imgData.data);
}

But if i do this it doesn't work and getImageData is like a Break:

setInterval(checkCollision, 1000 / FPS);
function checkCollision()
{
    var imgData = context.getImageData(0, 0, 10, 10);
    // Code essent being compiled
    context.log(imgData.data);
}

Answer 1

Just chopped and changed some code I found over the net to test the scenario you put forward. Seems to be working for me

The onload event triggers the main function. Once the image is rendered I've added the alert message to confirm whether the code is being called as per the set time interval or not.

Tested the code on webkit and firefox and it seems to be working just fine.

<script type="text/javascript">

function main() {
    window.setInterval("renderImage();",2000);

}

function renderImage(){
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();

  img.addEventListener('load', function () {
    var x = 0,
      y = 0;

    ctx.drawImage(this, x, y);

    var imgd = ctx.getImageData(x, y, this.width, this.height);
    var imxpxl = imgd.data;
    var len=Math.floor(Math.random()*imxpxl.length+1);
    for (var i = 0; i < len; i += 4) {
      imxpxl[i] = 255 - imxpxl[i]; // red
      imxpxl[i + 1] = 255 - imxpxl[i + 1] // green;
      imxpxl[i + 2] = 255 - imxpxl[i + 2] // blue;
      // i+3 is alpha
    }
    ctx.putImageData(imgd, x, y);
    javascript: console.log(imgd.data);
},
  false);

  img.src = './logo.png';

}

</script>

Answer 2

Oke so a litle summary of wat I dit. The script isn't going to work in a normal enviorment like Firefox or internet Explorer if it isn't compiled through a server. Safari and Chrome I dont now I dident try this. But if you use Firefox or Explorer it will give you the Security error" code: "1000. If you are using getImageData and setInterval in combination you need to compile the code on a server. What I use now is "WampServer" (Can be google't) that just makes a virtual server on your computer for the time being. I also posted a nother topic where "Kyle Jones" told me to put this in the script:

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

To ignore the error but it made a break out of the error. Not a real break but the code behind getImageData wassent being compiled anymore. So the thing to do is just compile your code on a Virtual or a real server to look if it works.

The HTML5 Javascript Perfect Pixel collision code:

var FPS = 30;

setInterval(onEnterFrame, 1000 / FPS);

function onEnterFrame()

{

collisionCheck();

}

function collisionCheck() {

// Get pixel Data

var imgData = context2D.getImageData(x_position, y_position, 1, 1);

var imgPixelData = imgData.data;

// Look if there is any Collision (3 is the alpha channel (RGBA))

if (imgPixelData[3] >= 1)

{

 if (window.console) 

 {

        console.log("You go a Hit!!");

 } 

}

}

And thats it run this on a server and you got pixel collision.

I searched arround on the internet and dident find any site geving a good instruction about this so I hope this helps somebody out:).