Sunday 26 July 2020

Colour Names 1

It's common knowledge that web colour names are derived from the X11 colour names. But the relationship is in reality a series of compromises. Here's a comparison list:

ColourX11 Name(s)Web Name(s)RGB
    Alice Bluealiceblue#F0F8FF
    Antique Whiteantiquewhite#FAEBD7
    Aqua
Cyan
aqua
cyan
#00FFFFNote 1
    Aquamarineaquamarine#7FFFD4
    Azureazure#F0FFFF
    Beigebeige#F5F5DC
    Bisquebisque#FFE4C4
    Blackblack#000000
    Blanched Almondblanchedalmond#FFEBCD
    Blueblue#0000FF
    Blue Violetblueviolet#8A2BE2
    Brownbrown#A52A2A
    Burlywoodburlywood#DEB887
    Cadet Bluecadetblue#5F9EA0
    Chartreusechartreuse#7FFF00
    Chocolatechocolate#D2691E
    Coralcoral#FF7F50
    Cornflower Bluecornflowerblue#6495ED
    Cornsilkcornsilk#FFF8DC
    Crimsoncrimson#DC143C
    Dark Bluedarkblue#00008B
    Dark Cyandarkcyan#008B8B
    Dark Goldenroddarkgoldenrod#B8860B
    Dark Gray
Dark Grey
darkgray
darkgrey
#A9A9A9Note 2
    Dark Greendarkgreen#006400
    Dark Khakidarkkhaki#BDB76B
    Dark Magentadarkmagenta#8B008B
    Dark Olive Greendarkolivegreen#556B2F
    Dark Orangedarkorange#FF8C00
    Dark Orchiddarkorchid#9932CC
    Dark Reddarkred#8B0000
    Dark Salmondarksalmon#E9967A
    Dark Sea Greendarkseagreen#8FBC8F
    Dark Slate Bluedarkslateblue#483D8B
    Dark Slate Gray
Dark Slate Grey
darkslategray
darkslategrey
#2F4F4FNote 2
    Dark Turquoisedarkturquoise#00CED1
    Dark Violetdarkviolet#9400D3
    Deep Pinkdeeppink#FF1493
    Deep Sky Bluedeepskyblue#00BFFF
    Dim Gray
Dim Grey
dimgray
dimgrey
#696969Note 2
    Dodger Bluedodgerblue#1E90FF
    Firebrickfirebrick#B22222
    Floral Whitefloralwhite#FFFAF0
    Forest Greenforestgreen#228B22
    Fuchsia
Magenta
fuchsia
magenta
#FF00FFNote 3
    Gainsborogainsboro#DCDCDC
    Ghost Whiteghostwhite#F8F8FF
    Goldgold#FFD700
    Goldenrodgoldenrod#DAA520
    Gray
Grey
X11 Gray
X11 Grey
n/a#BEBEBENote 4
    Green Yellowgreenyellow#ADFF2F
    Honeydewhoneydew#F0FFF0
    Hot Pinkhotpink#FF69B4
    Indian Redindianred#CD5C5C
    Indigoindigo#4B0082
    Ivoryivory#FFFFF0
    Khakikhaki#F0E68C
    Lavenderlavender#E6E6FA
    Lavender Blushlavenderblush#FFF0F5
    Lawn Greenlawngreen#7CFC00
    Lemon Chiffonlemonchiffon#FFFACD
    Light Bluelightblue#ADD8E6
    Light Corallightcoral#F08080
    Light Cyanlightcyan#E0FFFF
    Light Goldenrodlightgoldenrod#FFEC8BNote 5
    Light Goldenrod Yellowlightgoldenrodyellow#FAFAD2Note 5
    Light Gray
Light Grey
lightgray
lightrey
#D3D3D3
    Light Greenlightgreen#90EE90
    Light Pinklightpink#FFB6C1
    Light Salmonlightsalmon#FFA07A
    Light Sea Greenlightseagreen#20B2AA
    Light Sky Bluelightskyblue#87CEFA
    Light Slate Gray
Light Slate Grey
lightslategray
lightslategrey
#778899
    Light Steel Bluelightsteelblue#B0C4DE
    Light Yellowlightyellow#FFFFE0
    Lime Greenlimegreen#32CD32
    Lime
Green
X11 Green
lime#00FF00Note 6
    Linenlinen#FAF0E6
    Maroon
