Page 1 of 1

[Challenge] Colour rotation

Posted: Fri Sep 11, 2009 5:29 pm
by SimonMayer
Here's a challenge, dished up solely for the sake of a puzzler's own enjoyment and not for any practical use. I hope it stimulates some thought.
  • Produce a page that has a background of any hexadecimal colour.
  • It must contain a form and submit button that when pressed, rotates the background colour, up to #FFFFFF and back down to #000000 and then back up to #FFFFFF in an infinite cycle.
  • The colour must take red to one extreme, before applying to Green, then Blue,
  • The colour must move a maximum of 18 (in decimal, 12 in hexadecimal) units per iteration.
E.g #000000 -> #120000 -> #240000 ... #FF0000 -> #FF1200 ... #FFFFFF -> #EDFFFF ... #000000

Re: [Challenge] Colour rotation

Posted: Fri Sep 11, 2009 7:18 pm
by requinix
Why 18? 256 doesn't divide evenly into it. Or is that the point?

Re: [Challenge] Colour rotation

Posted: Fri Sep 11, 2009 7:28 pm
by SimonMayer
tasairis wrote:Why 18? 256 doesn't divide evenly into it. Or is that the point?
Yes, it was deliberate. I did specify a maximum of 18, so you can use 16 if you prefer.
18 offers a performance advantage, because it will take less iterations to complete the cycle, but obviously requires a bit more consideration to get it right.

Re: [Challenge] Colour rotation

Posted: Fri Sep 11, 2009 9:08 pm
by McInfo
My answer: http://snydev.com/temp-files/devnet-cha ... otator.php

Edit: This post was recovered from search engine cache.

Re: [Challenge] Colour rotation

Posted: Fri Sep 11, 2009 11:32 pm
by joeynovak
JavaScript to the rescue...

http://web2.0goodies.com/colors.html

Re: [Challenge] Colour rotation

Posted: Sat Sep 12, 2009 5:58 am
by SimonMayer
That's good, but it needs to increment more slowly.
#000000 would have to go up a maximum of 18 units per iteration: #120000, #240000, #360000...;

The challenge here, particularly would be it has to effectively count when it reaches FF and safeguard against it going any higher.

Re: [Challenge] Colour rotation

Posted: Sat Sep 12, 2009 6:10 am
by SimonMayer
joeynovak wrote:JavaScript to the rescue...

http://web2.0goodies.com/colors.html
That almost seems to do it. It just doesn't quite follow the correct cycle. From #FFFFFF, it appears to reduce in the order Blue, Green, Red. It would still need to work in the order Red, Green, Blue for the deduction too.

I hadn't considered doing it with just one button click or Javascript. I was thinking PHP and a series of clicks. That's very interesting.

Being picky, I point out it doesn't actually have a form, just a submit button, but that's a minor point.

Re: [Challenge] Colour rotation

Posted: Sat Sep 12, 2009 9:54 am
by McInfo
SimonMayer wrote:That's good, but it needs to increment more slowly.
You can change the amount of incrementation by changing the "step". Its range is 1 to 255.

?step=18&color=000000

Should the step be limited to the range 1 to 18? If so, why?

Edit: This post was recovered from search engine cache.

Re: [Challenge] Colour rotation

Posted: Sat Sep 12, 2009 12:10 pm
by Mirge
I liked this one quite a bit. I'm still playing with it right now actually lol.

Re: [Challenge] Colour rotation

Posted: Sat Sep 12, 2009 1:36 pm
by SimonMayer
McInfo wrote:
SimonMayer wrote:That's good, but it needs to increment more slowly.
You can change the amount of incrementation by changing the "step". Its range is 1 to 255.

?step=18&color=000000

Should the step be limited to the range 1 to 18? If so, why?
My apologies, I hadn't noticed that you could increment in smaller numbers.

There is no reason why the code should be limited, but to add a level of intricacy to the challenge, I was hoping that someone would make it handle when increments of 18 reached FF.
You have done this and so you have passed the challenge.

I'm afraid I haven't made any badges for this challenge, but I commend you for meeting and exceeding the requirements.