Topic awaiting preservation: March 2005 - 20 lines JavaScript contest - XXX

The challenge for this month is a Roman clock/watch - of the style worn around 0 AD.

No archaelogist has ever seen one of these... so it may be digital, analog or even sundial in it's origin... but one thing we do know is that it uses Javascript and some HTML

For those of you unaware, the Roman counting system is rather unique...
1 thru 10 = I, II, III, IV, V, VI, VII, VIII, IX, X
10's thru 100 = X, XX, XXX, XL, L, LX, LXX, LXXX, XC, C

Imagine how tricky a digital readout might get:
12h 48m 34s == XIIh XLVIIIm XXXIVs

I hope you enjoy the challenge and come up with something we can send to the Smithsonian!

Cheers,
Jeff

PS: Could an admin please update the title of this post? It appears that I cannot edit that myself.

quote:

---

A code monkey said once:
As usual, the main rule is to make your script in 20 lines of (effective) code. Comas shouldn't be used to execute several instructions on the same line. See the code sample below to illustrate the basic rules:

code:

---

<script type="text/javascript">



/* */ document.body.onclick = function()

/* */ {

/* 01 */ val = prompt( 'enter a number' );

/* 02 */ for( i=0; i&lt;10; i++ )

/* */ {

/* 03 */ alert( stupidFunction( val, i ) )

/* */ }

/* */ }



/* */ function stupidFunction( a, b )

/* */ {

/* 04 */ return a&gt;b?a:b; // I said it was a stupid function

/* */ }



</script>

---

The document.body.onclick = function() does not count as a line as it's not some effective code and the function call could be put in the BODY tag ( or anyother HTML tag ). The declaration of the stupidFunction() does not count either for the same reasons. The comma in the line /* 03 */ is ok, since it simply separates the parameters of a function.

---

(Edited by BabyJeffy on 03-04-2005 13:17)

ROFL - any other subtle meaning to XXX intended?

Sounds cool. Think I might actually start work on this one before the 29th for once!!

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

Yeah sounds good, I think I'll be taking part this time.

Funny topic. I've had some doubts when I saw the title of this thread

Roman Timestamp


It displays a timestamp ( of the form: YYYYMMDDhhmmss ) in roman numerals.

FYI, some interesting articles that may be of use here:

http://www.novaroma.org/via_romana/numbers.html

