Converting string to hexadecimal value in Processing.js (or javascript)

Question

I'm trying to make a processing.js sketch change color in response to clicks on html divs.

The idea is that the id of the div will determine the color in the sketch, so I've given each div a hex value as an id.

Here's an example div from my html file:

<div class="swatch" id="008A2E"><img src="img/green.png"></div>

I've initialized a global variable 'color' in my javaScript file and added an onclick function 'selectColor(this.id)' to all the color swatch divs.

var color = "FFD119"; 

function selectColor(id) { 
    color = id;
}

This is the javascript function that gets called from within my processing.js file:

function getColor() {
    var hex = parseInt(color, 16);
    return hex;
}

Here's the relevant bit of the Processing.js file:

function setFrameColor() {
    var hex = javascript.getColor();
    frameColor = hex;
}

This function is called in:

void mouseClicked(){
    setFrameColor();
    if(!cycling){
        loop();
        cycling = true;
    } else {
        noLoop();
        cycling = false;
    }
}

It's sort of working except that all I get are shades of grey. I'm obviously not converting the string data from the div ids correctly. Processing's hex() function doesn't help because it returns a string. Is what I'm trying to do even possible? I've also tried sending the div ids directly to the processing sketch (without using parseInt()) but that seems to have no effect.

Thanks.

Answer 1

@Mike 'Pomax' Kamermans made some great points that i would like to expand on a couple of points so they really hit home for all readers!

1. One of the powerful features of JavaScript is its dynamic, typeless nature. Where typed languages like Java, and therefore Processing, can reuse names without fear of ambiguity (method overloading), Processing.js cannot. Without getting into the inner-workings of JavaScript, the best advice for Processing developers is to not use function/class/etc. names as variable names.

2. As Mike said above one major problem is that HTML id attributes cannot start with a number! This is actually the case in most programming languages with var names etc. so a very good one to note.

3. A big issue you are having is you are trying to convert a string of numbers into their hex value equivalent with this code:

   function getColor(){  
       var hex = parseInt(color, 16)
       return hex;
   

   }

ParseInt will convert strings of various base types to INTS

So your hex colors are not in the form

color val = #123456

but instead just

color val = 123456

You can read more here about parseInt if that didn't make sense:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

I would try this

Within the processing.js file:

function getColor() {
    return color;
}

This will just pass the string with the color swatch to your setFrameColor function to work on it.

function setFrameColor() {
    var hex = javascript.getColor();
    // hex is of the form #RRGGBB

    frameColor = color( unhex(hex.substring(1,3)),
                        unhex(hex.substring(3,4)),
                        unhex(hex.substring(5,6)) );

}

Unhex converts a String representation of a hexadecimal number to its equivalent integer value - so here we are breaking up our string using substring() into it's 3 RGB values and you can now use color(r, g, b) as Mike suggested.

For more on Unhex: http://processingjs.org/reference/unhex_/

Answer 2

A few genuine problems here:

1. don't use variables that have the same names as basic Processing API types or functions. color is already a datatype in Processing, so you don't want to use that.
2. HTML id attributes are not allowed to start with a number, so any ID that does will be rejected. Use a data-color attribute or something in this case instead.
3. hex colors are in the form color val = #123456, and are parser-converted. You can't just assign a string and have it work.

Instead, it'll be far easier to just use rgb color values and do a var mycolor = color(r,g,b), or convert the incoming string into these three color values and then doing a color(r,g,b) assignment.

Answer 3

Any six digit hexadecimal needs to be proceeded by # as in #CCFFAA giving the r, g, b components.

Any eight digit hexadecimal need to be proceeded by 0x as in 0xFFCCFFAA giving the alpha, r, g, b components.

Reference Fill() in processing.js