Raphael drawing performance

[rem2]

Hi there
I'm making a project to show how some of algorithms work. Basically i needed to show some drawing pixel by pixel. I made the code
below and tried to run it

 <script>

                   function init() {
                       var paper = Raphael(10, 50, 800, 600);
                       var arr = [];
                       var j = 1;
                       var i = 1;
                       for (var x = 10; x < 800; x = x + 10) {
                           arr[x] = [];
                           for (var y = 50; y < 600; y = y + 10) {
                               arr[x][y] = paper.circle(x, y, 5);
                           }
                       }
                       return arr;
                   }

                   function setPixel(x, y,arr) {
                       var x = x * 10;
                       y = (y + 4)*10;               
                        var arr=init();
                       arr[x][y].attr("fill", "#f00");
                   }
                   function unsetPixel(x, y,arr) {
                       var x = x * 10;
                       y = (y + 4)*10;               
                       var arr=init();
                       arr[x][y].attr("fill", "#fff");
                   }
                   function clear(arr) {
                       for (var i = 1; i < 80; i++) {
                           for (var j = 1; j < 56; j++) {
                               unsetPixel(j, i, arr);
                           }
                       }
                   }
                   var ins = init();

                   for (var i = 1; i < 10; i++) {
                       for (var j = 1; j < 10; j++) {
                           setPixel(j, i, ins);
                       }
                   }

</script>

Basically it creates matrix of big 'pixels'

So far so good drawing 4800 empty circles was nearly instant

Problem started when i wanted to test the filling of them . Opera was filling 9x9 box for nearly 10 minutes , FF gave message about script timed out , Chrome didnt gave a fuck and showed me filled circles after about 10s of page loading.

Whats wrong with this script ? I'm pretty new to JS so sorry for propably some lame mistake or approach to this :d

[gon1387]

I'm quite not sure yet, I haven't tested your code yet(kill me for no doing so. LOL. I've just read the API Doc of Raphael, just now), but it seems your arr is just creating another object of paper in your function "setPixel" and "unsetPixel"

function setPixel(x, y,arr) {
    var x = x * 10;
    y = (y + 4)*10;
    //Creates another object of paper               
    var arr=init();
    arr[x][y].attr("fill", "#f00");
}
function unsetPixel(x, y,arr) {
    var x = x * 10;
    y = (y + 4)*10;
    //Creates another object of paper
    var arr=init();
    arr[x][y].attr("fill", "#fff");
}

Instead try to use and reference the object you've created from your first init. Here's the changed code(removed init):

function setPixel(x, y,arr) {
    var x = x * 10;
    y = (y + 4)*10;
    arr[x][y].attr("fill", "#f00");
}
function unsetPixel(x, y,arr) {
    var x = x * 10;
    y = (y + 4)*10;
    arr[x][y].attr("fill", "#fff");
}

Hope this does the trick and helps. Let me know if you're still having problem, will check the docs further while waiting for your response.

[gon1387]

Hi rem2,

I've studied Raphael's API, here's what I came up: My Sample

Using your code I tweaked it to make the sample I provided. Hope it helps.

The sample will color the circles with red when the dom fully loaded after 1 second, then fill the circles with white after 7 seconds.

Here's the code provided in my sample from the link above:

var myCanvas = Raphael(10, 50, 800, 600), myCoords={}, x, y;

function init(rCanvas, rCoords){
    var    x = 0,
            y = 0;
    for( x=10; x < 800; x+=10) {
        rCoords[x]={};
        for( y=50; y < 600; y+=10){
            rCoords[x][y]=rCanvas.circle(x,y,5).id;
        }
    }
}

function setPixel(x, y, rCanvas, rCoords){
    circle = rCanvas.getById(rCoords[x][y]).attr("fill", "#ff0000");
}

function unsetPixel(x, y, rCanvas, rCoords){
    circle = rCanvas.getById(rCoords[x][y]).attr("fill", "#ffffff");
}

function clear(rCanvas, rCoords){
    var x,y;
    for( x=10; x < 800; x+=10) {
        for( y=50; y < 600; y+=10){
            unsetPixel(x, y, rCanvas, rCoords);
        }
    }
}

init(myCanvas, myCoords);

setTimeout(function(){
    for( x=10; x < 800; x+=10) {
        for( y=50; y < 600; y+=10){
            setPixel(x, y, myCanvas, myCoords);
        }
    }
},1000);

setTimeout(function(){
    for( x=10; x < 800; x+=10) {
        for( y=50; y < 600; y+=10){
            unsetPixel(x, y, myCanvas, myCoords);
        }
    }
},7000);

[rem2]

Thank you guys you're great :D. Its working now ;)