X11 Maroon
n/a#B03060Note 7
    Medium Aquamarinemediumaquamarine#66CDAA
    Medium Bluemediumblue#0000CD
    Medium Orchidmediumorchid#BA55D3
    Medium Purplemediumpurple#9370DB
    Medium Sea Greenmediumseagreen#3CB371
    Medium Slate Bluemediumslateblue#7B68EE
    Medium Spring Greenmediumspringgreen#00FA9A
    Medium Turquoisemediumturquoise#48D1CC
    Medium Violet Redmediumvioletred#C71585
    Midnight Bluemidnightblue#191970
    Mint Creammintcream#F5FFFA
    Misty Rosemistyrose#FFE4E1
    Moccasinmoccasin#FFE4B5
    Navajo Whitenavajowhite#FFDEAD
    Navy
Navy Blue
navy#000080Note 8
    Old Laceoldlace#FDF5E6
    Oliveolive#808000
    Olive Drabolivedrab#6B8E23
    Orangeorange#FFA500
    Orange Redorangered#FF4500
    Orchidorchid#DA70D6
    Pale Goldenrodpalegoldenrod#EEE8AA
    Pale Greenpalegreen#98FB98
    Pale Turquoisepaleturquoise#AFEEEE
    Pale Violet Redpalevioletred#DB7093
    Papaya Whippapayawhip#FFEFD5
    Peach Puffpeachpuff#FFDAB9
    Peruperu#CD853F
    Pinkpink#FFC0CB
    Plumplum#DDA0DD
    Powder Bluepowderblue#B0E0E6
    Purple
X11 Purple
n/a#A020F0Note 9
    Rebecca Purplerebeccapurple#663399Note 10
    Redred#FF0000
    Rosy Brownrosybrown#BC8F8F
    Royal Blueroyalblue#4169E1
    Saddle Brownsaddlebrown#8B4513
    Salmonsalmon#FA8072
    Sandy Brownsandybrown#F4A460
    Sea Greenseagreen#2E8B57
    Seashellseashell#FFF5EE
    Siennasienna#A0522D
    Silversilver#C0C0C0
    Sky Blueskyblue#87CEEB
    Slate Blueslateblue#6A5ACD
    Slate Gray
Slate Grey
slategray
slategrey
#708090Note 2
    Snowsnow#FFFAFA
    Spring Greenspringgreen#00FF7F
    Steel Bluesteelblue#4682B4
    Tantan#D2B48C
    Tealteal#008080
    Thistlethistle#D8BFD8
    Tomatotomato#FF6347
    Turquoiseturquoise#40E0D0
    Violetviolet#EE82EE
    Web Gray
Web Grey
gray
grey
#808080Note 4
    Web Greengreen#008000Note 6
    Web Maroonmaroon#800000Note 7
    Web Purplepurple#800080Note 9
    Wheatwheat#F5DEB3
    Whitewhite#FFFFFF
    White Smokewhitesmoke#F5F5F5
    Yellowyellow#FFFF00
    Yellow Greenyellowgreen#9ACD32

