Getting $x,y$ position on an image based on given value

Question

This should be simple but my math skills are really bad ...

I have an image of 36 images (6 by 6 matrix). These small images are 36 instances of a direction arrow (like from Google maps GPS), each image rotated by $10^\circ$ from $0^\circ$ to $350^\circ$.

I don't know how to get image $X$ and $Y$ position of each small image when I have the rotation amount. Images are $50\times50\,\mathrm{px}$, so...

• for $10^\circ$ image is at $50\times0\,\mathrm{px}$,
• for $20^\circ$ image is at $100\times0\,\mathrm{px}$
• for $90^\circ$ image is at $150\times50\,\mathrm{px}$ (because it is on row 2)
• ...
• for $350^\circ$ image is at $250\times250\,\mathrm{px}$

What is the formula to get this $X-Y$ value?

Answer 1

Should be something like X=(degrees mod 60)*5, Y=(degrees div 60)*50

Answer 2

Given that the angle of the $n$^th image is $n\cdot10^\circ$ for $n=0,1,\dots,35$, you can have the $y$-index $j$ to be $\lfloor{n/6}\rfloor$ (int part of $n/6$) and the $x$-index $i$ to be $n-6j$.

You then multiply $i$ and $j$ for the respective $\Delta x$ and $\Delta j$ which in your problem is $50\,\mathrm{px}$ each. \begin{align} j &= \lfloor{n/6}\rfloor \\ i &= n-6j \\ x &=i\cdot50\,\mathrm{px} \\ y &=j\cdot50\,\mathrm{px} \end{align}

Programaticaly (this will be pseudocode, but you might be able to adapt to your language of choice):

for n = 0 to 35:
    j = n div 6
    i = n mod 6
    draw( rotate(figure,10*n), i*50, j*50 )
next

Where n div 6 means integer division (quotient from integer division) and n mod 6 means modulo operator (residue from integer division). In C and other C-inspired language they are respectively n/6 and n%6. Language with no strong integer classes you might need to write j = int(n/6) and i=n-6*j .

Answer 3

I was able to do it by this PHP code, calculating row and column number:

$box_number = floor($angle/10);
$row_number = floor($box_number/6);
$col_number = $box_number-(floor($box_number/6)*6);

$image_x = 50*$col_number;
$image_y =  50*$row_number;

Just that at the end I had to manually force the value of 360° to be the same as 0° (0x0px)