I'm trying to transform from regular math coordinates to computer pixel coordinates as shown.
1) Each unit on left system equals $20$ units in right system.
2) On left system, the origin is at center, that is at $(100, 100)$ in pixel coordinates. On right system the origin is at top left corner.
By trial and error I managed to arrive at below formulas :
$$(x,y) \to (20x+100, -20y+100)$$
But I'm finding it a bit hard to explain myself why they work. For example, if I try to interpret the y transformation as $-20(y-10)$ I feel lost. Could some kind soul dumb it down for me please. Appreciate any help. Thanks!
The transformation is a sequence of 3 steps:
1) Shift the origin to $(5,-5)$: $$\begin{align}x'=x+5\\y'=y-5.\end{align}$$ 2) Scale by 20: $$\begin{align}x''=20x'\\y''=20y'.\end{align}$$ 3) Flip along the $y$-axis: $$\begin{align}x'''=x''\\y'''=-y''.\end{align}$$ Combining all 3 steps you get $$\begin{align}x'''=20(x+5)\\y'''=-20(y-5)\end{align}$$ as desired.
P.S. And of course, $-20y+100=-20(y-\mathbf{5})$ ;-).