14
\$\begingroup\$

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.

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

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)

\$\endgroup\$
  • 1
    \$\begingroup\$ You can reduce your character count by combining all of the lines in the while loops using semicolons. \$\endgroup\$ – isaacg Jun 21 '14 at 3:19
  • \$\begingroup\$ @isaacg thank you, I adapted it. \$\endgroup\$ – Pinna_be Jun 21 '14 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 Feb 1 '18 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 Feb 1 '18 at 21:35
5
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ as far as I see, your code perfectly works without the <html style=height:100%> at least in safari/jsfiddle \$\endgroup\$ – Pinna_be Jun 21 '14 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 Jun 21 '14 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 Jun 22 '14 at 4:30
1
\$\begingroup\$

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);
}
\$\endgroup\$
  • 1
    \$\begingroup\$ are the newlines and the spaces at the beginning mandatory? Because you could shave off some characters over there. \$\endgroup\$ – Pinna_be Jun 21 '14 at 9:41
1
\$\begingroup\$

SmileBASIC, 65 bytes

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

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)
'>
\$\endgroup\$
  • 1
    \$\begingroup\$ shouldn't the output be in the center of the screen? \$\endgroup\$ – Pinna_be Jun 20 '14 at 23:07
0
\$\begingroup\$

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"));
        };
    }
}
\$\endgroup\$
0
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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