Most efficient way to draw a picture pixel by pixel?

[sam]

Hello,

in case I have a whole lot(!) of coordinates in an two-dimensional array, what would be the most efficient way to draw them on my window?

With GDI+ I used the LockBits-method like so (just in reverse). Is there anything similar in SFML?

Thanks in advance!  :oops:

[Laurent]

Use your own array of pixels, and pass it to sf::Image when it's completely filled and ready to be displayed. That's the most efficient way of doing it, since all pixels will be transfered to the GPU at once.

[sam]

Use your own array of pixels, and pass it to sf::Image when it's completely filled and ready to be displayed. That's the most efficient way of doing it, since all pixels will be transfered to the GPU at once.

Thank you, but how does the array have to look like?  :?

[Laurent]

It must be an array of sf::Uint8, with size Width * Height * 4. Components are stored in RGBA order.

[Groogy]

It must be an array of sf::Uint8, with size Width * Height * 4. Components are stored in RGBA order.

Is this written somewhere in the documentation? If not that would be quite handy.

[sam]

I don't get it (stupid nonsense example of what I tried follows)  :?

Code: [Select]

sf::RenderWindow window(sf::VideoMode(800, 600, 32), "Test");
sf::Image        image(800, 600, sf::Color(0, 0, 0));
sf::Sprite       sprite;
sf::Uint8        *pixels  = new sf::Uint8[800 * 600 * 4];
// ...
while(window.IsOpened())
{
  // ...
  for(int x = 0; x < 800; x++)
  {
    for(int y = 0; y < 600; y++)
    {
      pixels[y * x]     = 255; // R?
      pixels[y * x + 1] = 255; // G?
      pixels[y * x + 2] = 255; // B?
      pixels[y * x + 3] = 255; // A?
    }
  }
  // ...
  image.LoadFromPixels(800, 600, pixels);
  sprite.SetImage(image);
  window.Draw(sprite);
  window.Display();
}
// ...
delete [] pixels;
// ...


Result:

[Clairvoire]

In the code, you didn't account for x and y needing to move 4 bytes, since every pixel is 4 bytes, but in your array, it's going through it byte by byte.  

Code: [Select]

for(int x = 0; x < 800; x++)
  {
    for(int y = 0; y < 600; y++)
    {
      pixels[(y * x)*4]     = 255; // R?
      pixels[(y * x)*4 + 1] = 255; // G?
      pixels[(y * x)*4+ 2] = 255; // B?
      pixels[(y * x)*4 + 3] = 255; // A?
    }
  }

Made the minor adjustments.  This may be more favourable

[Xorlium]

Check your math there

For example, if x = 2, y =17 and x=17, y =2, you'd be getting always the same colour, but you clearly don't want that.

What you actually want is something like this:

Code: [Select]


for(int x = 0; x < 800; x++)
{
    for(int y = 0; y < 600; y++)
    {
      pixels[4*(x * 600+y)]      = 255; // R?
      pixels[4*(x * 600+y)+1] = 255; // G?
      pixels[4*(x * 600+y)+2] = 255; // B?
      pixels[4*(x * 600+y)+3] = 255; // A?
    }
}


or you might try with y*800+x, I don't remember how sfml expects it right now (it's late!)

Xorlium

[Laurent]

Is this written somewhere in the documentation?

It is written in the documentation of LoadFromPixels, I think. If not, it is at least in SFML 2.

[sam]

In the code, you didn't account for x and y needing to move 4 bytes, since every pixel is 4 bytes, but in your array, it's going through it byte by byte.  

Code: [Select]

for(int x = 0; x < 800; x++)
  {
    for(int y = 0; y < 600; y++)
    {
      pixels[(y * x)*4]     = 255; // R?
      pixels[(y * x)*4 + 1] = 255; // G?
      pixels[(y * x)*4+ 2] = 255; // B?
      pixels[(y * x)*4 + 3] = 255; // A?
    }
  }

Made the minor adjustments.  This may be more favourable

Doh! I guess I was tired yesterday.  :oops:

The example's source code now looks like this:

Code: [Select]

#include <SFML\Graphics.hpp>
#include <SFML\Window.hpp>

int main(int argc, char *argv[])
{
    sf::RenderWindow window(sf::VideoMode(800, 600, 32), "Test");
    sf::Image        image(800, 600, sf::Color(0, 0, 0));
    sf::Sprite       sprite;
    sf::Uint8        *pixels  = new sf::Uint8[800 * 600 * 4];

    while(window.IsOpened())
    {
        for(int x = 0; x < 800; x++)
        {
            for(int y = 0; y < 600; y++)
            {
                pixels[(y * x) * 4]     = 255; // R?
                pixels[(y * x) * 4 + 1] = 255; // G?
                pixels[(y * x) * 4 + 2] = 255; // B?
                pixels[(y * x) * 4 + 3] = 255; // A?
            }
        }

        image.LoadFromPixels(800, 600, pixels);
        sprite.SetImage(image);
        window.Draw(sprite);
        window.Display();
    }

    delete [] pixels;
    return 0;
}

And this is the result:


I kind of expected it to be all white now... :?

For example, if x = 2, y =17 and x=17, y =2, you'd be getting always the same colour, but you clearly don't want that.

No, it's right. I wanted to see if I can get everything to be painted white before I make the next big step (adding the array). That's why I wrote

(stupid nonsense example of what I tried follows)

But I even failed this simple test.  :?

[Laurent]

It's not (x * y * 4), but (x + y * 800) * 4.

Try your formulas with simple numbers like 0, 1, 2 ... you clearly see that the result is wrong

PS: that was a nice effect :lol:

[sam]

It's not (x * y * 4), but (x + y * 800) * 4.

Try your formulas with simple numbers like 0, 1, 2 ... you clearly see that the result is wrong

PS: that was a nice effect :lol:

Where does the 800 come from? Is it the width? So it's (x + y * width) * 4?

[Laurent]

Yes it is.

[Spodi]

Think of it this way: row one (top-left corner to top-right corner) is index 0 to Width. To get to row two (right below row one), you have to add the number of pixels in row one, which is = Width. So (y * Width) is your row offset, and x is your column offset.

[Spidyy]

Errors can lead to some nice and artistic effects