# 'Rotate' gradient background

**URL:** <https://discourse.processing.org/t/rotate-gradient-background/39989>\
**Category:** Coding Questions\
**Created:** [December 2, 2022, 2:30pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989 "2022-12-02T14:30:32Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [December 2, 2022, 2:30pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/1 "2022-12-02T14:30:32Z")

</div>

Hi,  
Quick simple question I’m sure but somehow I can’t manage to make it work.  
This code below shows a green to red gradient background from bottom left to top right.  
How can I make it go from bottom right to top left? (as if rotated 90º).  
Thanks

```auto
size(400,400);
noStroke();
colorMode(RGB, 400);
for (int x = 0; x < 400; x++) {
  for (int y = 0; y < 400; y++) {
    stroke(x, y, 0);
    point(400-x, 400-y);
  }
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [December 2, 2022, 3:00pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/2 "2022-12-02T15:00:30Z")

</div>

Hi @Erif,

here is something to play around with…

Cheers  
— mnse

```auto
int mode;
boolean automatic = true;

void setup() {
  size(400, 400);
  noStroke();
  colorMode(RGB, 400);
  mode = 0;
}

void keyPressed() {
  if (!automatic)
    mode = (mode + 1) % 4;
}

void draw() {
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      stroke(x, y, 0);
      switch(mode) {
      case 0:
        point(x, y);
        break;
      case 1:
        point(x, height-y);
        break;
      case 2:
        point(width-x, height-y);
        break;
      case 3:
        point(width-x, y);
        break;
      }
    }
  }

  if (automatic)
    mode = (mode + 1) % 4;
}

```

* * *

![ezgif.com-gif-maker (1)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/7/d799831ec6bd011f0c13979bc231cd8227a90cbd.webp)

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [December 2, 2022, 3:56pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/3 "2022-12-02T15:56:06Z")

</div>

Hi @mnse. Thanks a lot! That’s even more than I was expecting 🙂  
I can definitely use one of these scenarios.  
Cheers

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 2, 2022, 4:59pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/4 "2022-12-02T16:59:22Z")

</div>

Hello @Erif 🙂

Or change your for-loop to:

```auto
for (int x = 400; x > 0; x--) {
  for (int y = 0; y < 400; y++) {
    stroke(x, y, 0);
    point(x, 400-y);
  }

```

🤓

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [December 2, 2022, 11:09pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/5 "2022-12-02T23:09:06Z")

</div>

Hi @debxyz, yeah I was trying this route before haha but I couldn’t find the right one. That does it too for sure, thanks!!  
I can’t mark it as the solution as the platform only allows for one.

---

<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:** [December 3, 2022, 12:48pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/6 "2022-12-03T12:48:13Z")

</div>

Hello @Erif ,

You can also fill() a vertex in a shape.

There is a cool example that comes with Processing in:  
File \> Examples … \> Topics\> Geometry \> RGBCube

An example I cooked up:

```auto
// Gradient Shape
// v1.0.0
// GLV 2022-12-03

void setup()  
  { 
  size(800, 400, P2D); 
  noStroke(); 
  }   
 
void draw()  
  { 
  background(0);
  
  colorMode(RGB);
  
  translate(width/4, height/2); 
  beginShape(QUADS);
  fill(0, 255, 255); vertex(-150, 150);
  fill(255, 255, 255); vertex( 150, 150);
  fill(255, 0, 255); vertex( 150, -150);
  fill(0, 0, 255); vertex(-150, -150);
  endShape();
  
  translate(width/2, 0); 
  
  colorMode(HSB, 360, 100, 100);
  
  beginShape(QUADS);
  fill((frameCount+0)%360, 100, 100); vertex(-150, 150);
  fill((frameCount+90)%360, 100, 100); vertex( 150, 150);
  fill((frameCount+180)%360, 100, 100); vertex( 150, -150);
  fill((frameCount+270)%360, 100, 100); vertex(-150, -150);
  endShape();
  } 

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/a/3a6b087b3c0221db4d1254ebde0cbce7f19d2bc1.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [December 3, 2022, 2:14pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/7 "2022-12-03T14:14:37Z")

</div>

This is super cool too @glv! I’ll check them out as they open multiple possibilities.  
Thanks a lot 👏😄

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [December 5, 2022, 12:21pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/8 "2022-12-05T12:21:32Z")

</div>

Hi @glv , following up on your response I tried to insert that inside a PGraphics class. This is to export later a higher resolution image.  
**The problem I’m encountering is that I can’t obtain the exact same looking gradients on a much larger canvas** (I usually replicate the initial example before tweaking it later on).  
Next step will be to change the hard coded values to renderWidth/Height fractions so when I modify printWidth/Height variables it scales up/down consistently.

 ![Screen Shot 2022-12-05 at 13.20.40](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/a/7a6acf98057fc8f5409d57c92dd6a5504bd109a7.png)

```auto
PGraphics render;
int printWidth = 10;
int printHeight = 10;
int printDpi = 320;
int renderWidth = printWidth * printDpi;
int renderHeight = printHeight * printDpi;

void setup() {
  size(800, 400, P2D);
  render = createGraphics(renderWidth, renderHeight);
}   
 
void draw() {
  render.beginDraw();
  render.background(0);
  
  render.colorMode(RGB);  
  render.translate(renderWidth/4, renderHeight/2); 
  render.beginShape(QUADS);
  render.fill(0, 255, 255); render.vertex(-600, 1200);
  render.fill(255, 255, 255); render.vertex(600, 1200);
  render.fill(255, 0, 255); render.vertex( 600, -1200);
  render.fill(0, 0, 255); render.vertex(-600, -1200);
  render.endShape();

  render.colorMode(HSB, 360, 100, 100);
  render.translate(renderWidth/2, 0);
  render.beginShape(QUADS);
  render.fill((frameCount+0)%360, 100, 100); render.vertex(-600, 1200);
  render.fill((frameCount+90)%360, 100, 100); render.vertex(600, 1200);
  render.fill((frameCount+180)%360, 100, 100); render.vertex( 600, -1200);
  render.fill((frameCount+270)%360, 100, 100); render.vertex(-600, -1200);
  render.endShape();
  
  render.endDraw();
  
  image(render,0,0,width,height);
}

```

Could it be because there are still 255 color values and now the canvas is much larger? So they gradient gets altered. Perhaps increasing the colorMode() range proportionally would do the trick?

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 5, 2022, 3:18pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/10 "2022-12-05T15:18:00Z")

