SFML community forums

Help => Graphics => Topic started by: masskiller on October 20, 2012, 02:38:13 am

Title: Image Deformation in SFML
Post by: masskiller on October 20, 2012, 02:38:13 am
Say I want to take an image that is a straight line with colors effects and whatnot, does SFML allow me to deform that image into a shape? I want to make a laser that bends as it moves using only one image, so I was wondering if this was possible as I had never seen it before in SFML.
Title: Re: Image Deformation in SFML
Post by: Laurent on October 20, 2012, 09:04:47 am
You can map a texture on any geometry. You can create any geometry with a vertex array. So, yes ;)
Title: Re: Image Deformation in SFML
Post by: Haikarainen on October 20, 2012, 03:01:26 pm
Say I want to take an image that is a straight line with colors effects and whatnot, does SFML allow me to deform that image into a shape? I want to make a laser that bends as it moves using only one image, so I was wondering if this was possible as I had never seen it before in SFML.

Doing this in realtime using sf::Image would probably be very slow. Do it using a rendertexture and shaders instead. Or better yet calculate the laser path and draw it using sf::Shape(and perhaps apply a shader to make it more.. lasery..)

For "true" image deformation (think skew, perspective etc in photoshop), bind your texture to a quad(sf::Shape or even better pure opengl since youll also get depth) or whatnot which you draw to a rendertexture. That way you can save the rendertexture to an image or do whatever you wish with it.
Title: Re: Image Deformation in SFML
Post by: FRex on October 20, 2012, 06:35:25 pm
Take a texture of straight laser beam and map it onto a triangle strip to get bending line? Or fan to get circle.
Title: Re: Image Deformation in SFML
Post by: masskiller on October 20, 2012, 07:18:16 pm
Can you please give me a code example of how to do it? I was also thinking on making it bend in curves. I'll post a youtube example of what I mean with this: http://www.youtube.com/watch?v=SunCHEC2Q0E (http://www.youtube.com/watch?v=SunCHEC2Q0E)

in minute 2:30 you can see the kind of effect I want to reproduce.
Title: Re: Image Deformation in SFML
Post by: Laurent on October 20, 2012, 07:38:34 pm
Quote
Can you please give me a code example of how to do it?
Don't you want to try yourself first? ;)
Title: Re: Image Deformation in SFML
Post by: masskiller on October 20, 2012, 07:58:01 pm
I would if I had the slightest idea of how to start. I've never used textures in anything other than simply setting a texture based on an image, so I have no idea how to start that's the reason I didn't give any code for starters.

For example this:
Quote
Take a texture of straight laser beam and map it onto a triangle strip to get bending line? Or fan to get circle.

Sounds simple enough, but I don't have the slightest clue of how to bring the explanation to practice, I'm still new to game programming.
Title: Re: Image Deformation in SFML
Post by: FRex on October 20, 2012, 08:39:43 pm
It's quite hard, yes. Try playing with this, it's interesting enough that I might try come up with a class to do that instead in the next week when I'm bored during C lecture.
int main(int argc,char * argv[])
{
        int i=0;
        sf::Vector2f coords[2];

        coords[1]=sf::Vector2f(0.f,64.f);
        coords[0]=sf::Vector2f(64.f,64.f);
       
        sf::Texture one;
        one.setSmooth(true);
        one.loadFromFile("laser.tga");
        sf::VertexArray arr(sf::TrianglesStrip);
        arr.append(sf::Vertex(sf::Vector2f(0.f,0.f),sf::Vector2f(0.f,0.f)));
        sf::RenderWindow app(sf::VideoMode(600,600),"aha");
        while(1)
        {
                sf::Event eve;
                while(app.pollEvent(eve))
                {
                        if(eve.type==sf::Event::MouseButtonPressed)
                        {
                                ++i;
                                arr.append(sf::Vertex(app.convertCoords(sf::Vector2i(eve.mouseButton.x,eve.mouseButton.y)),coords[i%2]));
                        }
                }
                app.clear();
                app.draw(arr,&one);
                app.display();
        }

       
}

Quote
For example this:
Quote

    Take a texture of straight laser beam and map it onto a triangle strip to get bending line? Or fan to get circle.


Sounds simple enough, but I don't have the slightest clue of how to bring the explanation to practice, I'm still new to game programming.
Me too. :)
But this is quite logical conclusion, since everything in video card is made of triangles, and sfml let's you set each triangle's position and texture mapping..
Title: Re: Image Deformation in SFML
Post by: Laurent on October 20, 2012, 11:24:44 pm
Quote
I would if I had the slightest idea of how to start
The online documentation (until tutorials are written), under "Texture" and "VertexArray" ;)
Title: Re: Image Deformation in SFML
Post by: masskiller on October 20, 2012, 11:43:26 pm
After playing around with FRex's code I comprehend a bit on how to do it for shapes. I can't just yet figure how to do it with curves, but I'll probably do that later since I don't need it right away (in fact neither did the shaping of a laser in general, I just had a bad set of priorities), I'll probably need it later, but at least now I understand a bit how to handle VertexArrays which I had no clue at all. Thanks for the help so far.

