How would I make an image flip over like a card

General discussion about LÖVE, Lua, game development, puns, and unicorns.
User avatar
Gunroar:Cannon()
Party member
Posts: 1142
Joined: Thu Dec 10, 2020 1:57 am

How would I make an image flip over like a card

Post by Gunroar:Cannon() »

I can't just set its scale to negative no? Please is this possible? Maybe with shaders?
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
Xugro
Party member
Posts: 114
Joined: Wed Sep 29, 2010 8:14 pm

Re: How would I make an image flip over like a card

Post by Xugro »

Change its scale from 1 to 0 and then display the backside with its scale changing from 0 to 1. Use the cosine function to make it more realistic. I attached a simple example.
Attachments
card_flip.love
(22.91 KiB) Downloaded 1934 times
RNavega
Party member
Posts: 385
Joined: Sun Aug 16, 2020 1:28 pm

Re: How would I make an image flip over like a card

Post by RNavega »

They used Xugro's technique in DOOM 3 for the in-game displays:

blog_ui_rotate_wire.gif
blog_ui_rotate_wire.gif (617.42 KiB) Viewed 15202 times

Though in that case there was no backside since that symbol is symmetric and textless, it just bounces back up when the horizontal scale goes to zero.
User avatar
marclurr
Party member
Posts: 158
Joined: Fri Apr 22, 2022 9:25 am

Re: How would I make an image flip over like a card

Post by marclurr »

That Doom screen is almost certainly just using the result of math.sin as the scale. It's quite an economical implementation, it can be done in about 2 lines of code.
User avatar
zorg
Party member
Posts: 3468
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: How would I make an image flip over like a card

Post by zorg »

Gunroar:Cannon() wrote: Thu Jul 25, 2024 5:57 pm I can't just set its scale to negative no? Please is this possible? Maybe with shaders?
I mean, did you try that?
Because yes, you absolutely can. Negative scale shows the image mirrored on whatever axis you're scaling it negatively.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
User avatar
Gunroar:Cannon()
Party member
Posts: 1142
Joined: Thu Dec 10, 2020 1:57 am

Re: How would I make an image flip over like a card

Post by Gunroar:Cannon() »

zorg wrote: Fri Jul 26, 2024 9:40 am
Gunroar:Cannon() wrote: Thu Jul 25, 2024 5:57 pm I can't just set its scale to negative no? Please is this possible? Maybe with shaders?
I mean, did you try that?
Because yes, you absolutely can. Negative scale shows the image mirrored on whatever axis you're scaling it negatively.
That would just slide, zorg. Won't ...really look like a card flipping over. Just maybe at best like a 2D sprite turning around if that makes sense. (It won't look like a card flip. In short. Yes, of course I tried that).
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
pgimeno
Party member
Posts: 3672
Joined: Sun Oct 18, 2015 2:58 pm

Re: How would I make an image flip over like a card

Post by pgimeno »

This is why I usually don't bother replying your threads: because you're too vague, and very often, when you're given answers that do satisfy your vague requests in a certain way, you reject them because they don't satisfy them in the way you have in mind, which you didn't state since the beginning. Sometimes, like in this case, you don't even specify what additional requisites you have in mind even after you've been answered.

Improving your communication skills would help you get help, and would help others avoid getting frustrated by your rejections of their attempt to help. It's something you might try working on.

Based on the little information you've given and the solutions you've rejected, one guess would be that you might be after a full 3D effect. There are at least three ways to accomplish this:

1. Use full 3D. You need a projection matrix (the one that causes a 3D effect), a model matrix (the one that positions your model, in this case your card) and a view matrix (the camera). The model matrix should probably the one that varies, rotating the texture over the Y axis. You need a vertex shader that can take these matrices as uniforms. You probably don't need a custom mesh though.
2. Use a ray casting algorithm just for the card.
3. Use a special quad 3D-projection shader like this: viewtopic.php?t=12483
User avatar
zorg
Party member
Posts: 3468
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: How would I make an image flip over like a card

Post by zorg »

Gunroar:Cannon() wrote: Thu Aug 01, 2024 12:53 am
zorg wrote: Fri Jul 26, 2024 9:40 am
Gunroar:Cannon() wrote: Thu Jul 25, 2024 5:57 pm I can't just set its scale to negative no? Please is this possible? Maybe with shaders?
I mean, did you try that?
Because yes, you absolutely can. Negative scale shows the image mirrored on whatever axis you're scaling it negatively.
That would just slide, zorg. Won't ...really look like a card flipping over. Just maybe at best like a 2D sprite turning around if that makes sense. (It won't look like a card flip. In short. Yes, of course I tried that).
I forgot to say that you also need to fix the center constantly, so it doesn't slide, but rather vanishes into the centerpoint, then appears again; there might be a simple solution to this by setting the ox and oy parameters, but i'm not sure. Still, if that's not enough, then go for the options pgimeno gave you above.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
RNavega
Party member
Posts: 385
Joined: Sun Aug 16, 2020 1:28 pm

