0

I have very big problem. From database I can get degree of illumination from 0 to 100. Where 0 - night, and 100 - noon. Knowing these params I need to build day gradient.

Data structure looks so: 

{
0: '0%',
10: '25%',
30: '100%',
40: '60%',
50: '100%',
90: '0%'
}

In from point to point gradient tiles and it may affect buy location change. It illustrated from 30 - 50.

I have no ideas at all. Any suggestions?

rsboarder
  • 4,592
  • 3
  • 20
  • 21

2 Answers2

2

I think what you need is a function for converting hsl into rgb. Consider illumination to be l (lightness). You'll need a hue and saturation, but then it's pretty straightforward. This question has multiple javascript hsl to rgb solutions:

HSL to RGB color conversion

Community
  • 1
  • 1
tilleryj
  • 14,259
  • 3
  • 23
  • 22
0

Your data structure has TWO NOON's! (100%)

{
0: '0%',
10: '20%',
30: '60%',
40: '80%',
50: '100%',
99: '1%'
}

This may not be EXACTLY what you want, but it may be closer.

Update

Okay thanks I did see you pointed that out in your question, but it slipped my mind.

Anyway, got to this link http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_gradients.htm

And your presented with HANDS ON GRADIENTS. currently there is a space where the gradient appears on the left hand of the screen, this is there because the settings have not been applied yet. so we will correct that first by doing the following:

In the settings under the LINEAR tab, you will see DIRECTION and a slider for the direction values.

Click on the PLUS button for the DIRECTION slider until the value reads BOTTOM.

So now you see a fade from black to white top to bottom. This is a representation of your night to day scale.

Now when the user travels to a different time zone it can be shown as a STEP in the gradient.

To show you how it would look, click on the ADD COLOR STEP button.

Now a step is added and you have START_AT, STOP_AT and END_AT Set those as follows: START_AT Black STOP_AT White END_AT Black

Now you have TWO gradients 1 from black to white and the other from white to black. Put your mouse cursor ON the black square inside the STOP_AT slider labeled X% (where X is the current percentage), As you drag the slider across with your mouse you can see how the two gradients change.

Hopefully this will set you on your way towards resolving what you aim to do. And incidentally if your COMMON color between the gradients is not the same, then you will have to add another COLOR_STEP (although I would expect the common color to be the same in the majority of cases, the only exception being where time zone changes occur.

Whether its worth point out? i notice that the values are entered as RGB so you will need a function to change your 100% to RGB(255,255,255) and 0% to RGB(0,0,0) where black RGB(0.0.0) is midnight/night and white RGB(255,255,255) is day/noon.

Zeddy
  • 2,079
  • 1
  • 15
  • 23