Quote
The online documentation (until tutorials are written), under "Texture" and "VertexArray" ;)

Guess where I am now   ;D

btw, regarding tutorials, Is there an estimate date for them to be done or is "when it's done" the current answer?
 
Title: Re: Image Deformation in SFML
Post by: FRex on October 21, 2012, 12:11:45 am
Not promissing anything but a class to do that* might happen withing next week since I have lots of time I sit around do nothing. ;D

* that = map a texture onto a cuve nicely so it looks like it's a bending line of something
Title: Re: Image Deformation in SFML
Post by: Contadotempo on October 21, 2012, 01:23:24 am
There's this class on the wiki:
http://www.sfml-dev.org/wiki/en/sources/stroke

Although I haven't tested it myself it might give you what you're looking for (check the demonstration video). It was written by Spiddy, who is also working on a SHMUP I believe.
Title: Re: Image Deformation in SFML
Post by: Laurent on October 21, 2012, 09:48:18 am
Quote
btw, regarding tutorials, Is there an estimate date for them to be done or is "when it's done" the current answer?
Always the same answer... sorry :D
Title: Re: Image Deformation in SFML
Post by: masskiller on October 21, 2012, 11:42:02 pm
There's this class on the wiki:
http://www.sfml-dev.org/wiki/en/sources/stroke

Although I haven't tested it myself it might give you what you're looking for (check the demonstration video). It was written by Spiddy, who is also working on a SHMUP I believe.

This class looks amazing, too bad I can't download anything due to it being hosted in megaupload. Though it's not exactly what (though it holds the functionality to do so) I want it's bound to give me ideas if I could look at the code.
Title: Re: Image Deformation in SFML
Post by: FRex on October 22, 2012, 02:47:26 am
The .cpp and .h of class are on the site, just the demo project isn't. ;)
Title: Re: Image Deformation in SFML
Post by: Laurent on October 22, 2012, 08:58:40 am
It's an old code based on the SFML 1.6 renderer. The implementation would be totally different with SFML 2.
Title: Re: Image Deformation in SFML
Post by: FRex on October 22, 2012, 12:24:16 pm
Oh, I can't read it for a few more days so I didn't know. :-X
It's mindblowing to achieve this without vertices from 2.0
Title: Re: Image Deformation in SFML
Post by: Spidyy on October 24, 2012, 10:35:12 pm
Someone really wanted to use the Stroke class, so I'm working on it to port it to SFML 2.0 and give it a few enhancements.

And regarding this, what would be the faster way to display dynamic mesh? Directly calling glVertex3, like the old renderer.AddVertex(), or using a vertex array we clear and rebuild each frame?
Title: Re: Image Deformation in SFML
Post by: eXpl0it3r on October 24, 2012, 10:43:22 pm
And regarding this, what would be the faster way to display dynamic mesh? Directly calling glVertex3, like the old renderer.AddVertex(), or using a vertex array we clear and rebuild each frame?
The 'clean' way would probably be to use a sf::VertexArray or use your own arrays of sf::Vertex, SFML will then pass that on to OpenGL, but if you really want to watch out for 'fast' as in performance, then the direct OpenGL calls might be faster. ;)
Title: Re: Image Deformation in SFML
Post by: Laurent on October 24, 2012, 10:50:25 pm
OpenGL (if used optimally) will always be faster than something which is a layer on top of OpenGL ;)
Title: Re: Image Deformation in SFML
Post by: Spidyy on October 24, 2012, 10:54:00 pm
Roger
Title: Re: Image Deformation in SFML
Post by: Laurent on October 24, 2012, 11:10:40 pm
... but SFML vertex arrays should be more than enough for that ;)
Title: Re: Image Deformation in SFML
Post by: Spidyy on October 24, 2012, 11:11:52 pm
Roger (bis)
Title: Re: Image Deformation in SFML
Post by: eXpl0it3r on October 24, 2012, 11:20:04 pm
If someone can't wait to get a 'working' copy of the class, I've rewritten the rendering part, but since I don't quite know on how to handle the class to get nice effects, I can't really test everything, anyways here you go (https://legacy.sfmluploads.org/file/151). ;)
You could for instance use to get to know the class a bit better and then once Spidyy will have finished the remake (with different function names and improvements ;) ) you should definitely use his version.
Title: Re: Image Deformation in SFML
Post by: masskiller on October 25, 2012, 01:06:23 am
Quote
If someone can't wait to get a 'working' copy of the class, I've rewritten the rendering part, but since I don't quite know on how to handle the class to get nice effects, I can't really test everything, anyways here you go. ;)

I wasn't really that eager for it, but it is very well appreciated, I'll be able to give it a lot of use. Thanks.

Quote
You could for instance use to get to know the class a bit better and then once Spidyy will have finished the remake (with different function names and improvements ;) ) you should definitely use his version.

I'll most likely will. I at least now have a bit more of understanding towards vertexes (openGL forces you to) so I'll be able to take far more from the code now than I would have before getting into it.