Minimalist Hex Clock

14

1

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.

qwr

Posted 2014-06-20T21:16:24.703

Reputation: 8 929

I liked the idea, but it'd be better as a popularity contest imo – William Barbosa – 2014-06-20T21:52:28.627

8@WilliamBarbosa I believe the result is way too simple for a popularity contest to be useful. – qwr – 2014-06-20T22:48:36.357

You may want to point out that the IIB post is an x-post from /r/minimalism. But heh. – cjfaure – 2014-06-22T17:24:50.580

Answers

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)

Pinna_be

Posted 2014-06-20T21:16:24.703

Reputation: 144

1You 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". – cdlane – 2018-02-01T20:37:16.893

@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! – Pinna_be – 2018-02-01T21:35:01.383

1You can reduce your character count by combining all of the lines in the while loops using semicolons. – isaacg – 2014-06-21T03:19:25.323

@isaacg thank you, I adapted it. – Pinna_be – 2014-06-21T06:55:12.530

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

nderscore

Posted 2014-06-20T21:16:24.703

Reputation: 4 912

as far as I see, your code perfectly works without the <html style=height:100%> at least in safari/jsfiddle – Pinna_be – 2014-06-21T06:59:12.097

@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. – nderscore – 2014-06-21T07:13:17.277

2I know I'm braking some rules by making this comment, but, damn this body tag is pure beauty. – Jacob – 2014-06-22T04:30:19.960

1

SmileBASIC, 65 bytes

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

12Me21

Posted 2014-06-20T21:16:24.703

Reputation: 6 110

1

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);
}

segfaultd

Posted 2014-06-20T21:16:24.703

Reputation: 1 189

1are the newlines and the spaces at the beginning mandatory? Because you could shave off some characters over there. – Pinna_be – 2014-06-21T09:41:02.323

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.

cdlane

Posted 2014-06-20T21:16:24.703

Reputation: 351

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)
'>

marinus

Posted 2014-06-20T21:16:24.703

Reputation: 30 224

1shouldn't the output be in the center of the screen? – Pinna_be – 2014-06-20T23:07:20.893

0

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"));
        };
    }
}

Bob

Posted 2014-06-20T21:16:24.703

Reputation: 844

Asked: 2014-06-20T21:16:24.703

Viewed: 991 times

Active: 2018-02-02T02:40:34.813