Convert an rgb or rgba value to display the hex value using hex()

tomstuder

I am looking to convert a value that is in rgba to its respective hexadecimal value. With the code written I get - 15538: Uncaught TypeError: Cannot read property 'toString' of undefined.

Can someone tell me what I may be doing wrong?

Here is the code:

var hexcol = hex(hc,mc,sc); // variables in hex() are set up earlier in code text(hexcol, 6,130);

GoToLoop

... variables in hex() are set up earlier in code...

1st of all, do not post code as a picture. They can't be copied & pasted! [-(

2nd, how would be possible to determine what's wrong at var hexcol = hex(hc, mc, sc); if we got no idea where hc, mc and sc were declared or assigned some value? :-<

tomstuder

function setup() {
  createCanvas(displayWidth,displayHeight);
  textFont("Arial");
}

function draw() {

  //CREATE COLOR
  var h = hour();
  var m = minute();
  var s = second();

  var hc = map(h, 0, 23,0,255);
  var mc = map(m, 0, 59,0,255);
  var sc = map(s, 0, 59,0,255);
  var c = color(hc,mc,sc);

 // var hexcol = hex([hc,mc,sc]);
  var hexcol = hex(c);

  //CREATE TIME
  var ht = hour();
  var mt = minute();
  var st = second();

  background(c);
  //ADD BLACK RECT AT BOOTOM
  fill(90);
  noStroke();
  rect(0,90,width,height);

  stroke(255);
  //line(0,52,width,52);
  line(0,90,width,90);

  fill(255);
  textSize(50);
  if(ht<10) {
    text("0" + ht, 10, 48);
  }else {
    text(ht, 10, 48);
  }

  textSize(20);
  if(mt<10) {
    text("0" + mt, 10, 74);
  }else {
    text(mt, 10, 74);
  }
  //ADD :
  text(":", 33, 74); 

  textSize(20);
  if(st<10) {
    text("0" + st, 43, 74);
  }else {
    text(st, 43, 74);
  }

  textSize(15);
  text(str(c), 6,107);
  text(hexcol, 6,130);
}

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

blindfish

@tomstuder : the problem seems to be that color isn't working as documented:

Colors are stored as Numbers or Arrays.

Yet your c variable is an object:

function setup() {

    //CREATE COLOR
  var h = hour();
  var m = minute();
  var s = second();

  var hc = map(h, 0, 23,0,255);
  var mc = map(m, 0, 59,0,255);
  var sc = map(s, 0, 59,0,255);
  var c = color(hc,mc,sc);
  print(c);
}

You're getting an error because hex accepts a number or array; but you're unwittingly passing an Object :(|)

Looks to me like a bug - or some update that hasn't been documented :/

tomstuder

Here is an update in a gist:

https://gist.github.com/tomstuder/45fc62023a660a2a2b1dede2c8727977

GoToLoop

Yet your c variable is an object:

Function color() acts as a custom constructor for class p5.Color in the same vein as createVector() is for class p5.Vector and many other cases.

BtW, we can access the RGBa values via its levels array property:

let rgba = color(0xFF, 0x80, 0x40).levels;
let hexCol = `#${hex(rgba[0], 2)}${hex(rgba[1], 2)}${hex(rgba[2], 2)}`;

console.log(rgba, hexCol) // [255, 128, 64, 255] "#FF8040"

tomstuder

Thank You @GoToLoop for the info and clarity on this! With a bit of tweaking below, it works as I was looking for!

function setup() {
  createCanvas(500,500);
  var r = hour();
  var g = minute();
  var b = second();

  var rc = map(r, 0,23,0,255);
  var gc = map(g, 0,59,0,255);
  var bc = map(b, 0,59,0,255);

  var rgb = color(rc,gc,bc);
  let rgba = color(rc, gc, bc).levels;
  let hexCol = `#${hex(rgba[0], 2)}${hex(rgba[1], 2)}${hex(rgba[2], 2)}`;

  background(rc,gc,bc);

  text(rgb, 20,20);
  text(hexCol, 20,80);
}

function draw() {
}

GoToLoop

Glad it's solved! :D Just 1 lil' performance detail: Do not unnecessarily invoke color(): L-)

var rgb  = color(rc, gc, bc);
let rgba = color(rc, gc, bc).levels;

Above you're creating 2 p5.Color instance objects. Why not just 1?: *-:)

const rgb = color(rc, gc, bc), rgba = rgb.levels; // Much faster!

GoToLoop

Hi, posted a tweaked version online at the link below: :ar!
http://p5ide.HerokuApp.com/editor#?sketch=57527089ac4cb30300d64828

/**
 * WebColor Background Display (v2.1)
 * TomStuder & GoToLoop (2016-Jun-03)
 *
 * forum.Processing.org/two/discussion/16963/
 * convert-an-rgb-or-rgba-value-to-display-the-hex-value-using-hex
 *
 * p5ide.HerokuApp.com/editor#?sketch=57527089ac4cb30300d64828
*/

var draw = displayHexRGB,
    mousePressed = () => redraw(),
    keyPressed = mousePressed;

function setup() {
  createCanvas(500, 275);
  frameRate(10).noLoop();
  textAlign(LEFT, CENTER).textSize(50);
}

function displayHexRGB() {
  const d = new Date,
        r = 0xff/23 * d.getHours(),
        g = 0xff/59 * d.getMinutes(),
        b = 0xff/59 * d.getSeconds(),
        rgba = color(r, g, b),
        c = rgba.levels,
        hexCol = '#' + hex(c[0]<<020 | c[1]<<010 | c[2], 6);

  background(rgba);

  text(d.toLocaleTimeString() + '\n' +
       rgba + '\n' + c + '\n' +
       hexCol, 30, height>>1);
}