Show Posts
1
Pixel Art / Pixel clock
« on: April 05, 2011, 08:48:39 pm »
I am trying to make a pixel art clock to display on a Web page. I eventually intend to combine several of these into a world time display.
The clock face:
I was having a bit of trouble with the shading.
Also, I am not sure if I should add a border or not.
I was happy with this font until I decided to do fancy shading to the clock face. Now, something seems to be... lacking.
I like the nice, big digits, but with this color scheme, the face seems a bit cramped. I am not sure what to change.
At one point, I tried anti-aliasing the digits, but that just made them look ugly.
The problem with this kind of design is, if you change one thing, you then have to change something else, and so forth.
Maybe I should just change the entire color scheme.
Here is the code to (very slowly) animate the clock.
Save this code as a file with .html extension, so that your browser can read it as a Web page.
Put the two image files in the same directory as the .html file.
Then, open the .html file in a Web browser.
You will then see my clock showing your local time according to your computer's clock.
The clock face:
I was having a bit of trouble with the shading.
Also, I am not sure if I should add a border or not.
I was happy with this font until I decided to do fancy shading to the clock face. Now, something seems to be... lacking.
I like the nice, big digits, but with this color scheme, the face seems a bit cramped. I am not sure what to change.
At one point, I tried anti-aliasing the digits, but that just made them look ugly.
The problem with this kind of design is, if you change one thing, you then have to change something else, and so forth.
Maybe I should just change the entire color scheme.
Here is the code to (very slowly) animate the clock.
Save this code as a file with .html extension, so that your browser can read it as a Web page.
Put the two image files in the same directory as the .html file.
Then, open the .html file in a Web browser.
You will then see my clock showing your local time according to your computer's clock.
Code: [Select]
<html>
<head></head>
<body>
<div style="width:70px;height:38px;position:relative">
<img id="cssclock_face" src="facetest24h.gif" alt="clock" title="clock" style="width:70px;height:38px;position:absolute;top:0px;left:0px;padding:0px 0px;z-index:1;"></img>
<div id="cssclock_ht" style="width:11px;height:22px;position:absolute;top:9px;left:3px;background-image:url(figstest24h.gif);padding:0px 0px;z-index:0;"></div>
<div id="cssclock_hu" style="width:16px;height:22px;position:absolute;top:9px;left:14px;background-image:url(figstest24h.gif);padding:0px 0px;z-index:0;"></div>
<div id="cssclock_mt" style="width:15px;height:22px;position:absolute;top:9px;left:33px;background-image:url(figstest24h.gif);padding:0px 0px;z-index:0;"></div>
<div id="cssclock_mu" style="width:18px;height:38px;position:absolute;top:0px;left:49px;background-image:url(figstest24h.gif);padding:0px 0px;z-index:0;"></div>
</div>
<script language="JavaScript">
<!--
function drawclock() {
var dht=20; // digit height
var now=new Date();
var mss=now.getMilliseconds();
var ss=now.getSeconds();
var mm=now.getMinutes();
var hh=now.getHours();
var mu=mm%10;
var mt=(mm-mu)%9;
mu*=dht; mt*=dht;
var hu=hh%10;
var ht=(hh-hu)%9;
ht*=2; if (hu==9) ht++;
if (ht==4) {ht+=hu; hu+=12;}
var huh="-37px ";
if (ht==2) huh="-35px ";
hu*=dht; ht*=dht;
mu+=((ss*dht/60)|0);
if (mu>9*dht) mt+=(mu-9*dht);
if (mt>5*dht) {
hu+=(mt-5*dht);
ht+=(mt-5*dht);
}
document.getElementById("cssclock_ht").style.backgroundPosition="-26px "+(-160-ht)+"px";
document.getElementById("cssclock_hu").style.backgroundPosition=huh+(-hu)+"px";
document.getElementById("cssclock_mt").style.backgroundPosition="-19px "+(-mt)+"px";
document.getElementById("cssclock_mu").style.backgroundPosition="0px "+(-31-mu)+"px";
setTimeout("drawclock()",(((60000/dht)-(ss*1000+mss)%(60000/dht))|0)+2);
}
drawclock();
// -->
</script>
</body></html>