How to "transform(?)" an image to be bouncy

[Gunroar:Cannon()]

I want to make a ui that bounces and stretches the menu grid when pressed. I don't know how to go about this, but I think transforms (and maybe shaders) wpuld be the way.

From this

Code: Select all

_________
|       |
|       |
|_______|

To a bounce like

Code: Select all

__________
\        /
 )      (
/________\

Kind of.

Edit:
How to do spaces in my comments?

Edit:
Thanks

[pgimeno]

If the deformation is not a parallelogram, I can only think of two ways: with a pixel shader, or making the shape be a grid (a mesh) and moving the vertices.

If it is a parallelogram, then Löve's transformation parameters suffice.

This is an example of a parallelogram deformation (in particular, a rectangle). This can be done with just love.graphics.draw parameters.

Code: Select all

          +----+
          |    |
          |    |
          |    |
          +----+
--------------------------



         +------+
         |      |
         |      |
---------+------+---------

If you want e.g. the sides to curve, the difficulty increases considerably.

Example of bouncing parallelogram attached.

Edit:
How to do spaces in my comments?

Edit the ASCII figure in a fixed font editor, then use [code]...[/code] tags.

[Gunroar:Cannon()]

Oh, nice. Will examine it.
Though I was hoping for something where I won't have to mess with the way may ui lib draws its stuff...?