Notes:
  1. "Aqua" and "Cyan" are synonyms and refer to the same RGB colours.
  2. In X11 and hence web names, "Gray" (en-us) and "Grey" (en-gb) are synonyms.
  3. "Fuchsia" and "Magenta" are synonyms and refer to the same RGB colours.
  4. There is no equivalent of X11 "Gray/Grey" in the web colours. The closest is named "Web Gray/Gray" in X11 and maps to "gray/grey" in the web namespace.
  5. "Light Goldenrod" and "Light Goldenrod Yellow" are two distinct colours in both namespaces. Many online lists conflate the two.
  6. "Green" is different in the X11 (#00FF00) and Web (#008000) namespaces.
  7. "Maroon" is different in the X11 (#B03060) and Web (#800000) namespaces.
  8. "Navy/Navy Blue" can only be officially named "navy" in the Web namespace.
  9. "Purple" is different in the X11 (#A020F0) and Web (#800080) namespaces.
  10. "Rebecca Purple" was added to X11 and CSS 4.1.
If we exclude the three X11 colours ("Gray/Grey", "Maroon" and "Purple") that have no web equivalent, we are left with the 140 unique web colours.

Friday 3 July 2020

ZX81 Characters in Unicode 13.0

Almost exactly ten years ago, in an earlier post, I bemoaned the fact that a few glyphs from the ZX81 character set were missing from the Unicode standard. However, whilst researching seven-segment displays, I came across a reference to part of Unicode 13.0 named "Symbols for Legacy Computing". This obviously piqued my interest.



Within the upcoming release of the Unicode standard are:
214 graphic characters that provide compatibility with various home computers from the mid-1970s to the mid-1980s and with early teletext broadcasting standards.
Lo and behold, characters U+1FBF0 to U+1FBF9 are the ten seven-segment digits that first brought my attention to this block, whilst four other codepoints provide the missing ZX81 glyphs:

 ZX81Unicode Description 
 0x09 U+1FB8F LOWER HALF MEDIUM SHADE
 0x0A U+1FB8E UPPER HALF MEDIUM SHADE
 0x89 U+1FB91 UPPER HALF BLOCK AND LOWER HALF INVERSE MEDIUM SHADE
 0x8A U+1FB92 UPPER HALF INVERSE MEDIUM SHADE AND LOWER HALF BLOCK

Someone has even updated the Wikipedia page. Marvellous.

The ZX81 was launched in March 1981, but its character set was evolved from that used in the ZX80 which launched in January 1980. Then, in March 2020, Unicode was extended with characters that finally filled in the blanks. Forty years later? Crikey!

By the way, the eagle-eyed may have noticed that U+1FB94 ("LEFT HALF INVERSE MEDIUM SHADE AND RIGHT HALF BLOCK") does not have a mirrored twin ("LEFT HALF BLOCK AND RIGHT HALF INVERSE MEDIUM SHADE") which looks like it should fit at U+1FB93 (currently flagged "<reserved>"). However, the fascinating Working Group Proposal explains that
One code point, U+1FB93, was left unassigned in this proposal as a placeholder for the as-yet unattested *LEFT HALF BLOCK AND RIGHT HALF INVERSE MEDIUM SHADE, which would be the reverse-video equivalent of U+1FB8D RIGHT HALF MEDIUM SHADE from the Aquarius.
After briefly investigating the Aquarius character set, I feel Unicode 13.1 may be imminent.

Arm Clock

Seven-segment displays have long been used in digital clocks as they are a natural fit for LCD and LED technologies. There are even electro-mechanical displays for larger applications. However, for some reason I wondered if there was an alternative to flipping each segment in a binary fashion.

The ten digits are typically rendered in the following fashion:


If we want to produce these shapes using articulated arms (with each black segment being a "bone" and each grey dot being a "joint") we quickly see two constraints:
  1. There must be at least seven bones.
  2. The "root" of any arm must be located at one of the three right-hand pivot points.
If we further limit ourselves to the minimum number of bones (seven) it becomes apparent that we need at least two arms: try to manipulate a single seven-bone arm to make the "8" digit without breaking it.

I chose to use two arms: one rooted in the top-right corner with four bones (red), the other rooted at the middle-right pivot with three bones (blue):


By manipulating the angles between the bones, these two arms can fold themselves into any of the shapes making up the ten digits above:


If we wish to physically build this arrangement, there are two main problems to overcome:
  1. Bone are sometimes coincident (the joints fold back on themselves 180 degrees)
  2. The joint motors (or linkages) have to somehow fit in the arm bones
But these are merely robotics issues.

So we can theoretically create the shapes of digits to form a clock. But can we create some feasible transitions to animate it? If we assume a twenty-four hour clock, it turns out there are thirteen transitions we need to concern ourselves with:
  1. "0" → "1"
  2. "1" → "2"
  3. "2" → "3"
  4. "3" → "4"
  5. "4" → "5"
  6. "5" → "6"
  7. "6" → "7"
  8. "7" → "8"
  9. "8" → "9"
  10. "9" → "0"
  11. "2" → "0" (e.g. "23:59:59" to "00:00:00")
  12. "3" → "0" (e.g. "23:59:59" to "00:00:00")
  13. "5" → "0" (e.g. "23:59:59" to "00:00:00")
By manually fettling the angles of the arm joints, I came up with a fairly pleasing series of transitions that don't flail the arms too much, clattering them into adjacent digits.

The resulting web page uses CSS transitions to animate an inline SVG. Both the CSS rules and SVG elements are created programmatically in a fairly concise JavaScript script.