Convert three string variables into a HEX code to use inside background();

rafaelveiga

Hello!

I'm trying to recreate http://whatcolourisit.scn9a.org/ on processing.

It works perfectly on Processing enviroment, but I can't make it work on Open Processing or Javascript mode. In this case, the background doesn't change.

--

Here is how I'm working: First, I store the current second, minute and hour into a variable, inside draw():

String seconds = str(second()); String minutes = str(minute()); String hours = str(hour());

As you can see, I'm converting into string directly.

After storing those values on my variables, if my String length is equal to 1, I do a quick if to add a "0" at the beginning

if(seconds.length() == 1) { seconds = "0" + seconds; } else if(minutes.length() == 1) { minutes = "0" + minutes; } else if (hours.length() == 1) { hours = "0" + hours; }

I did this to avoid having "10hours 2minutes 24seconds" for example, and fix it to "10hours 02minutes 24seconds".

It's there another way to add the extra zero on my variables without converting into String?

--

Here is where I think the problem is:

I gather all fixed variables and put them together inside a new String variable:

String bgcolor = hours + minutes + seconds;

The "bgcolor" variable is the result of combining all the hours, minutes, seconds next to each other, forming a HEX value.

For example, if the time is 14:11:23, the resulting hex will be #141123.

Since background() doesn't accept String as its parameter, I've used a function named unhex(), like this:

background(unhex(bgcolor));

It works perfectly on Processing, but I can't make it work on Javascript mode.

What is wrong?

If you wish to see the full code: https://github.com/rafaelveiga/What-Colour-Is-It-Processing/blob/master/WhatColourIsIt.pde

GoToLoop

Is there another way to add the extra zero on my variables without converting into String?

Nope! But you can use nf() to format numbers w/ added zeros more easily:
https://processing.org/reference/nf_.html

For example, if the time is 14:11:23, the resulting hex will be #141123.

I don't think so. You still need to add the alpha property to those concatenated values to get opaque colors:
color bg = unhex("ff" + hours + minutes + seconds);

koogs

background also takes an int. so you don't need the intermediate string at all.

background((0xff << 24) + (h << 16) + (m << 8) + s);

where h, m, s are ints.

GoToLoop

Nice 1, @koogs! background(h<<020 | m<<010 | s | #000000); *-:)

rafaelveiga

Thanks @GoToLoop!

Adding the missing alpha property made it work on Javascript mode.

Thanks for the alternative solution, @koogs.

Here is the final result: http://www.openprocessing.org/sketch/177209

koogs

The other thing I'd recommend is changing the frame rate - you don't need to update the picture 60 times a second if it only changes once a second. That said, i'd make it about 5 fps rather than 1 - there's a slight chance of skipping numbers if you have it as 1.