Has interesting detail about Roman numerals - including the interesting fact (that I'd never realised) that there is no Roman numeral equivalent for the number 0.


http://www.wilkiecollins.demon.co.uk/roman/clockface.htm

Details the fact that "IIII" is more commonly used for representing 4 on a clock face than IV"


And here are some detaills on order-of-precedence (and other rules) for correct letter placement:

http://www.wilkiecollins.demon.co.uk/roman/1999.htm


I think I'm going to enjoy this!

Dan

I've also seen a "shortcut method" with which 1999 can be written : IMM or MIM,
1990: XMM
etc...

Well, it's crappy, but then it was thrown together in next to no time. It could look quite nice with almost no extra coding, just a couple of images (insert a few <img> tags instead of using text and so on...). But anyway...it's a bit of fun. Hopefully I will produce a better or, or perhaps just a completely new one

http://www.wraypa1.f2s.com/wrayal/20liner/Clock.html

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

Yo wrayal, it isn't working for me. Firefox 1.0.1

later

...
Look at me... god... I'm marvelous!

AT: ditto here. But it works in Opera, and IE. This is due to the use of the IE specific pixelLeft and pixelTop properties.

wrayal: One time, when the niddle of the seconds was supposed to show XXX, it showed NaN.

Sorry guys - since I actually started my movement towards compatability, I haven't done any movement stuff, so I'll have a quick google on how to make that compatible, unless someone wants to enlighten me

poi: pretty sure you must have looked at it within about the first 2 minutes of it being up - I quickly spotted this and have already fixed it...what it even was escapes me at the moment.

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

For the compatibility you should replace your :

document.getElementById( "heidi" ).style.pixelLeft = x

by

document.getElementById( "heidi" ).style.left = x +"px"

BTW, there's a mistake with the roman numerals in firstNumeralArray . At the moment is is :

var firstNumeralArray=new Array("","X","XX","XXX","XL","C","CX")

While it should be

var firstNumeralArray=new Array("","X","XX","XXX","XL","L","LX")

(Edited by poi on 03-08-2005 12:29)

Oops, my bad :\
Very silly mistake on the numerals
Should be fixed now, though I cannot test for compatability. Undoubtedly I've done something else stupid.

Also, to pedants, I know that for a second at the end of each minute there is a "leap" in time. But I just didn't want to stick in a 0, or just nothing, so...whatever

[edit]Thanks poi

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

(Edited by wrayal on 03-08-2005 16:11)

it works in FF1.0.1

wrayal, that clock is sweet.

Now onto the whole you're sorry, well man mistakes are for humans. Aren't you glad you're a script?

...
Look at me... god... I'm marvelous!

Hmm, I wonder if one could speed things up by using U+2160-216b for I -XII...

--
var Liorean = {
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Meh, it's a clock. It runs once a second, or perhaps a couple more in case it loses sync. Who needs speed?

Hopefully I'll find time to add more to mine. Graphics and so on. I was hoping to add in a sundial system instead of the hour hand, but then that would require me finding more than the one line I have left. There is a way of course of implementing the pos assignings into the array, but then I'm pretty sure that would be against the rules...whatever. Now let's see some other entries .

Oh, and of course congrats to poi - /me likes, though I forgot to say it before!!

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

wrayal: thanks, doing a real clock with roman numerals is cool too. To gain some lines you can get rid of the times and timePos arrays, and combine the lines where you set the style.left and style.top properties of an element on a single line. You can remove more lines too, but you're a big boy

Hehe, I'd take that as a slur if I didn't know you're always well meaning .
I know the aboput the combination of the arrays - indeed during coding that's how it was, but I got some lame errors, and debugging failed miserably. There are others of course - give me time

But the assigning on a single line?? That would be useful, though I don't actually know how :\. Better do something for myself for once -> google time!

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

Here we go - entry no. 1 for me (I'm hoping to make another one )

http://www.soterm.com/dan/20liners/roman/romanSmallv1.html

It uses a proper conversion routine (which will convert from 1 to 3,999,999). There is more blurb on the page about how it works, etc.

Just to clarify my use of the eval statement, btw... I know that I didn't need to use it, but it allowed me to shave 3 lines off of the total. So I felt somewhat justified

Tested and working in IE6, FF1, NN7, Opera7.2, and Safari.

500an

(Edited by BillyRayPreachersSon on 03-13-2005 19:49)

*bump*

I've found an interresting Hex Clock.

Here's v2:

http://www.soterm.com/dan/20liners/roman/romanSmallv2.html

It has been tested working in IE 6, FF 1, NN 7, Opera 7, and Safari. Unlike v1, I've gone for an analog style, with 3 dials (one for the hours, one for the minutes, and one for the seconds). A marker shows the current time.

Even though the Romans had no concept of 0, I thought it looked a bit out of palce with nothing, so I've used what charmap refers to as the "Currency Sign" (¤.

I was going to try and make it turn smoothly, but maybe that's for another day

Dan

Here's my submission:

http://home.hccnet.nl/n.v.d.maas/analogClock/roman.html

Have fun

Nice entry zubauza - cool stuff!

And, of course, welcome to the asylum, I hope you enjoy your stay

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

*bump*

zubauza: Welcome in the Asylum.

Nice entry, alas your script is a bit messy. document.write( "gasp! some document.write()" )
Oh, and you should have a look at "tutorial" : Drawing lines in JavaScript

Hehe, seems like it's April 1st, now....who's going to win?
Good luck all
And I sggest no "april fools" jokes with the winner announcement...that could cause havoc

Wrayal

Meh, one day I'll have a website worth seeing...honest

wrayal:

quote:

---

Meh, one day I'll have a website worth seeing...honest

---

Don't loose hope. It took me 3 years to move my *** and put "something worth it" online.

Thing is, while I write some, uh, 'interesting' scripts, and I have a good command of HTML and so on, I'm just not in the least bit creative. I mean the original site that was there was based purely on a couple of tricks. And congrats on your site - it's great, as I've said before .
Now....where's BabyJeffy?

Wrayal

Meh, one day I'll have a website worth seeing...honest

Thanks.

Hum, it's 4am. He's certainly sleeping ... like we should be.

First of all... great work everyone! If nothing else, I'm sure a lot of you now know how to count using Roman numerals

This month we got five very different entries - and I've watched as several versions of each were released, optimised and tweaked. Thanks for taking some time (sic) to put in an entry.

It's always tricky marking one solution better than another (as I'm sure you know). I have put together some observations and commentary on each entry below.

po1 - I was really impressed by your use of images to achieve the roman numeral calculation - this was an angle I had totally overlooked. 8 lines of code. Clever.

zubauza - Don't listen to the rest of them... document.write is fine in my book! The clock itself was fine. I did a count and your code came in a little over 20 lines (using commas to seperate variables during initial assignment is the problem in this instance... line 4 and 9 would therefore become 3 lines each). With some patience I reckon you could move things around a little to make the 20 lines regardless.

wrayal - I particularly appreciated the placement and movement of the h/m/s around the clock face. I can almost picture Julius himself getting a little excited over the movement.

billyray v1 - Nice choice of images for the backdrop on this one (I hear Julius Caesar quite liked Jean Michel Jarre). The function to generate the roman numerals is most excellent. Using eval is totally acceptable (especially since it saved you so many lines) and the ability of that conversion function to support such large numbers is commendable.

billyray v2 - Again a very slim amount of code - it was cool watching the dials all move one when the hour ticked over (no I didn't wait an hour to see this - it was chance). As you mentioned in your post... smooth movement would be a nice extra to add... but hardly a requirment.

A lot of you used setTimeout(). I wonder if using a setInterval() would have made everything a little smoother - just a thought? Still... everybody's clock worked well for me... even when I had them all open at once in the same browser (Safari for MacOSX in this instance).

I'm going to give first place to billyray for the first of his two entries. It was the conversion function that did for me in the end... very nice work on identifying the "half" numbers concept. Next was po1 for the novel approach he took to converting the time into Roman numerals using images. I have to mention that it was a tough call deciding on the two of you for this. Third place goes to wrayal with the numerals moving around the clock face - cool idea.

Again... to everyone that participated - thanks I'm sure that someone, somewhere, sometime will benefit from the lines you have strung together.

I'm looking forward to joining in with the next challenge now!

Jeff

(Edited by BabyJeffy on 04-02-2005 14:41)

Congrats guys - especially to billyray!

Now, bring on the next contest - and I promise I'll try to make my code elegant for once this time!

Wrayal

Meh, one day I'll have a website worth seeing...honest

Congrats everyone, and especially BillyRayPreachersSon.

BabyJeffy: It's cool to read your comments about all the entries.

quote:

---

poi said:

*bump*

zubauza: Welcome in the Asylum.

Nice entry, alas your script is a bit messy. document.write( "gasp! some document.write()" )
Oh, and you should have a look at "tutorial" : Drawing lines in JavaScript

---

I used exact the same technique that tutorial mentioned to draw my clock (DIVs with bgcolor). Using strechted images to draw lines is a very ugly solution IMO.

And indeed, the script is messy because cutting a circle into 8 pieces is a faster way to render it.

@BabyJeffy:

Sorry I didnt know using commas to seperate variables is forbidden. I should have omitted the var calls

As we said in "tutorial" : Drawing lines in JavaScript, it's absolutely possible to draw perfect lines using stretch & clip. The code takes a handful of lines and is *way* faster and usable than creating a zillion of 1x1 DIVs.

However, the zillion DIVs solution is probably more suitable for a 20 lines contest if you want to keep the code not obfuscated.