# Rainbow + gradient
**URL:** https://discourse.processing.org/t/rainbow-gradient/27858
**Category:** Coding Questions
**Tags:** homework
**Created:** [February 16, 2021, 2:40am UTC](https://discourse.processing.org/t/rainbow-gradient/27858 "2021-02-16T02:40:51Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Apollo](https://discourse.processing.org/u/Apollo)
#### Post date: [February 16, 2021, 2:40am UTC](https://discourse.processing.org/t/rainbow-gradient/27858/1 "2021-02-16T02:40:51Z")
Good day!
Can you pretty please assist me here?
How can I exactly make this colorful box in processing?
The colors got specific positioning… And It really requires some hardcore coding (I think).
Thank you in advance!
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 16, 2021, 6:33am UTC](https://discourse.processing.org/t/rainbow-gradient/27858/2 "2021-02-16T06:33:47Z")
Maybe 2 nested for loop with double lerpColor()?
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [February 16, 2021, 7:05am UTC](https://discourse.processing.org/t/rainbow-gradient/27858/3 "2021-02-16T07:05:24Z")
Something like this?
(two similar ways of doing it)
> **code**
>
> ```auto
> void setup() { size(800,400); }
> void draw() {
> loadPixels();
> int w = width/2, h = height;
> for(float i = 0; i < w; i++) for(float j = 0; j < h; j++) {
> color clr = color(map(j,0,h,255,0),map(i,0,w,0,255),map(j,0,h,0,255));
> pixels[floor(i+j*width)] = clr;
> float red = lerp(255,0,j/h), green = lerp(0,255,i/h), blue = lerp(0,255,j/h);
> pixels[floor(i+w+j*width)] = color(red,green,blue);
> }
> updatePixels();
> noLoop();
>
> }
>
> ```
edit: It is inverted, but you can just swap the red and blue values to get it right
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [February 16, 2021, 7:27am UTC](https://discourse.processing.org/t/rainbow-gradient/27858/4 "2021-02-16T07:27:20Z")
> [@Apollo](#):
>
> some hardcore coding (I think).
it doesn’t. Here is a program I made. Play with mouse and see.
> **Code**
>
> ```auto
> void setup() {
> size(600,600);
> }
> void draw() {
> background(0);
> displayGradient(0,0,mouseX,mouseY);
> }
> void displayGradient(float x, float y, float w, float h) {
> loadPixels();
> if(frameCount % 10 == 0) println(x,y,w,h);
> for(float i = 0; i < abs(w); i++) for(float j = 0; j < abs(h); j++) {
> int nx = constrain(floor(i+x*((w>0)? 1 : -1)),0,width-1), ny = constrain(floor(j+y*((h>0)? 1 : -1)),0,height-1);
> color clr = color(lerp(0,255,abs(j/h)),lerp(0,255,abs(i/w)),lerp(255,0,abs(j/h)));
> pixels[nx+ny*width] = clr;
> }
> updatePixels();
> }
>
> ```
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [February 16, 2021, 7:29am UTC](https://discourse.processing.org/t/rainbow-gradient/27858/5 "2021-02-16T07:29:27Z")
If you don’t understand anything, I can help you. It’s quite simple actually if you are familiar with map() or lerp()
---
### Author:  [@Apollo](https://discourse.processing.org/u/Apollo)
#### Post date: [February 18, 2021, 5:37am UTC](https://discourse.processing.org/t/rainbow-gradient/27858/6 "2021-02-18T05:37:44Z")
wow, that’s nice. Thanks!