## How would I make an image flip over like a card

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

### How would I make an image flip over like a card

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
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

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
RNavega
Party member
Posts: 317
Joined: Sun Aug 16, 2020 1:28 pm

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

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

blog_ui_rotate_wire.gif (617.42 KiB) Viewed 1012 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.
marclurr
Party member
Posts: 130
Joined: Fri Apr 22, 2022 9:25 am

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

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.
zorg
Party member
Posts: 3459
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

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

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 True 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.
Gunroar:Cannon()
Party member
Posts: 1111
Joined: Thu Dec 10, 2020 1:57 am

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

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
pgimeno
Party member
Posts: 3626
Joined: Sun Oct 18, 2015 2:58 pm

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

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.
zorg
Party member
Posts: 3459
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

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

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 True 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: 317
Joined: Sun Aug 16, 2020 1:28 pm

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

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 (893.74 KiB) Viewed 453 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

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

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()
-- 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.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: 2
Joined: Fri Jul 05, 2024 3:52 am

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

Is this in 3D software?

### Who is online

Users browsing this forum: No registered users and 8 guests