Re: How would I make an image flip over like a card

Post by RNavega »

I wanted to try this out.
It took me a bit of time getting it to work, following the MDN docs and some other resources on the web.
If you only want a 3D card flip effect like you get with CSS rotate3d() on webpages, you can use a shader in this way. The foreshortening effect is adjustable as a constant in the shader:

card_flip_effect.gif
card_flip_effect.gif (893.74 KiB) Viewed 14643 times

Code: Select all

-- CSS-like 3D card flipping effect.
-- By Rafael Navega (2024).
--
-- Public Domain.

io.stdout:setvbuf('no')


local img
local img_tf
local img_size

local SPEED = 0.03
local s = 0.0
local dir = nil

function love.load()
    img = love.graphics.newImage('temp.png')
    img_tf = love.math.newTransform(400 - img:getWidth() / 2.0,
                                    300 - img:getHeight() / 2.0)
    img_size = {img:getDimensions()}
end


function love.update(dt)
    if dir then
        s = s + SPEED * dir
        if s <= 0.0 then
            s = 0.0
            dir = nil
        elseif s >= 1.0 then
            s = 1.0
            dir = nil
        end
    end
    if love.keyboard.isDown('right') then
        s = s + 0.01
        if s >= 1.0 then s = 1.0 end
    end
    if love.keyboard.isDown('left') then
        s = s - 0.01
        if s <= 0.0 then s = 0.0 end
    end
end


local myShader = love.graphics.newShader(
[[// Angle in radians.
uniform float a;

// Transform that you want the image to be drawn with.
uniform mat4 image_tf;

// Image size in pixels.
uniform vec2 image_size;

vec4 position(mat4 transform_projection, vec4 vertex_position)
{
    float xc = image_size.x / 2.0;
    float yc = image_size.y / 2.0;
    mat4 origin_mat = mat4(1.0, 0.0, 0.0, 0.0,
                           0.0, 1.0, 0.0, 0.0,
                           0.0, 0.0, 1.0, 0.0,
                           -xc, -yc, 0.0, 1.0);

    mat4 rotate_y_mat = mat4( cos(a), 0.0, sin(a), 0.0,
                                 0.0, 1.0,    0.0, 0.0,
                             -sin(a), 0.0, cos(a), 0.0,
                                 0.0, 0.0,    0.0, 1.0);

    // Setting this to -1.0 will flip the direction of rotation.
    const float ROTATION_SIGN = 1.0;

    // A factor that controls the foreshortening (the perspective effect).
    // Suggested numbers: 500.0, 1000.0, 5000.0, 10000.0 etc.
    const float FORESHORTENING = 1000.0;

    // A large number to keep Z coordinates from clipping out of the screen.
    // Try setting this to like 10.0 to see why it's needed.
    const float Z_COMPRESSION = 10000.0;

    mat4 css_projection_mat = mat4(
    1.0, 0.0, 0.0, 0.0,
    0.0, 1.0, 0.0, 0.0,
    0.0, 0.0, 1.0 / Z_COMPRESSION, ROTATION_SIGN / FORESHORTENING,
    0.0, 0.0, 0.0, 1.0);

    mat4 restore_mat = mat4(1.0);
    restore_mat[3] = vec4(xc, yc, 0.0, 1.0);

    vec4 perspective_position = restore_mat * css_projection_mat * rotate_y_mat
                                * origin_mat * vertex_position;
    return transform_projection * image_tf * perspective_position;
}]]
)


function love.draw()
    love.graphics.setShader(myShader)
    myShader:send('a', s * math.pi)
    myShader:send('image_tf', img_tf)
    myShader:send('image_size', img_size)
    -- NOTE: do not position the image, or else it'll be offset from the origin.
    --       Use the "img_tf" transform to control where you want to draw it.
    love.graphics.draw(img)
    love.graphics.setShader()

    love.graphics.print('- Press Space to flip the card.', 10, 10)
    love.graphics.print('- Press Left or Right to manually rotate the card.', 10, 30)
    love.graphics.print('- Press Esc to quit.', 10, 50)
    love.graphics.print(('Angle: %.2f'):format(s * 180.0), 10, 70)
end


function love.keypressed(key)
    if key == 'escape' then
        love.event.quit()
    elseif key == 'space' then
        if not dir then
            if s > 0.5 then
                dir = -1
            else
                dir = 1
            end
        else
            dir = -dir
        end
    end
end
lmnvzhg@outlook.com
Prole
Posts: 3
Joined: Fri Jul 05, 2024 3:52 am

Re: How would I make an image flip over like a card

Post by lmnvzhg@outlook.com »

Is this in 3D software?
Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests