Minimalist Hex Clock

Question

Your challenge is to create a clock that displays the time as a hex number, and the background color as the hex color code of the time.

Requirements: No input. In the center of your output you should display the number sign and the current time in 24 hour format as "#hhmmss". The program should update to the current time at least once every second. The text must be centered and white (or a light color that stands out). The background should be entirely the color of the hex code. Shortest code wins, but creative answers are encouraged.

Live example. Idea from r/InternetIsBeautiful.

I liked the idea, but it'd be better as a popularity contest imo — William Barbosa, Commented Jun 20, 2014 at 21:52
@WilliamBarbosa I believe the result is way too simple for a popularity contest to be useful. — qwr, Commented Jun 20, 2014 at 22:48
You may want to point out that the IIB post is an x-post from /r/minimalism. But heh. — cjfaure, Commented Jun 22, 2014 at 17:24

nderscore · Accepted Answer · 2014-06-22 07:09:08Z

5

HTML/CSS/JavaScript 207 183 180 161 152

Tested and working in the latest Firefox and Chrome browsers.

<body id=b onload=setInterval("b.innerHTML=b.bgColor=Date().replace(/.*(..):(..):(..).*/,'#$1$2$3')",0) text=#fff style=position:fixed;top:50%;left:47%>

Demo Here

edited Jun 22, 2014 at 7:09

answered Jun 21, 2014 at 3:03

nderscore

4,98015 silver badges38 bronze badges

\$\begingroup\$ as far as I see, your code perfectly works without the <html style=height:100%> at least in safari/jsfiddle \$\endgroup\$
– Pinna_be
Commented Jun 21, 2014 at 6:59
\$\begingroup\$ @Pinna_be Good catch. I was trying out a few different ways of vertically centering the text and that was left over from another method. \$\endgroup\$
– nderscore
Commented Jun 21, 2014 at 7:13
2

\$\begingroup\$ I know I'm braking some rules by making this comment, but, damn this body tag is pure beauty. \$\endgroup\$
– Jacob
Commented Jun 22, 2014 at 4:30

Add a comment |

Pinna_be · Accepted Answer · 2018-02-01 21:36:54Z

1

python3 (142) or (123 with flickering)

import time;from turtle import*;tracer(0)
while 1:reset();ht();color([1]*3);a=time.strftime("#%H%M%S");write(a,0,"center");bgcolor(a);update()

using turtles, 142 bytes, will probably not be the shortest, but I simply wanted to ~~use~~ play with turtles again.

This example updates the screen often enough en does what is asked, but it is not pretty, as it goes on and off. Then it is only 123 bytes. (not a specified quality)

import time;from turtle import*
while 1:reset();ht();color([1]*3);a=time.strftime("#%H%M%S");write(a,0,"center");bgcolor(a)

ungolfed:

import time
from turtle import*
tracer(0)                           #1 not every change should be propagated immediatly
while 1:
    reset()                         #2 remove previous drawing
    ht()                            #3 hide the turtle
    color([1]*3)                   #4 set color to snow, which is white for as far I can see
    a=time.strftime("#%H%M%S")      #5 generate the color from time
    write(a,0,"center")             #6 print time
    bgcolor(a)                      #7 change bgcolor
    update()                        #8 propagate changes

btw, because of the while 1, I'd recommend running it from terminal. As it can be quite difficult to close :D (you'll need ctrl+c)

edited Feb 1, 2018 at 21:36

answered Jun 20, 2014 at 22:43

Pinna_be

1446 bronze badges

1

\$\begingroup\$ You can reduce your character count by combining all of the lines in the while loops using semicolons. \$\endgroup\$
– isaacg
Commented Jun 21, 2014 at 3:19
\$\begingroup\$ @isaacg thank you, I adapted it. \$\endgroup\$
– Pinna_be
Commented Jun 21, 2014 at 6:55
1

\$\begingroup\$ You can reduce your character count by 9 by removing the final call to update() as bgcolor() calls update() (ignoring tracer setting) already. You can save another character by using color([1]*3) instead of "snow". \$\endgroup\$
– cdlane
Commented Feb 1, 2018 at 20:37
\$\begingroup\$ @cdlane I removed the update() in the second answer (second codeblock), I didn't think it was right to let that be my final answer as that code caused a flickering screen back then and as it doesn't remove the previous numbers making it ugly if let run for a long time. the """color([1]*3)""" is very nifty trick indeed! \$\endgroup\$
– Pinna_be
Commented Feb 1, 2018 at 21:35

Add a comment |

segfaultd · Accepted Answer · 2014-06-21 00:48:25Z

Processing, 162 bytes

void draw()
{
 int h=hour(),m=minute(),s=second();
 background(color(h,m,s));
 textAlign(CENTER);
 text("#"+(h<10?"0"+h:h)+(m<10?"0"+m:m)+(s<10?"0"+s:s),50,50);
}

Screenshot:

enter image description here

I don't know if it's against the rules, but the actual drawing area is the 100x100px square on the center of the window. For some reason, Processing can't scale down the window to that size, so it adds the gray margins around the drawing area. Here's another version without the gray margins, but slightly larger (198 bytes):

void setup()
{
 size(200,200);
}

void draw()
{
 int h=hour(),m=minute(),s=second();
 background(color(h,m,s));
 textAlign(CENTER);
 text("#"+(h<10?"0"+h:h)+(m<10?"0"+m:m)+(s<10?"0"+s:s),100,100);
}

are the newlines and the spaces at the beginning mandatory? Because you could shave off some characters over there. — Pinna_be, Commented Jun 21, 2014 at 9:41

Community · Accepted Answer · 2020-06-17 09:04:33Z

1

SmileBASIC, 65 bytes

T$=TIME$T$[2]="
LOCATE 21,14T$[4]"
GCLS VAL("&H"+T$)?"#";T$EXEC.

edited Jun 17, 2020 at 9:04

CommunityBot

1

answered Feb 2, 2018 at 1:15

12Me21

6,7211 gold badge22 silver badges40 bronze badges

Add a comment |

marinus · Accepted Answer · 2014-06-20 22:31:17Z

0

HTML + Javascript (184)

This uses the => notation which is currently only supported in Firefox. It does not use any libraries.

<body text=white onload='(b=document.body).bgColor=b.innerHTML="#"+[(d=new Date()).getHours(),d.getMinutes(),d.getSeconds()].map(x=>("00"+x).slice(-2)).join("");setTimeout(b.onload)'>

With indentation:

<body 
 text=white 
 onload='
       (b=document.body).bgColor = 
       b.innerHTML = 
             "#"+[ (d=new Date()).getHours(),
                    d.getMinutes(),
                    d.getSeconds()].map(
                        x=>("00"+x).slice(-2)
                    ).join("");
       setTimeout(b.onload)
'>

answered Jun 20, 2014 at 22:31

marinus

31.2k7 gold badges71 silver badges112 bronze badges

1

\$\begingroup\$ shouldn't the output be in the center of the screen? \$\endgroup\$
– Pinna_be
Commented Jun 20, 2014 at 23:07

Add a comment |

Bob · Accepted Answer · 2014-06-21 09:25:26Z

C# 357, 325 with minor cheating

Yea, C# isn't gonna win many codegolf prizes against other languages. Still, fun!

Cheating (not exactly centre, and only centre with .NET 4.5's default form size of 300x300, Mono may do other funny stuff):

using System.Windows.Forms;using System.Drawing;class P:Form{static void Main(){new P().ShowDialog();}public P(){var l=new Label(){Top=125,Left=120,ForeColor=Color.White};Controls.Add(l);new Timer(){Enabled=true,Interval=1}.Tick+=(s,e)=>{BackColor=ColorTranslator.FromHtml(l.Text=System.DateTime.Now.ToString("#HHmmss"));};}}

Golfed:

using System.Windows.Forms;using System.Drawing;class P:Form{static void Main(){new P().ShowDialog();}public P(){var l=new Label(){Dock=(DockStyle)5,TextAlign=(ContentAlignment)32,ForeColor=Color.White};Controls.Add(l);new Timer(){Enabled=true,Interval=1}.Tick+=(s,e)=>{BackColor=ColorTranslator.FromHtml(l.Text=System.DateTime.Now.ToString("#HHmmss"));};}}

Ungolfed:

using System.Windows.Forms;
using System.Drawing;

class P : Form
{
    static void Main()
    {
        new P().ShowDialog();
    }

    public P()
    {
        var l = new Label() { Dock = (DockStyle)5, TextAlign = (ContentAlignment)32, ForeColor = Color.White };
        Controls.Add(l);
        new Timer() { Enabled = true, Interval = 1 }.Tick += (s, e) =>
        {
            BackColor = ColorTranslator.FromHtml(l.Text = System.DateTime.Now.ToString("#HHmmss"));
        };
    }
}

cdlane · Accepted Answer · 2018-02-02 02:40:34Z

0

Python 3, 122 characters

from turtle import*
import time
color(1,1,1)
ht()
while 1:_=time.strftime("#%H%M%S");bgcolor(_);write(_,0,"center");undo()

Takes advantage of Python 3 turtle's undo() capability to clear just the previous text. Doesn't exhibit the intense flickering of turtle reset() caused by it resetting everything about the turtle.

edited Feb 2, 2018 at 2:40

answered Feb 1, 2018 at 23:00

cdlane

3813 silver badges6 bronze badges

Add a comment |

Stack Exchange Network

Minimalist Hex Clock

7 Answers 7

HTML/CSS/JavaScript 207 183 180 161 152

python3 (142) or (123 with flickering)

Processing, 162 bytes

SmileBASIC, 65 bytes

HTML + Javascript (184)

C# 357, 325 with minor cheating

Python 3, 122 characters

Your Answer

Not the answer you're looking for? Browse other questions tagged
code-golf
date
or ask your own question.

Hot Network Questions

Minimalist Hex Clock

7 Answers 7

HTML/CSS/JavaScript 207 183 180 161 152

python3 (142) or (123 with flickering)

Processing, 162 bytes

SmileBASIC, 65 bytes

HTML + Javascript (184)

C# 357, 325 with minor cheating

Python 3, 122 characters

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged code-golfdate or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
code-golf
date
or ask your own question.