rotate an image by modifying Texture2D.GetPixels32() array

Question

Is there build in function or any code sample that allows to transform Texture2D.GetPixels32() array in such way that output array would correspond to the same image which was rotated around its center by a specific angle?

Answer 1

Best Answer

Answer by qvatra · Apr 14, 2014 at 09:27 PM

finally I've end up with this:

 #pragma strict
 
 var texToDraw : Texture2D;
 var x: int;
 var y: int;
 private var pix1:Color32[];
 private var pix2:Color32[];
 private var pix3:Color32[];
 var angle: int;
 
 function Start (){
         var background : Texture2D = Instantiate(renderer.material.mainTexture);
         pix1 = background.GetPixels32();
         pix2 = texToDraw.GetPixels32();
         var W = texToDraw.width;
         var H = texToDraw.height;
         
 
         
         pix3 = rotateSquare(pix2, Mathf.Deg2Rad*angle);
         
         for (var j = 0; j < H; j++){
             for (var i = 0; i < W; i++) {
                 //pix1[background.width/2 - texToDraw.width/2 + x + i + background.width*(background.height/2-texToDraw.height/2+j+y)] = pix2[i + j*texToDraw.width];
                 pix1[background.width/2 - W/2 + x + i + background.width*(background.height/2-H/2+j+y)] = pix3[i + j*W];
                 
             }
         }
         
         background.SetPixels32(pix1);
         background.Apply();
         renderer.material.mainTexture = background;
 }
 
 function rotateSquare(arr:Color32[], phi:float){
     var x:int;
     var y:int;
     var i:int;
     var j:int;
     var sn:float = Mathf.Sin(phi);
     var cs:float = Mathf.Cos(phi);
     var texture: Texture2D = Instantiate(texToDraw);
     var arr2:Color32[] = texture.GetPixels32();
     var W:int = texture.width;
     var H:int = texture.height;
     var xc: int = W/2;
     var yc: int = H/2;
     
     for (j=0; j<H; j++){
         for (i=0; i<W; i++){
           arr2[j*W+i] = new Color32(0,0,0,0);
           
           x = cs*(i-xc)+sn*(j-yc)+xc;
           y = -sn*(i-xc)+cs*(j-yc)+yc;
           
           if ((x>-1) && (x<W) &&(y>-1) && (y<H)){ 
               arr2[j*W+i]=arr[y*W+x];
           }
         }
     }
     return arr2;
 }

Add comment · Show 4 · Share

robertbu · Apr 14, 2014 at 09:50 PM 0

Share

So you are picking the closest pixel and not generating an interpolated color? I assume the color is close enough?

qvatra · Apr 15, 2014 at 12:09 PM 0

Share

What do you mean by closest pixel? I'm using rotation matrix and translation here to find the exact coordinates for each color pixel. Off-course new coordinates are not always integers so I had to round them... but for the one time rotation the quality is still very good.

Mangas · Jan 23, 2015 at 09:10 AM 0

Share

qvatra would you be so kind as to explain the calculations made in the script?

I kind of need this. I'm rotating a texture inside a Sprite so the rotations in pixel art look as they should, basically deforming themselves while rotating, and I would really like to know what's exactly happening in these sentences:

 x = cs*(i-xc)+sn*(j-yc)+xc;
 y = -sn*(i-xc)+cs*(j-yc)+yc;

What's the meaning of xc and yc? Why are you doing (i - xc) and (j - yc)? I suppose you're using a rotation matrix to do the calculations, but I think I'm still missing something.

Also, I assume X and Y are some kind of offset in the script, though I'm not sure. And the last question, could you explain the math behind this sentence:

pix1[background.width/2 - W/2 + x + i + background.width*(background.height/2-H/2+j+y)] = pix3[i + j*W];

I understand pix3[i + j * W] is the way you run through the whole array, but the left operator is escaping me.

Benjamin_Philipp · Nov 05, 2016 at 06:48 AM 0

Share

Nice, this works! (well, I tried BeauWorlds' c# solution, to be perfectly accurate)

I assume this was written for cases where the output image is supposed to have the same dimensions as the input, since it appears to crop the corners that would lie outside the resulting edges.

It'll take me some time to pick the code apart to provide a solution where the resulting Texture2D will accommodate the rotated corners as well

Answer 2

An excellent answer to your own question! Thank you very much qvarta, you ended a long search for me ! I'm posting this as an answer juste to include a C# version for fellow c# devs! (also I've replaced the floats with doubles and Mathf with System.Math, it improves the accuracy)

using System;

public class ImageRotator {

     public static Texture2D RotateImage(Texture2D originTexture, int angle){
         Texture2D result;

         result = new Texture2D(originTexture.width, originTexture.height);

         Color32[] pix1 = result.GetPixels32();
         Color32[] pix2 = originTexture.GetPixels32();
         int W = originTexture.width;
         int H = originTexture.height;

         int x = 0;
         int y = 0;

         Color32[] pix3 = rotateSquare(pix2, (Math.PI/180*(double)angle), originTexture);

         for (int j = 0; j < H; j++){
             for (var i = 0; i < W; i++) {
                 //pix1[result.width/2 - originTexture.width/2 + x + i + result.width*(result.height/2-originTexture.height/2+j+y)] = pix2[i + j*originTexture.width];
                 pix1[result.width/2 - W/2 + x + i + result.width*(result.height/2-H/2+j+y)] = pix3[i + j*W];

             }
         }

         result.SetPixels32(pix1);
         result.Apply();

         return result;
     }

     static Color32[] rotateSquare(Color32[] arr, double phi, Texture2D originTexture){
         int x;
         int y;
         int i;
         int j;

         double sn = Math.Sin(phi);
         double cs = Math.Cos(phi);
         Color32[] arr2 = originTexture.GetPixels32();
         int W = originTexture.width;
         int H = originTexture.height;
         int xc = W/2;
         int yc = H/2;

         for (j=0; j<H; j++){
             for (i=0; i<W; i++){
                 arr2[j*W+i] = new Color32(0,0,0,0);

                 x = (int)(cs*(i-xc)+sn*(j-yc)+xc);
                 y = (int)(-sn*(i-xc)+cs*(j-yc)+yc);

                 if ((x>-1) && (x<W) &&(y>-1) && (y<H)){ 
                     arr2[j*W+i]=arr[y*W+x];
                 }
             }
         }
         return arr2;
     }
 }

Hope this can help someone, thanks again qvatra !

rotate an image by modifying Texture2D.GetPixels32() array

2 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions