Function to extract colors from coolors.co

Processing Coding Questions
1

Hi everyone.
I was trying to come up with a function to extract colours from the URL from coolors.com to easily change colour pallets. This is an idea I’ve seen done for P5 projects, but I’d like it for Processing.

For some reason, I am able to get the colours and apply them to the background, but not to any object.
Anyone know why that might be?

String colors = "https://coolors.co/fec5bb-fcd5ce-fae1dd-f8edeb-e8e8e4-d8e2dc-ece4db-ffe5d9-ffd7ba-fec89a";

color[] pal;
color pallete;

void setup() {
  size(800, 800);
  smooth();
  pal = createPallete(colors);
}
void draw() {
  pallete = pal[int(random(pal.length))];
  background(pallete);
  pallete = pal[int(random(pal.length))];
  fill(pallete);
  ellipse(width/2, height/2, 400, 400);
  noLoop();
}

color[] createPallete(String colors) {
  String[] clrs = splitTokens(colors, "/");
  String[] c = splitTokens(clrs[2], "-");
  //String[] a = new String[c.length];
  color[] col = new color[c.length];

  for (int i = 0; i < c.length; i++) {
    //println(c[i]);
    //a[i] = "#"+c[i];
    col[i] = unhex(c[i]);
  }
  return col;
}
void mousePressed() {
  clear();
  redraw();
}
1 Like
2

Processing usually expects integer representations of RGB colour to be negative; colours are effectively created and treated like this:
col = -16777216 + (red << 16 | green << 8 | blue)

println(color(0)); // -16777216

However, background() seems to accept positive colour integers whereas fill() (like most other methods) doesn’t.

In fact, fill(n) with n > 255 doesn’t produce any fill!

Solution is to convert the pallete colour int into Processing-compatible int.

fill(-(2<<24)+pallete);

image
image800×800 13.1 KB

2 Likes
3

Thank you! I’ve managed to solve it based on your explanation. This is great

4

@thesandrobrito,

This will do the trick in your code:
col[i] = unhex("FF" + c[i]);

See references:
color / Reference / Processing.org
Color / Processing.org
Color Gradients in Processing (v 2.0) | by Jeremy Behreandt | Medium
And there are others…

You want the alpha to be 0xFF for 100% opaque after conversion instead of 0% opaque.

@micycle ,

That should be:
fill(-(1<<24)+pallete);

Which is the same as:
fill(0xFF<<24)+pallete);
or
fill(0xFF000000+pallete);

:)

1 Like