# Rotate image implementation

**URL:** <https://discourse.processing.org/t/rotate-image-implementation/5615>\
**Category:** Coding Questions\
**Created:** [November 17, 2018, 2:23am UTC](https://discourse.processing.org/t/rotate-image-implementation/5615 "2018-11-17T02:23:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![molo32](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@molo32](https://discourse.processing.org/u/molo32)\
**Post date:** [November 17, 2018, 2:23am UTC](https://discourse.processing.org/t/rotate-image-implementation/5615/1 "2018-11-17T02:23:56Z")

</div>

I’m implementing the matrix rotation from here

> **[Rotation matrix](https://en.wikipedia.org/wiki/Rotation_matrix)**
>
> In linear algebra, a rotation matrix is a matrix that is used to perform a rotation in Euclidean space. For example, using the convention below, the matrix
> rotates points in the xy-plane counterclockwise through an angle θ about the origin of the Cartesian coordinate system. To perform the rotation using a rotation matrix R, the position of each point must be represented by a column vector v, containing the coordinates of the point. A rotated vector is obtained by using the matrix multiplication...

My code works but the rotated image has holes, I guess it’s because of the rounding of the values of sin () and cos ()

How to fill the holes in the rotated image?

```auto

PImage img;

int angle=0;

int xpos=0;
int ypos=0;

void setup()
{
  size(370, 360, P3D);
  
  loadPixels();  
img = loadImage("img.png");
  img.loadPixels(); 

 updatePixels(); 
  background(0);
}

void draw()
{
 background(0);
loadPixels();

updatePixels();

//increment angle 
 if (keyPressed && key=='v'){  
   angle+=1;
 }
 
 

 
 

   for(int xx = 1; xx < img.width ; xx++)
{
    for(int yy = 1; yy < img.height-1 ; yy++)
 {
 
xpos=(100+floor((xx)*cos(radians(angle)))-floor((yy)*sin(radians(angle))));
ypos=(180+floor((xx)*sin(radians(angle)))+floor((yy)*cos(radians(angle)))); 

if (ypos>1 && ypos<height){
  setpixel( xpos, ypos, getpixel(img,xx,yy));
}
}
}

ellipse(100,180,10,10);

}//fin draw

void setpixel(PImage arr , int x, int y , color col)
{
arr.pixels[x+arr.width*y]=color(col);
}

void setpixel(PGraphics arr , int x, int y , color col)
{
arr.pixels[x+arr.width*y]=color(col);
}

void setpixel( int x, int y , color col)
{
pixels[x+width*y]=color(col);
}

int getpixel(PGraphics arr, int x, int y )
{
return int(arr.pixels[x+arr.width*y]);
}

int getpixel( int x, int y )
{
return int(pixels[x+width*y]);
}

int getpixel(PImage arr, int x, int y )
{
return int(arr.pixels[x+arr.width*y]);
}

```

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [November 17, 2018, 9:07am UTC](https://discourse.processing.org/t/rotate-image-implementation/5615/2 "2018-11-17T09:07:24Z")

</div>

There is easier way to rotate an image, try this:-

```java
PImage img;
int angle = 0;

void setup() {
  size(370, 360, P2D);
  smooth(8);
  img = loadImage("img.png");
  imageMode(CENTER); 
}

void draw() {
  background(0);
  fill(255);
  translate(width / 2, height / 2);
  rotate(angle * TWO_PI / 360);
  image(img, 0, 0, 300, 300);  
  ellipse(170,0,10,10); // corrected for translation
}

void keyPressed(){
  if (key == 'v'){
    angle += 1;
  }
}

```

Also I don’t know why you are specifying `P3D` mode? If you don’t want ellipse to rotate wrap rotation stuff with [pushMatrix()/popMatrix()](https://www.processing.org/reference/pushMatrix_.html).

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [November 17, 2018, 11:17am UTC](https://discourse.processing.org/t/rotate-image-implementation/5615/3 "2018-11-17T11:17:32Z")

</div>

Hi molo32,

You are marching through your source picture. What you should do instead is marching through the destination picture. Then you can compute from which pixel of the original image it comes from. This way you assure that you won’t miss any.

Of course you’ll never get an exact pixel so after it is up to you to decide how to deal with that problem: choosing the closest pixel only, compute the average weighted by distance or by surface area…