# '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:** 1
**Showing post:** 6

<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)

`:)`

---

_[View the full topic](https://discourse.processing.org/t/rotate-gradient-background/39989)._