# Do you know how to modify this?
**URL:** https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323
**Category:** Coding Questions
**Created:** [March 8, 2021, 2:33am UTC](https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323 "2021-03-08T02:33:30Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Apollo](https://discourse.processing.org/u/Apollo)
#### Post date: [March 8, 2021, 2:33am UTC](https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323/1 "2021-03-08T02:33:30Z")
Good day/morning/evening/afternoon!
So I got his code which I wanna utilize for another task:
```auto
void setup() { size(800,400); }
void draw() {
loadPixels();
int w = width/2, h = height;
for(float j = 0; j < w; j++) for(float i = 0; i < h; i++) {
float red = lerp(0,255,i/h), green = lerp(0,255,j/h), blue = lerp(255,0,i/h);
pixels[floor(j+w+i*width)] = color(red,green,blue);
color clr = color(map(i,0,h,255,0),map(j,0,w,0,255),map(i,0,h,0,255));
pixels[floor(j+i*width)] = clr; //inverted, different approach
}
updatePixels();
noLoop();
}
```
I can’t figure out how to use it so maybe you could help me here.
I have to make an interactive HSL (Hue, Saturation, Lightness) Box in Processing.
On top of the window, there should be a 500px wide and 50px tall color strip that will determine the hue of the gradient based on my cursor position. Below it is a 500 x 500 gradient showing the different saturation and brightness values for that hue. On top is the brightest and gets darker as you go down, while the leftmost is the most saturated and gets less saturated towards the right.
If you want to visualize it: [link](https://drive.google.com/file/d/1_yIwD-sDGLxlQ-IejZ8eaefSB-fEp25B/view?usp=sharing)
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [March 8, 2021, 7:09am UTC](https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323/2 "2021-03-08T07:09:01Z")
First of all you need to get the color mode. The example above uses RGB, your program would require the HSB color model.
I’ll make it in a while. I am currently bussy
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [March 8, 2021, 7:31am UTC](https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323/3 "2021-03-08T07:31:49Z")
ok, I had some time and did it:
> **Code**
>
> ```auto
> float stripH = 50, hue = 0;
> void setup() {
> size(500, 550);
> colorMode(HSB);
> }
> void draw() {
> background(0);
> loadPixels();
> for(int i = 0; i < width; i++) {
> for(int j = 0; j < stripH; j++) {
> pixels[i+j*width] = color(map(i,0,width,0,255),255,255);
> }
> }
> for (int i = 0; i < width; i++) {
> for (int j = 0; j < height-stripH; j++) {
> color clr = color( hue,
> lerp(0, 255, map(i, 0, width, 0, 1)),
> lerp(0, 255, map(j, 0, height-stripH, 1, 0)) );
> pixels[i+(j+(int)stripH)*width] = clr;
> }
> }
> updatePixels();
> if(mousePressed) if(mouseY < stripH) hue = map(mouseX,0,width,0,255);
> stroke(0);
> line(map(hue,0,255,0,width),0,map(hue,0,255,0,width),stripH);
> }
>
> ```
> **Commented**
>
> ```auto
> float stripH = 50, hue = 0; //stripH - hue stripe | hue - save hue value
> void setup() {
> size(500, 550);
> colorMode(HSB);
> }
> void draw() {
> background(0);
> loadPixels();
> //drawing the top sctipt
> for(int i = 0; i < width; i++) {
> for(int j = 0; j < stripH; j++) {
> pixels[i+j*width] = color(map(i,0,width,0,255),255,255);
> }
> }
> //drawing the saturation - brightness square
> for (int i = 0; i < width; i++) {
> for (int j = 0; j < height-stripH; j++) {
> //calculating the color
> color clr = color( hue,
> lerp(0, 255, map(i, 0, width, 0, 1)),
> lerp(0, 255, map(j, 0, height-stripH, 1, 0)) );
> pixels[i+(j+(int)stripH)*width] = clr; //setting the color
> }
> }
> updatePixels();
> if(mousePressed) if(mouseY < stripH) hue = map(mouseX,0,width,0,255); //if mousePressed and mouse over strip, set hue
> stroke(0);
> line(map(hue,0,255,0,width),0,map(hue,0,255,0,width),stripH); //drawing the line representing the hue
> }
>
> ```
> **Compressed code**
>
> ```auto
> float stripH = 50, hue = 0; //stripH - hue stripe | hue - save hue value
> void setup() {
> size(500, 550);
> colorMode(HSB);
> }
> void draw() {
> background(0);
> loadPixels();
> for(int i = 0; i < width; i++) for(int j = 0; j < stripH; j++)pixels[i+j*width] = color(map(i,0,width,0,255),255,255);
> for (int i = 0; i < width; i++) for (int j = 0; j < height-stripH; j++) pixels[i+(j+(int)stripH)*width] = color( hue, map(i, 0, width, 0, 255), map(j, 0, height-stripH, 255, 0) ); //setting the color
> updatePixels();
> if(mousePressed) if(mouseY < stripH) hue = map(mouseX,0,width,0,255); //if mousePressed and mouse over strip, set hue
> line(map(hue,0,255,0,width),0,map(hue,0,255,0,width),stripH); //drawing the line representing the hue
> }
>
> ```
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [March 8, 2021, 7:49am UTC](https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323/4 "2021-03-08T07:49:28Z")
> [@Apollo](#):
>
> `floor(j+i*width)`
btw all this does is arrange pixels into
1 6 11 16 21
2 7 12 17 22
3 8 13 18 23
4 9 14 19 24
5 10 15 20 25
instead of
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20
21 22 23 24 25
---
### Author:  [@Apollo](https://discourse.processing.org/u/Apollo)
#### Post date: [March 9, 2021, 1:41am UTC](https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323/5 "2021-03-09T01:41:22Z")
I thought those two are the same
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [March 9, 2021, 7:46am UTC](https://discourse.processing.org/t/do-you-know-how-to-modify-this/28323/6 "2021-03-09T07:46:14Z")
RGB is the easiest to display on a monitor (since monitors use red, green and blue lights in each pixel)
HSB is more difficult and require some calculations on the computers part. However it is much easier to get vibrant colors and implement them into the program.
RGB - red, green, blue
HSB/HSV/HSL - hue, saturation, brightness/value/lightnes