EriKWDev
commented
2 years ago I wrote an initial explanation of the coordinate system in #16 (https://github.com/EriKWDev/nanim/issues/16#issuecomment-991556512):
The Coordinate System of Nanim
The coordinate system of Nanim is a bit "weird", but it is intentional and has its logic. I have not yet documented it, so here's a start:
No matter what size of canvas you use, coordinates will always map from 0 to 1000 in a square with 500, 500 in the center. If the canvas is not a perfect square, (500, 500) will still remain the center of the canvas, and unit "1000" will represent pixel position min(width, height) + offset as in the picture below:
The reason I did this was that I usually render videos at many different resolutions and want them all to "look the same" - even if the ratio changes!
Here is an example:
import nanim
proc myScene(): Scene =
let
scene = newScene()
square = newSquare(1000) # Fills the height/width of the inner square, no matter canvas size
square.moveTo(500, 500) # Puts square in center, no matter the canvas size
square.stroke(newColor("#db235d"), 10)
square.fill(newColor("#00000000"))
scene.add(square)
return scene
when isMainModule:
render(myScene)Notice now, when I resize the canvas (either by dragging the window or by passing --height:XX, --width:XX and/or --ratio:XX), the square will always fill the smallest of the width and the height and remain in the center:
This all stems from the fact that I scale the canvas using this function: https://github.com/EriKWDev/nanim/blob/eb039590379d9130cecb2a94129e4dbc2b09e35f/src/nanim/core.nim#L361
I should probably both document this behaviour and also add an option to use exact pixels as unit instead.
Todo