Page 1 of 1

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

Posted: Sun Jan 02, 2022 11:38 am
by 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

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

Posted: Sun Jan 02, 2022 1:24 pm
by 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.

Gunroar:Cannon() wrote: Sun Jan 02, 2022 11:38 am Edit:
How to do spaces in my comments?
Edit the ASCII figure in a fixed font editor, then use [code]...[/code] tags.

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

Posted: Mon Jan 03, 2022 9:16 am
by 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...?