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

2 Likes

Maybe 2 nested for loop with double lerpColor()?

Something like this?

(two similar ways of doing it)

code
``````void setup() { size(800,400); }
void draw() {
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

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

Code
``````void setup() {
size(600,600);
}
void draw() {
background(0);
}
void displayGradient(float x, float y, float w, float h) {
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

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

wow, that’s nice. Thanks!

1 Like