# Flip along the x-axis

**URL:** <https://discourse.processing.org/t/flip-along-the-x-axis/3543>\
**Category:** Coding Questions\
**Created:** [September 15, 2018, 2:17am UTC](https://discourse.processing.org/t/flip-along-the-x-axis/3543 "2018-09-15T02:17:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rsomani95](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rsomani95/32/1539_2.png) [@rsomani95](https://discourse.processing.org/u/rsomani95)\
**Post date:** [September 15, 2018, 2:17am UTC](https://discourse.processing.org/t/flip-along-the-x-axis/3543/1 "2018-09-15T02:17:07Z")

</div>

Here’s some code I’m using to generate a color wheel (you can copy-paste this into your PDE and it should run just fine):

```auto
void setup() {
  size(500, 500);
  noStroke();
  background(255);
  colorMode(HSB, 360, 100, 100);
}

void draw() {
  cw(width/2, height/2, 200, 5);
}

void cw(float x, float y, float r, float spacer) {
  pushMatrix(); translate(x, y); rotate(radians(-90));
  
  for(int i = 0; i < 360; i+= spacer) {
    float x1 = pcx(r, i); float x2 = pcx(r, i+1.5 + spacer);
    float y1 = pcy(r, i); float y2 = pcy(r, i+1.5 + spacer);
    
    noStroke();
    fill(i, 80, 90);
    triangle(0, 0, x1, y1, x2, y2);
  }
  fill(0, 0, 100); ellipse(0, 0, r*1.05, r*1.05);
  
  popMatrix();
}

float pcx(float r, float theta) { return r * cos(radians(theta)); }
float pcy(float r, float theta) { return r * sin(radians(theta)); }

```

I want to flip this output horizontally, so that it would look like this:

 ![16%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1d8ccf5eaf903e96c07ab08dfcd633bc77956b56.png)

I’ve tried `scale(-1, 1)` followed by `translate` but to no avail.

Would be very grateful if you help me out with this. Thank you.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [September 15, 2018, 3:20am UTC](https://discourse.processing.org/t/flip-along-the-x-axis/3543/2 "2018-09-15T03:20:39Z")

</div>

You have the right idea with `scale()`. Put it here:

```auto
void cw(float x, float y, float r, float spacer) {
  pushMatrix(); translate(x, y); rotate(radians(-90)); scale(1,-1); // <---

```

---

<div class="post-metadata">

**Author:** ![rsomani95](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rsomani95/32/1539_2.png) [@rsomani95](https://discourse.processing.org/u/rsomani95)\
**Post date:** [September 15, 2018, 4:57am UTC](https://discourse.processing.org/t/flip-along-the-x-axis/3543/3 "2018-09-15T04:57:44Z")

</div>

Well, that was easier than I thought it would be.  
Thank you!

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [September 15, 2018, 8:03pm UTC](https://discourse.processing.org/t/flip-along-the-x-axis/3543/4 "2018-09-15T20:03:13Z")

</div>

Yep! Also notice that this is actually a “vertical” flip because you’ve already rotated the image somewhat.

Oh, and you get pineapples for asking your question well. 🍍🍍🍍

---

<div class="post-metadata">

**Author:** ![rsomani95](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rsomani95/32/1539_2.png) [@rsomani95](https://discourse.processing.org/u/rsomani95)\
**Post date:** [September 16, 2018, 2:46pm UTC](https://discourse.processing.org/t/flip-along-the-x-axis/3543/5 "2018-09-16T14:46:54Z")

</div>

> Yep! Also notice that this is actually a “vertical” flip because you’ve already rotated the image somewhat.

Yes, I did, and this is what I missed out on earlier. I was trying to use `scale(-1, 1)` while forgetting that I’d already rotated it before and wasn’t getting the order right.

> Oh, and you get pineapples for asking your question well. 🍍🍍🍍

cheers 🙂  
It’s the least one should do when asking for help