</div>

> [@Erif](#):
>
> Perhaps increasing the colorMode() range

> **[colorMode() / Reference](https://processing.org/reference/colorMode_.html)**
>
> Changes the way Processing interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using t…

Yes, An example of that can be seen here using the bouncing gradient example from HAPPY CODING site:

```auto

//scroll down to setup to see the 2 lines where code changed to increase range

float redX;
float redY;
float redXSpeed;
float redYSpeed;

float greenX;
float greenY;
float greenXSpeed;
float greenYSpeed;

float blueX;
float blueY;
float blueXSpeed;
float blueYSpeed;

void setup() {
  size(256, 256); // ORIGINAL LINE
  
  size(400, 400); // NEW LINE
  colorMode(RGB, 400); // increase the range to match the new width, the gradation now fills the screen at larger size
 
 noSmooth();

  redX = random(width);
  redY = random(height);
  redXSpeed = random(-1, 1);
  redYSpeed = random(-1, 1);

  greenX = random(width);
  greenY = random(height);
  greenXSpeed = random(-1, 1);
  greenYSpeed = random(-1, 1);

  blueX = random(width);
  blueY = random(height);
  blueXSpeed = random(-1, 1);
  blueYSpeed = random(-1, 1);
}

void draw() {

  redX += redXSpeed;
  redY += redYSpeed;
  if (redX < 0 || redX > width) {
    redXSpeed *= -1;
  }
  if (redY < 0 || redY > height) {
    redYSpeed *= -1;
  }

  greenX += greenXSpeed;
  greenY += greenYSpeed;
  if (greenX < 0 || greenX > width) {
    greenXSpeed *= -1;
  }
  if (greenY < 0 || greenY > height) {
    greenYSpeed *= -1;
  }

  blueX += blueXSpeed;
  blueY += blueYSpeed;
  if (blueX < 0 || blueX > width) {
    blueXSpeed *= -1;
  }
  if (blueY < 0 || blueY > height) {
    blueYSpeed *= -1;
  }

  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      float redDistance = dist(x, y, redX, redY);
      float greenDistance = dist(x, y, greenX, greenY);
      float blueDistance = dist(x, y, blueX, blueY);

      stroke(redDistance, greenDistance, blueDistance);
      point(x, y);
    }
  }
}

```

Though I think your code instance is more complex and so this will not be a solution as is.  
🤓

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [December 5, 2022, 10:48pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/11 "2022-12-05T22:48:22Z")

</div>

Thanks for pointing that out @debxyz , actually the corner gradient from Happy Coding is a closer example to what I was looking for 😉

---

<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:** [December 6, 2022, 6:19am UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/12 "2022-12-06T06:19:03Z")

</div>

> [@Erif](#):
>
> The problem I’m encountering is that I can’t obtain the exact same looking gradients on a much larger canvas

Try:

`render = createGraphics(renderWidth, renderHeight, P2D);`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/7/6795b96decfd379aa4522ab919be6ef2cac9444e.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)\
**Post date:** [December 6, 2022, 8:48pm UTC](https://discourse.processing.org/t/rotate-gradient-background/39989/13 "2022-12-06T20:48:23Z")

</div>

Bang on! @glv. It worked like a charm 👏😄 Thanks heaps.