Skip to content

Instantly share code, notes, and snippets.

@sammyoos

sammyoos/fader.html

Created November 4, 2012 23:52
Show Gist options
  • Save sammyoos/4014407 to your computer and use it in GitHub Desktop.
Save sammyoos/4014407 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fader.html
<html>
<span style="background: #0000ff"> &nbsp; 1 &nbsp; </span>
<span style="background: #000df1"> &nbsp; 2 &nbsp; </span>
<span style="background: #001ae3"> &nbsp; 3 &nbsp; </span>
<span style="background: #0027d5"> &nbsp; 4 &nbsp; </span>
<span style="background: #0034c7"> &nbsp; 5 &nbsp; </span>
<span style="background: #0041b9"> &nbsp; 6 &nbsp; </span>
<span style="background: #004eab"> &nbsp; 7 &nbsp; </span>
<span style="background: #005b9d"> &nbsp; 8 &nbsp; </span>
<span style="background: #00688f"> &nbsp; 9 &nbsp; </span>
<span style="background: #007581"> &nbsp; 10 &nbsp; </span>
<span style="background: #008273"> &nbsp; 11 &nbsp; </span>
<span style="background: #008f65"> &nbsp; 12 &nbsp; </span>
<span style="background: #009c57"> &nbsp; 13 &nbsp; </span>
<span style="background: #00a949"> &nbsp; 14 &nbsp; </span>
<span style="background: #00b63b"> &nbsp; 15 &nbsp; </span>
<span style="background: #00c32d"> &nbsp; 16 &nbsp; </span>
<span style="background: #00d01f"> &nbsp; 17 &nbsp; </span>
<span style="background: #00dd11"> &nbsp; 18 &nbsp; </span>
<span style="background: #00ea03"> &nbsp; 19 &nbsp; </span>
<span style="background: #00ff00"> &nbsp; 20 &nbsp; </span> <br/>
<span style="background: #ffffff"> &nbsp; 1 &nbsp; </span>
<span style="background: #ececec"> &nbsp; 2 &nbsp; </span>
<span style="background: #d9d9d9"> &nbsp; 3 &nbsp; </span>
<span style="background: #c6c6c6"> &nbsp; 4 &nbsp; </span>
<span style="background: #b3b3b3"> &nbsp; 5 &nbsp; </span>
<span style="background: #a0a0a0"> &nbsp; 6 &nbsp; </span>
<span style="background: #8d8d8d"> &nbsp; 7 &nbsp; </span>
<span style="background: #7a7a7a"> &nbsp; 8 &nbsp; </span>
<span style="background: #676767"> &nbsp; 9 &nbsp; </span>
<span style="background: #545454"> &nbsp; 10 &nbsp; </span>
<span style="background: #414141"> &nbsp; 11 &nbsp; </span>
<span style="background: #2e2e2e"> &nbsp; 12 &nbsp; </span>
<span style="background: #1b1b1b"> &nbsp; 13 &nbsp; </span>
<span style="background: #080808"> &nbsp; 14 &nbsp; </span>
<span style="background: #000000"> &nbsp; 15 &nbsp; </span> <br/>
<span style="background: #aa08c3"> &nbsp; 1 &nbsp; </span>
<span style="background: #9716b0"> &nbsp; 2 &nbsp; </span>
<span style="background: #84249d"> &nbsp; 3 &nbsp; </span>
<span style="background: #71328a"> &nbsp; 4 &nbsp; </span>
<span style="background: #5e4077"> &nbsp; 5 &nbsp; </span>
<span style="background: #4b4e64"> &nbsp; 6 &nbsp; </span>
<span style="background: #385c51"> &nbsp; 7 &nbsp; </span>
<span style="background: #256a3e"> &nbsp; 8 &nbsp; </span>
<span style="background: #12782b"> &nbsp; 9 &nbsp; </span>
<span style="background: #03881c"> &nbsp; 10 &nbsp; </span> <br/>
<span style="background: #a0a080"> &nbsp; 1 &nbsp; </span>
<span style="background: #a8a860"> &nbsp; 2 &nbsp; </span>
<span style="background: #b0b040"> &nbsp; 3 &nbsp; </span>
<span style="background: #b8b820"> &nbsp; 4 &nbsp; </span>
<span style="background: #c0c000"> &nbsp; 5 &nbsp; </span> <br/>
</html>
Raw
fader.py
#!/usr/bin/python
# to run: python fader.py > fader.html
# then: firefox fader.html
outputFormat = '<span style="background: #%02x%02x%02x"> &nbsp; %i &nbsp; </span>'
def fader ( steps, c1, c2 ):
inc = map( lambda i:(c2[i]-c1[i])/( steps-1 ), range(0,3))
for i in range(0,steps-1):
print outputFormat % (
c1[0] + i*inc[0],
c1[1] + i*inc[1],
c1[2] + i*inc[2],
i+1 )
print outputFormat % ( c2[0], c2[1], c2[2], steps ), '<br/>'
fader( steps = 20,
c1 = [ 0x00, 0x00, 0xFF ],
c2 = [ 0x00, 0xFF, 0x00 ] )
fader( steps = 15,
c1 = [ 0xFF, 0xFF, 0xFF ],
c2 = [ 0x00, 0x00, 0x00 ] )
fader( steps = 10,
c1 = [ 0xAA, 0x08, 0xC3 ],
c2 = [ 0x03, 0x88, 0x1C ] )
fader( steps = 5,
c1 = [ 0xA0, 0xA0, 0x80 ],
c2 = [ 0xC0, 0xC0, 0x00 ] )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment