# Rotate and flipY axis of multiple RGBpixels images

**URL:** <https://discourse.processing.org/t/rotate-and-flipy-axis-of-multiple-rgbpixels-images/27445>\
**Category:** Coding Questions\
**Created:** [January 28, 2021, 8:59pm UTC](https://discourse.processing.org/t/rotate-and-flipy-axis-of-multiple-rgbpixels-images/27445 "2021-01-28T20:59:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ashk](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@ashk](https://discourse.processing.org/u/ashk)\
**Post date:** [January 28, 2021, 8:59pm UTC](https://discourse.processing.org/t/rotate-and-flipy-axis-of-multiple-rgbpixels-images/27445/1 "2021-01-28T20:59:45Z")

</div>

\<  
I have created 4 images from pixels in a grid format. I want to flip two images in x and y axis. Rotate one image on its own places and keep one as it is. Please help.

PImage source, imgFlipxaxis, imgFlipyaxis, imgFlipxyaxis;  
PFont font;  
float r, angle = 0;

void setup() {  
frameRate(24);  
size(900, 600);  
source = loadImage(“f.png”);  
imgFlipxaxis= createImage(source.width, source.height, RGB);  
imgFlipyaxis= createImage(source.width, source.height, RGB);  
imgFlipxyaxis= createImage(source.width, source.height, RGB);

}

void draw(){  
color p01;  
float r01=0, g01=0, b01=0;  
background(150,150,150);  
//lights();

image(source, 0, 0);  
image(imgFlipxaxis, 0, 300);  
image(imgFlipyaxis, 300, 300);

```
   source.loadPixels();
   imgFlipxaxis.loadPixels();
   imgFlipyaxis.loadPixels();
   imgFlipxyaxis.loadPixels(); 
    
   for (int x = 0; x < source.width; x++) {
   for (int y = 0; y < source.height; y++ ) {
   int loc = x + y*source.width;
   p01 = source.pixels[loc]; // Read color from source01
   r01 = red(p01);       
   g01 = green(p01);     
   b01 = blue(p01);    
   imgFlipxaxis.pixels[loc] = color(r01,g01,b01);  
   imgFlipyaxis.pixels[loc] = color(r01,g01,b01);  
   imgFlipxyaxis.pixels[loc] = color(r01,g01,b01);  
   }}

```

int flipXindex = 0;  
for (int y = source.height-1; y\>= 0; y–) {  
for(int x = 0; x \< source.width; x++) {  
imgFlipxaxis.pixels[flipXindex++] = source.pixels[y\*source.width + x];  
}  
}

int flipYindex = 0;  
for (int x = source.width+1; x\<= 0; x++) {  
for(int y = 0; y \> source.height; y–) {  
imgFlipyaxis.pixels[flipYindex++] = source.pixels[x\*source.height + y];  
}  
}

{  
angle += 0.01;  
pushMatrix();  
translate(width/2, height/2);  
scale(0.5);  
rotate(angle);  
image(imgFlipxyaxis, 600, 300);  
popMatrix();  
}

```
 source.updatePixels();
 imgFlipxaxis.updatePixels();
 imgFlipyaxis.updatePixels();
 imgFlipxyaxis.updatePixels(); 

```

}

>

---

<div class="post-metadata">

**Author:** ![WeinSim](https://avatars.discourse-cdn.com/v4/letter/w/db5fbb/32.png) [@WeinSim](https://discourse.processing.org/u/WeinSim)\
**Post date:** [January 31, 2021, 9:29pm UTC](https://discourse.processing.org/t/rotate-and-flipy-axis-of-multiple-rgbpixels-images/27445/2 "2021-01-31T21:29:45Z")

</div>

Umm I’m not quite sure what exactly you mean, but I’ll try my best to help you.  
Here’s some things you can do with a `PImage`.  
Flip on x-axis:

```auto
color [] oldpixels = i.pixels;
for (int y=0; y<i.height; y++) {
  for (int x=0; x<i.width; x++) {
    i.pixels[y*i.width+x] = oldpixels[y*i.width+(i.width-1-x)];
  }
}

```

Flip on y-axis:

```auto
color [] oldpixels = i.pixels;
for (int y=0; y<i.height; y++) {
  for (int x=0; x<i.width; x++) {
    i.pixels[y*i.width+x] = oldpixels[(i.height-1-y)*i.width+x];
  }
}

```

Rotate clockwise:

```auto
color [] oldpixels = i.pixels;
i = createImage(i.height, i.width, ARGB);
for (int y=0; y<i.height; y++) {
  for (int x=0; x<i.width; x++) {
    i.pixels[y*i.width+x] = oldpixels[(i.height-1-x)*i.width+y];
  }
}

```

Rotate counterclockwise:

```auto
color [] oldpixels = i.pixels;
i = createImage(i.height, i.width, ARGB);
for (int y=0; y<i.height; y++) {
  for (int x=0; x<i.width; x++) {
    i.pixels[y*i.width+x] = oldpixels[x*i.width+(i.height-1-y)];
  }
}

```

I hope this could help you.  
Simon

---

<div class="post-metadata">

**Author:** ![ashk](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@ashk](https://discourse.processing.org/u/ashk)\
**Post date:** [April 6, 2021, 11:43pm UTC](https://discourse.processing.org/t/rotate-and-flipy-axis-of-multiple-rgbpixels-images/27445/3 "2021-04-06T23:43:57Z")

</div>

Thanks for that it worked.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 6, 2021, 11:58pm UTC](https://discourse.processing.org/t/rotate-and-flipy-axis-of-multiple-rgbpixels-images/27445/4 "2021-04-06T23:58:58Z")

</div>

Hello @ashk ,

Welcome!

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

It helps us and it helps you.

`:)`