Class for colours

Processing Beginners
1

Good day

I’m trying to create a class that contains the colours for my application. E.g.

class Colours
{
  color background = color (0xB0, 0xB0, 0xB0);
  color text = color( 0x00, 0x00, 0x00);
}

And I would like to use it without having an instance of the class; e.g.

background(Colours.background);

Trying to use static somewhere in or around the class however fails.

  1. Making the class static gives the error (I would expect this to work).
Cannot make a static reference to the non-static field Colours.background
  1. Making the field background static gives the error
Cannot make a static reference to the non-static method color(int, int, int) from the type PApplet

Maybe I’m overthinking it and I should just use an instance but I still would like to know if it can be achieved and if yes, how.

Note that, although I consider myself a reasonably seasoned programmer, I have nearly my whole life skipped OOP and only know the very basics. I’m also very new to Processing, I’ve mostly worked in C and C#.

1 Like
2

Don’t know if it will help you, but found this reference: https://stackoverflow.com/questions/28798152/create-a-struct-in-java-like-c . Java doesn’t have structs like C does and the class is their substitute. You would have to create an instance of the class, which is pretty simple to do; not sure why you would want to avoid doing that.

1 Like
3

this works


class Colours
{
  final static color background = 3233;
}

void setup() {
  background(Colours.background);
}
3 Likes
4

What’s the range for the color numbers; I’ve never seen it done that way?

5

Which I exactly want to prevent :wink:

Any mix of red, green and blue.

I’m not sure if 3233 matches the colour that I described (I have some doubts as the number 3233 is relatively small), I will test it later when the power is back. It might be a bit messed up if I have to convert but I hope it can be done with some bit shifting in a function.

6

I’m up this far and its still going: final static color background = 2100000000;

7

3233

I made this number up, it’s not your color

But color in processing is just int.

There is probably a tutorial about this

2 Likes
8

final static color background = #B0B0B0; should be what he wanted.

2 Likes
9

I initially marked @Chrisir’s reply #3 as solution but there seems to be a problem that it does not quite work (the background is OK now but other colours not so :frowning:). More details tomorrow, need to make a small example if I can’t get it solved.

10

The background and text colors work ok on a Mac:

class Colors {
  final static color background = #B0B0B0;
  final static color txtColor = #DE0707;
}

void setup() {
  size(300, 200);
  background(Colors.background);
  fill(Colors.txtColor);
  textSize(24);
  text("Jeremiah was a Bullfrog.", 20, 60);
}

Output:
output

1 Like
11

It did not work for me. But I need to play more tomorrow to see where I went wrong

Thanks

12

Are you using a Windows based system; shouldn’t make any difference but I’m just curious.

13

Yes, I’m using Win10.

14

I tried it on Windows11 and it works ok there.

15

Besides class, we can also go w/ interface or even enum:

// https://Discourse.Processing.org/t/class-for-colours/42169/15
// 2023-Jun-09

void setup() {
  size(300, 200);
  noLoop();

  textAlign(CENTER, CENTER);
  textSize(PaletteEnum.SIZE.v);
  fill(PaletteClass.TXT);
}

void draw() {
  background(PaletteInterface.BG);
  text("Red Palette", width >> 1, height >> 1);
}

class PaletteClass {
  static final int
    BG = 0xD0, 
    TXT = #DE2507, 
    SIZE = 030;
}

interface PaletteInterface {
  int
    BG = 0xD0, 
    TXT = #DE0707, 
    SIZE = 030;
}

enum PaletteEnum {
  BG(0xD0), TXT(#DE0707), SIZE(030);

  final int v;

  PaletteEnum(color val) {
    v = val;
  }
}
1 Like
16

Minimal example

final static class Colours
{
  final static color background = 0xB0B0B0;       // canvas background
  final static color grid = 0x808080;             // grid
  final static color stateFill = 0xFFFFFF;        // fill colour for state (circle)
  final static color stateCircle = 0x0000FF;      // stroke colour for state circle
  final static color stateRect = 0xE0E0E0;        // stroke colour for state rectangle (visible when mouse is over)
  final static color stateText = 0x00000;         // text color in state
  final static color statePoint = 0x00FF80;       // fill colour for connector points
  final static color statePointIn = 0xFF0000;     // fill colour for connector points that acts as an input to the state
  final static color statePointOut = 0xFF0000;    // fill colour for connector points that acts as an output from the state
}

void setup()
{
  size(1200, 800);

  background(Colours.background);  // ok, background in desired colour

  // white
  fill(color(0xFF, 0xFF, 0xFF));   // ok, circle filled with white
  //fill(0xFFFFFF);                // does not fill the circle with white
  //fill(Colours.stateFill);       // does not fill the circle with white

  // black
  //stroke(color(0x00, 0x00, 0xFF));  // ok, blue around the circle
  stroke(Colours.stateCircle);        // does not draw the blue line
  ellipse(350, 50, 30, 30);
}


void draw()
{
}

I expect a white circle with a blue outline. If I change the stateCircle colour to 0x000000, I do get a black outline but I suspect that this is more a coincedence.

Where do I go wrong?

An enum will (should ?) not work if various members of the class have the same colour. I will have a look at the interface.

17

We can have enum constants w/ same value.
In my example, each enum constant (BG, TXT, SIZE) got its own field v.

Your constant stateFill is 100% transparent!
Use color value #FFFFFF or -1 instead for 100% opaque white:
final static color stateFill = #FFFFFF;
final static color stateFill = -1;

For 100% opaque black you can just use value 0 or #000000:
final static color stateText = 0;
final static color stateText = #000000;

2 Likes
18

“transparent” was the key, thanks. And yes, I did read the reference a couple of times but it did not click.

Revised class (currently not using transparency)

final static class Colours
{
  /*
  note:
   do NOT use 0x, it makes 0xFFFFFF transparent
   use # notation (e.g. stateFill = #FFFFFF)
   or
   use 32 bits, first bytes defines transparency (e.g. stateFill = 0x80FFFFFF)
   */
  final static color background     = #B0B0B0;  // canvas background
  final static color grid           = #808080;  // grid
  
  final static color stateFill      = #FFFFFF;  // fill colour for state (circle)
  final static color stateCircle    = #000000;  // stroke colour for state circle
  final static color stateRect      = #E0E0E0;  // stroke colour for state rectangle (visible when mouse is over)
  final static color stateText      = #000000;  // text color in state
  final static color statePoint     = #00FF80;  // fill colour for connector points
  final static color statePointIn   = #FF0000;  // fill colour for connector points that act as an input to the state
  final static color statePointOut  = #00FF00;  // fill colour for connector points that act as an output from the state
  
  final static color formBackground = #FFFFFF;
  final static color formBorder     = #000000;
}
19

There’s another aspect on how Processing treat a color value: “grayscale colors”.

I believe that any color value less than 256 is considered a 100% opaque grayscale color!

So a 100% opaque black color value #000000 can also be written as just 0!

For a 100% opaque white #FFFFFF we can go w/ just 0xFF, 255 or even -1!

Other 100% opaque grayscale values like #808080 can be simplified to just hexadecimal 0x80, decimal 128 or even octal 0200!

1 Like