Do you know how to modify this?

Processing Coding Questions
1

Good day/morning/evening/afternoon!

So I got his code which I wanna utilize for another task:

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

2

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

3

ok, I had some time and did it:

image
image502×548 24.5 KB

Code 
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 
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 
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
}
3 Likes
4

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

1 Like
5

I thought those two are the same

1 Like
6

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