Create Documentation

[EriKWDev]

Todo

• [ ] Add docs page
• [ ] Add comments with runnable examples to common functions
• [ ] Add docstrings to files
• [ ] Add more comprehensive and explained examples
• [ ] Document coordinate system

[EriKWDev]

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.