Tutorial:Graphic Tranformations

This tutorial covers the basics of using graphic transformations.

love.graphics.push/love.graphics.pop

These two functions allow you to save and return to the previous transformation state. Every push must be paired up with a pop, and each pair can also be called within another push/pop.

Here's an example:

function love.draw()
	love.graphics.push() -- store the previous transformation state
		-- shift the coordinate system down 10, right 10
		love.graphics.translate(10,10)
		love.graphics.point(0,0)
	love.graphics.pop() -- return to the previous transformation state
	love.graphics.point(0,0) -- the origin is back @ (0,0)
end

Order of Transformations

Graphic transformations may or may not be commutative. This means the call order affects the final result.

Here's an example:

function love.draw()
	love.graphics.push()
		love.graphics.translate(10,10)
		love.graphics.scale(-1,-1)
		love.graphics.point(10,10) -- the point is located @ global (0,0)
	love.graphics.pop()
	
	love.graphics.scale(-1,-1)
	love.graphics.translate(10,10)
	love.graphics.point(10,10) -- the point is located @ global (-20,-20)
end

There are two ways to visualize the above code.The first way is to think of each transformation as relative to the new coordinate system from previous transformations. For example, the scaling to the first point would be applied relative to the new origin at (10,10).

The second way (which is more intuitive in my humble opinion) is to visualize each transformation in REVERSE ORDER relative to the global coordinate system. Let's take the first point as an example. Scaling is applied first and places the new point @ (-10,-10). Lastly, the translation moves the new point to (0,0).