Rainbow + gradient

Processing Coding Questions
1

Good day!

Can you pretty please assist me here?

How can I exactly make this colorful box in processing?

W.4.2.Screenshot

The colors got specific positioning… And It really requires some hardcore coding (I think).

Thank you in advance!

2 Likes
2

Maybe 2 nested for loop with double lerpColor()?

3

Something like this?

image
image800×426 33.6 KB

(two similar ways of doing it)

code 
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

2 Likes
4

it doesn’t. Here is a program I made. Play with mouse and see.

image
image601×626 26 KB

Code 
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();
}
1 Like
5

If you don’t understand anything, I can help you. It’s quite simple actually if you are familiar with map() or lerp()

1 Like
6

wow, that’s nice. Thanks!

1 Like