Full color spectrum

Processing Coding Questions
1

So I’m experimenting with color pickers for my projects and so far I managed to make RGB sliders and an HSB color picker (pretty happy with this one). Im pleased with both of these but another thing I want to do is a color picker with only one 2D slider. So I tried making somehing like this (I know this doesn’t have brown and gray but I have kind of a plan for those) : https://www.colortools.net/color_spectrum.html. With this code:

void setup() {
  surface.setSize(460, 140);
  surface.setLocation(displayWidth - 465, displayHeight - 145);
  surface.setAlwaysOnTop(true);
  fullScreen();
  colorMode(HSB,360,100,100);
}

void draw() {
  background(255,0,100);

  //main frame
  noFill();
  stroke(0);
  rect(0, 0, width - 1, height - 1);

  //exit button
  noFill();
  rect(400, 20, 40, 20);
  fill(0,100,100);
  if (mouseX > 400 && mouseY > 20 && mouseX < 440 && mouseY < 40) {
    rect(400, 20, 40, 20);
    stroke(0,0,100);
  } else stroke(0,0,0);
  line(415, 25, 425, 35);
  line(415, 35, 425, 25);

//this is the code that draws the spectrum
  for (int h = 20; h < 380; h++) {
    for (int s = 20; s < 120; s++) {
      for (int b = 20; b < 120; b++) {
        color c = color(h - 20,s - 20,b - 20);
        set(h,s,c);
      }
    }
  }
  
}

void mouseReleased() {
  if (mouseX > 400 && mouseY > 20 && mouseX < 440 && mouseY < 40) exit();
}

This looks pretty good but it doesn’t have black. And I couldn’t quite figure that out. Will appreciate any help!

2

Try this:

color c = color(h, b, s);

:)

I made some changes testing but will also work in your code if you swap b and s:

  //this is the code that draws the spectrum
  for (int h = 0; h < 360; h++) {
    for (int s = 0; s < 100; s++) {
      for (int b = 0; b < 100; b++) {
        color c = color(h, b, s);
        set(h, s, c);
      }
    }
  }

image

And then you can do this with 2 spectrum loops:

image

I have come across the same colour banding in other examples:
https://graphicdesign.stackexchange.com/questions/13494/color-spectrum-image-how-to-create
https://wiki.neogeodev.org/index.php?title=File:Hsv_full.png

I explored this way back… I may look into my notes if I have time.

:)

3 Likes
3

Not gonna lie, for loops are pretty interesting. Never thought that would work. Thanks so much!

1 Like