Color Ain't Nothin' But An...Object?

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(0);

  // Testing out a couple different representations of color

  // Grayscale - how is it represented?

  let g = color(155);

  fill(g);

  rect(20, 20, 50, 50);

  text(g, 20, 100);

  console.log(g);

  // So what happens if I try to use this color and just add an alpha as

  // a second argument in fill?

  fill(g, 50);

  rect(100, 100, 50, 50);

  // Ok, it seems like it's just ignoring the 50 that I wanted to try using

  // for the alpha value...

  // One way I can think of to do this is to get the individual components

  // of the color! Then stick the alpha on the end. By looking at the browser

  // console I can see that the color object contains an array called "levels"

  // So I should be able to use that. p5.js also has red, green, and blue

  // utility functions to extract those components from a color. So these two

  // lines should be equivalent (comment/uncomment to test each one):

  fill(g.levels[0], g.levels[1], g.levels[2], 50);

  //fill(red(g), green(g), blue(g), 50);

  rect(180, 180, 50, 50);

}