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

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);

Screen Shot 2016-06-02 at 10.21.59 PM

Answers

  • edited June 2016

    ... 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? :-<

  • edited June 2016
    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);
    }
    
  • @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 :/

  • edited June 2016 Answer ✓

    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"
    
  • 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() {
    }
    
  • edited June 2016 Answer ✓

    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!
    
  • edited June 2016 Answer ✓

    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);
    }
    
Sign In or Register to comment.