Topic: 20 Liners - January 08 - Dynamics

This month's theme is: Dynamics.

I know we've had similar competitions in the past, but we're all still getting our throwing arms back in and this allows for some variety. So this is dynamics in the loosest requirable sense.

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<10; i++ )

/* */ {

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

/* */ }

/* */ }



/* */ function stupidFunction( a, b )

/* */ {

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

/* */ }



</script>

---

e]
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 coma in the line /* 03 */ is ok, since it simply separates the parameters of a function.

---

Please branch out as much as you wish from the topic! (within reason...)

Examples of possible entries :

• A pool game
• Particles in the wind
• An aerofoil simulator
• A radoll?
• Pinball
• ....

Best of luck to all! Can't wait to see what you might come up with



[edit] Oh God...had an extra stupid moment. That should be, of course, "JANUARY 08" in the title, but it won't let me edit it. Also, that spurious "e]" shouldn't be there - I think this is a bug! [/edit]

(Edited by wrayal on 01-03-2008 17:55)

We can call that a "concept entry" and label it time machine

As for the constraints that rule the Asylum, and reinventing stuff... ~coughcough shall I say.

Great concept. Totally all over this!

...

Everybody seems to be.

Cheers,

+1 and I should have more time in January.

Yay! Another competitor ^_^ I wonder if there are any around who only frequent the general forum but used to participate back in the day? Also, I was a fan of restricting to 20 lines - adds to the challenge. But maybe if the winner each month wants to set the line limit in addition to the topic for the following month?

Wrayal

Settings the line/size limit is cool too.

Just make sure I don't get to set the next contest or you guys might end up with a 256b limit or something nuts like that



(Edited by poi on 01-04-2008 18:43)

First entry, woo! (Simulation of a growing tree counts as dynamics, right?)

http://www.lonelypinkelephants.com/random/jan08.html

Since I have a bunch of lines left, I may modify it to actually resemble a tree growing, instead of springing, fully-formed, from the ground.

Also, I'm very sorry about the slow frame rate... there's just too many DIVs! I might try playing with the Canvas tag, too...

(Edited by iron_wallaby on 01-04-2008 21:41)

Stunning. Stop being sorry and spend some of that time with Ms. Wallaby, you just raised the challenge *that* much.

IW: Very impressive Like the idea, the script...even love the design Also, it most certainly comes under dynamics, don't worry ^_^ It'll be interesting to see what you can do RE speed too :P

BTW guys, I know this isn't the normal topic of conversation on this board, but as we're considering diminutive code....I think you guys might be able to give some other coders a kicking here: http://sla.ckers.org/forum/read.php?2,18790,18790 Only got a week though, so be quick!

Using canvas, with a couple drawImage() using an image that looks like a cone with a round bottom for the joints, it just should be super fast and look even better. You could probably even make it swing in the wind and add an image of foliage for good measure.

Well done and nice code too.

my humble try

not very dynamic, nothing special either but this is the best i could come up with right now ...
edit: bah ... disregard this entry ... i'll come up with something better

(Edited by Arthurio on 01-07-2008 19:44)

Arthurio: Don't put yourself down; I think it's quite funky ^_^ Though that said, the more entries the better. Just one thing, if you find yourself running out of lines, consider the '?' operator, it could cut the 4 lines concerning the origin of the explosion down to 2 (easily) or 1 (with a little cheeky fiddling :P)

Nice.

One more way to cut down lines in event handling is to use the || operator to provide a fallback/default value, e.g:

var x = Math.round(Math.random()*540)+50;
if (e.pageX)	
	x = e.pageX;
var y = Math.round(Math.random()*380)+50;
if (e.pageY)
	y = e.pageY;

becomes

var x = (e||{}).pageX||Math.round(Math.random()*540)+50;
var y = (e||{}).pageY||Math.round(Math.random()*380)+50;

Notice the (e||{}) which fixes the JS error of trying to access a property of e when shoot() is called by the setInterval()

Also instead of clearing the explosion manually, you could constantly do a fillRect(0,0,540,480) in rgba(0,0,0,.2) for instance.

Hope that helps,



(Edited by poi on 01-08-2008 00:35)

thanks, I'm working on something new tho

and here it is

proudly presenting ...

colorful bouncy bubbles with user interaction and sloppy collision detection! all in 19 lines

http://www.kaarellumi.com/asylum/html/dyn4.htm

about rules ... is
try {a[i] = b;} catch (e) {}
one line or more?

I'd say 3.

/* 01 */    try
/*    */    {
/* 02 */        a[i] = b;
/*    */    }
/* 03 */    catch( e )
/*    */    {
/*    */        // ...
/*    */    }

But don't worry, people won't bite your head off if you post a 25 liner. Are you sure you need to catch the exception anyway ? can't you check if b is valid or provide a default value.



Speaking of line count, I'm looking into chained function calls à la jQuery. How do you guys feel about them ?



(Edited by poi on 01-09-2008 16:12)

Ok, so how many lines do you guys count for this very specific methods currier ?

/* A */    for( chainThat in {methodA:1,methodB:1} )
/*   */    {
/* B */        anObject.prototype[chainThat] = function( func )
/*   */        {
/* C */            return function()
/*   */            {
/* D */                return func.apply( this, arguments )||this;
/*   */            }
/* E */        }( anObject.prototype[chainThat] );
/*   */    }

• 5 ?
  
  
• 4 since the line E is the just calling the anonymous function declared in B and hence is part of the declaration of anObject.prototype[chainThat] ?
  
  
• less ?

That shouldn't make much difference obviously but I'm curious.



(Edited by poi on 01-10-2008 05:30)

What's with getting all feely?-)
I'd say 5, because
>> line E is the just calling the anonymous function declared in B

The line of code is "just calling an anonymous function" - just calling, I don't care it's anonymous,
it is a "call" so the line has an action of it's own. I'd therefore count it as valid.

Oh, and jquery seems as nice as widely spread, and surprise! It's not
really compatible with many browsers out there. Go figure..

I count 4 lines, though I DO consider the technique similar to using a comma to put an extra line of code in.

If you want to be fair, count it 5.

Fair enough. At worst I could mangle the loop to make it more 4-line-ish.

argo navis: FWIW I'm not using jQuery.

I am not saying you do : I am just witnessing that many large companies use a js lib that does not care much about backwards compatibility.
So I mark that down as "let's focus on forward compatibility" for myself.

Candle flame in 10 lines

link

Excellent Arthurio, you're getting the hang of it : it's a GAME - so, much like relationships, it's not about winning and losing,
it's about experience and growth - a social activity for a Mad Scientists society ,)

Although I like your second entry, on this laptop, which is reaching the end of it's lifecycle (~5 years), it's sluggish - certainly
because of the alpha blending recommended by p01 : makes for a sweet motion blur, but my machine cannot stand it.

(And of course, remember that a challenge is a great gift in such settings)

Thanks but ... awww ... you're so full of yourself

quote:

---

argo navis said:
you're getting the hang of it : it's a GAME - so, much like relationships, it's not about winning and losing,it's about experience and growth - a social activity for a Mad Scientists society
...
(And of course, remember that a challenge is a great gift in such settings)

---

It's my love for programming that I'm trying to express and js is something new and exciting to me especially as an art form. This is why I've posted 3 entries. No need to tell me that it's a game. I've long taken part and enjoyed the various forms of semi-competitive entertainment here at asylum.

You're a smart guy but don't try to act as if you were the only one

Please don't take offense. (...ahh ... why does this always sound so hypocritical

I happen to know my worth, bite me.

AND...
I am the initiator of this contest historically - the guy who brought it up first AND resurrected it - simply : I don't hold it as a duty
or a title, but talks like this (quote from you ten posts above) :

quote:

---

not very dynamic, nothing special either but this is the best i could come up with right now ...
edit: bah ... disregard this entry ... i'll come up with something better

---

Sound very much like the middle of puberty.

quote:

---

Please don't take offense. (...ahh ... why does this always sound so hypocritical

---

Sound very much like the next stage of puberty when you can't take constructive criticism as constructive, and feel like
the most powerful being on earth and having to prove your worth.

Reality check : you're not, and I don't claim to be myself, but instead of sounding whiney and bitching at me right there and then,
you could take and use the advice - then you'd prove your worth without sounding like a dumb ass.

I recommend do in the future as far as I am concerned - and don't worry, I will refrain from giving you pearls
if all you can do with them is wave your shineys back at me.

(aw, why do comments like this sound so BLUNTLY HONEST).

Can we all behave like Gentlemen and ladies here ?

Arthurio: Nice colors. How does it perform with more pixels ?

No prob, poi, to me it's "over" - but it's important to set boundaries early on also in relationships,
I don't like giving positive feedback (can someone point out something negative in my above comment?)
and receiving such an arrogant response publicly, period - I will NOT deal with it on these terms.

If any comment not directed towards javascript code is to be posted, feel free to mail it instead, argo.navis, yahoo email.

argo navis: wow what a reaction. Sorry I offended you but I really couldn't see any constructive criticism in the sentences that I quoted. Other than that you said that my 2. entry was sluggish. Yeah, I know. I think we much missed our intended tones of our initial posts as it so often happens on the internet. I hope you can forgive me one day.

poi: It gets progressively worse I tested it with 20x20 and 30x30 and I didn't get very good results but I'll give it a few more tries. The 2 main problems that I can think of are that many of the 'pixels' are wasted and recalculated even though they remain black and the 2. problem is the extensive use of Math.atan and Math.sin for calculating the color values and the shape of the flame.

Arthurio: you sure it's the calculation itself ? In my experience the bottleneck is usually the rendering engine. If you don't mind dropping IE compatibility, you could generate a BMP image using a data: URI*. I tested a fire effect using the one-zillion-DIV technique versus the BMP data: URI . The later was almost 20x faster.

*: see GIF/PNG generation with JS?



(Edited by poi on 01-11-2008 13:39)

Do not lend me intentions or distort them - you called me "full of yourself", don't try that again out of a humorous comment which yours was NOT,
and you have not adressed my question directly "by the way".

Reminder, the question was : can you see anything negative in the above comment?
What exactly?

It's not a matter of forgiveness or anger - I have experience in the field, you can benefit from it or keep petting yourself over
small circles that bounce around sluggishly, this depends entirely on HOW you choose to welcome advice.

So, now that you've displayed passive agressivity towards me, and keep twisting my words, care to answer my question and make a point?
Because that is the line between a self proclaimed "smart guy" and a man, fwiw.

(Edited by argo navis on 01-11-2008 13:46)

quote:

---

Reminder, the question was : can you see anything negative in the above comment?
What exactly?

---

Can be bothered to check, but the comment you made right after this quote wasn't exactly positive.

Anyway. Can all put on our happy face ? it's friday, we're here to make cool tiny scripts and have fun, right.



(Edited by poi on 01-11-2008 13:49)

I AM here for that and you are not adressing my question either.
I refuse being called names, and since the kid did that publicly, I am forced to adress his arrogance publicly.

>> I hope you can forgive me one day.
If you do make a clear apology, OR you demonstrate I started off insutling you, yes.

poi: no I'm not sure. It was just a guess. I guess I don't care much about IE compatibility with those kinds of things

Here's a better resolution and cropped version of my candle flame: link

(Edited by Arthurio on 01-11-2008 13:55)

No real improvement there, just a different decoration : a more realistic flame looks like this, posted a few years ago.

The sine movement in yours shows - it's a bit too simple - the colors are ok though, I second poi on that.

^ oh, that's the fire I tested against BMP data: URI

So, to wrap it up Arthurio : there is a third option for you to regain my respect.

Demonstrate in actions you are worthy of entering the top three, rather than sine waving squares ,) Good luck!

argo navis: I apologize for improperly apologizing for reacting to a post of yours that was insulting to me. I have hard time putting this into English but I couldn't let you off with a post that in ways (imo falsely) implied my inferior understanding of this particular form of entertainment and of things that in no way concern the thread nor my entries. I've read your post a few more times now and I see now that although your post seemed insulting to me It was obviously not in your heart to mean harm and this is why I'm apologizing for my harsh reaction.

Peace out : I do sound cocky and arrogant and full of myself (because my smile and my heart do not show up on the web - just the words),
you're not wrong about the fact I can come across as disturbingly pompous (it never is my intent though), but what I really mean is :

"you're GOOD and we all KNOW since we have seen your interest for javascript
many times now with good to great results- I remeber some fractal explorer for example,
and I remember it off the top of my head. This is worthy of me trying to help you GET BETTER as much as I CAN."

This doesn't imply I am better than you at any given point - I may be more experienced but that's it.
I do not feel I am better than any of my human fellows - I feel human beings are amazing.

It's all cleared to me, really, but it still is a good chance for you, now that you found yourself enjoying the contest,
to really shine - you DO have all it takes, this never was a question to me.

So cheers, happiness, and let's all enjoy what comes next.

quote:

---

argo navis said:
The sine movement in yours shows - it's a bit too simple - the colors are ok though, I second poi on that.

---

Yeah, I know it's not realistic. My goal was to somewhat realistically resemble the flame of a candle not anything bigger. I looked at a few pictures and concluded that my flame should look like a stretched out oval, thinner at the top with a little bit of blue around the wick then some orange and a large area of bright yellow. But without wind or anything to influence it the flame would have been almost completely static and that just seemed boring so I added some swaying for effect.

Check my previous post that expresses clearly how much I value your work (end of page 1) Sincerely.

Now, I'll tone down my arrogance once again : you can do great things Arthurio, in fact you already do,
so in respect for that, I am just trying to point out areas of improvement - but the freedom to create what you want is yours,
and it's what makes your snippets shine - your own IDEAS.

Keep up the good stuff, please do. Now, in respect for other inmates, let's get back to the topic at hands, and please suprise all of us as much
and more in the times to come.

...Game ON! D-day minus 20...

argo navis: Ahh ... enough with the flattery I did read it. It's cool that you remember my Mandelbrot experiment.

poi: how does canvas compare to bmp generation performance wise?

For anything related to transformations, blitting, etc... Canvas is king.

For pixel based effects, BMP is better.

I haven't done any perfomance test of canvasContext.getImageData() and canvasContext.putImageDate() so Canvas might be the king of the hill. Also, notice that these 2 methods are only available in Fx2+, Op9.5b so far.

Kick ass, Arthurio. I like the effect, and I am duly impressed by the iterative improvement you have been displaying!

Thank you very much kind sir

However ...

*dramatic drum roll*

Here's probably the last and final iteration of my candle flame entry: Tadaa!

Completely reworked drawing functions. Added wick, background, sharp(ish) edges on flame and an improvised color gradient thingy for customization comfort .

Frame rate isn't much tho but you'll understand what's going on ... some things could be optimized but I don't think I wanna to get into that. I'm really proud and excited about how this one turned out.

edit ... hehe: should have listened to what poi is always suggesting (luts) ... first frames are slow as they are being generated but now it gets much smoother and faster after a while: Tadaa!

Here's another one that moves around much less: link

(Edited by Arthurio on 01-14-2008 23:39)

neat. I like when the flame gets a yellow tint.

poi: thanks ... btw ... looks like the calculation may easily take a lot more time than displaying the picture ... CPU load drops to 0 once the frames have been generated and stored in cache

Normal, once you've cached the images, the browser only has to do one redraw per frame. Redraws are very fast. What's slow is when the browser needs to reflow the document. In your case it shouldn't happen since you forced the resolution of the image in CSS. Anyway one or two reflows per frame is fine too. It's a shame the number of reflows and redraws is little exposed in browsers.


Lines 19 & 20 can be merged into something like:

var[9][++var[3]%60]=getElementById('image').src=var[9][var[3]%60]||getmage(var[3]%60);

Sorry I couldn't resist trying to save one line

thanks

I think you meant

document.getElementById("image").src = vars[9][Math.floor((vars[3]=(vars[3]+Math.PI/60)%(Math.PI*2))*60)] = vars[9][Math.floor(vars[3]*60)]||getImage()

anyway here it is: link

Mhhhyeah, good stuff. Colourful and well drawn, realistic. Thumbs up.

Side note : I suspect the Canvas pixel capabilities to be stunning on some browsers - because the model is very close to the model
of a graphic context in Java - thus, I know ways to tweak it in order to access the image source extremely fast.

Btw poi, where can I check your Canvas 3d snake? (OpenGL, am I correct?)

I know there are 2 more weeks to go but where are your entries poi and argo navis? :P I want to be inspired

have to find something to do first

Arthurio: nice flame, but it runs like molasses on my computer. I guess it's very processor intensive, and my processor ain't all that quick.

I love dropping by these threads and checking out the amazing things you guys do, even though most of it is beyond me.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Well yeah, the first 20-30 seconds or so it's basically loading but it gets a lot faster after that.

Canvas doesn't seem too bad for pixels, lookie, Some good examples of Canvas in action.

What browser/version are you using?

I have Firefox/2.0.0.11 here at work and I don't want to install anything unless it works for sure. FF3b is still way too buggy to work with.

It worked for me in OP9.5b ( or any weekly ), I assume it works in FF3b2.

Works a threat in Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127

Also known as FF 2.0.0.11

The guy gets 4 fps at 640 * 120.
Quick computation :
640 * 120 == 76800
And 128 * 128 == 16384

Ratio : 4.68 less pixels when rendered in a little square.
Makes for some 20 fps, and with a little scaling you get a 256*256 pixels animated image.

(Edited by argo navis on 01-17-2008 14:49)

Oh, glad to see it's in FF2!

That test is not really stressing the API. It fills the whole imageData with the same color. And since you have to individually set the RGB compoments, I'm not sure it's actually faster than the BMP approach where you can set them in one go.



(Edited by poi on 01-17-2008 17:46)

Hey guys,

Sorry I've been a bit of an absent judge - I've had a few v. important deadlines the last couple of weeks! Anyway, I like what I've seen so far but...I want to see more! :P

I'll be working on my entry soon, though maybe it won't be as tip-top as I expect yours all to be

Suho: I know, they're very funky care to try your hand? It's great fun, and all entries are welcome

quote:

---

poi said:

I'd say 3.

---

I'd say you should count only the lines that actually contain executable code. Neither the "try{" nor the "}catch(e){" part does anything in and of themselves. I don't think a "try{}catch(e){}" should count as two lines, since it doesn't affect the program at any point.

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

It completely does instead : it simply is a conditional operator like "for, if" and the likes - what's that to say? That if an else
section is never to be executed "just because", the content of the mentioned section should not count as part of the code.

quote:

---

It completely does instead : it simply is a conditional operator like "for, if" and the likes - what's that to say? That if an elsesection is never to be executed "just because", the content of the mentioned section should not count as part of the code.

---

Well, there's a slight difference there:

if(expr)
    stmt1;
else
     stmt2;

I'd say expr, stmt1, stmt2 are what counts. Count whatever code is actually executable. In

try{
    stmt1;
    stmt2;
}catch(e){
    stmt3;
}finally{
    stmt4;
}

I think stmt1, stmt2, stmt3, stmt4 are what counts, because they are what code is actually executable.


In short, no, a path that is not taken is still counted. However, a path counts for the number of executable things in that path, not for the peripheral syntax.




Another point, regarding poi's example:

/* A */    for( chainThat in {methodA:1,methodB:1} )
/*   */    {
/* B */        anObject.prototype[chainThat] = function( func )
/*   */        {
/* C */            return function()
/*   */            {
/* D */                return func.apply( this, arguments )||this;
/*   */            }
/* E */        }( anObject.prototype[chainThat] );
/*   */    }

The lines I think should count are:

1:    for( chainThat in {methodA:1,methodB:1} )
2:    anObject.prototype[chainThat] = function( func ) {...} ( anObject.prototype[chainThat] );
3:    return function() {...}
4:    return func.apply( this, arguments )||this;

because B and E are a declaration-application pair, in one single expression, that is not a list expression. To illustrate what I mean better, consider the line count if it was split out to a separate declaration. The line count for that should be exactly equivalent to the line count for this:

/*   */   function fn( func )
/*   */        {
/* C */            return function()
/*   */            {
/* D */                return func.apply( this, arguments )||this;
/*   */            }
/*   */        }

/* A */    for( chainThat in {methodA:1,methodB:1} )
/*   */    {
/* B */        anObject.prototype[chainThat] =
/* E */            fn( anObject.prototype[chainThat] );
/*   */    }

But then again, I've not participated in a 20 liner yet, so count my opinion for what that's worth to you...

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

(Edited by liorean on 01-22-2008 23:57)

I personally wouldn't even challenge it if it wasn't worth it.

I have no "direction right" over anything - who gives a damn what is worth to ME only on this one?
I do care about what is worth to the crowd - remembering achievements by poi and yourself,
I am willing to "accept" your understanding of javascript - not blindly, just lending special attention to it.

But we're a crowd, if not a "team" of ubber-js-geeks : I propose we open another thread to evaluate the rules of 20 liners
and discuss it wildly (just for the sake of separating topics).

yup having more discussions in DHTML/Javascript would be a good idea.

liorean perfect illustration of what I had in mind for the methods chainer.

Made a little gadget. Not much visually.

Walking sim
Walking sim (curve drawing functions uncommented)

Curves represent how much the joints are flexing (red leg).

I guess there may be better ways for doing it but this is what I managed to come up with.'

edit: Walking sim moving (with curves) ... looks a little stiff ... hmm...

(Edited by Arthurio on 01-26-2008 23:03)

mmmm ... interesting 3D effect

Good stuff all the way. The 3d effects reminds me of some "sunflower" OpenGL app I have made, which I may make public or not.
Long story made short : if you download the pixeltoaster library examples, you'll see it's possible to produce really nice 3d "flowers"
using cubes or other polygons and "color addition" (adding r g b components of two images and clipping the result to 0-255 boundaries).

(basically, with two or more wireframe, rotating color cubes, if you use color addition, you'll get a nice "trace" that totally makes it look
like a flower).

I've used color addition on www.beyondwonderland.com/old
On the black layout, homepage, "galaxy" applet. If you click the applet and press "m", you'll see color substraction in action (and s shows the sprites used,
i toggles the ini sig on/off).

It's time for some

Dynamic Hypnoglow



Firebug reports a very useful error An invalid or illegal string was specified " code: " 12. So until I can make sense of that, I'm afraid, you'll have to check this 20 liner in Opera 9.5




(Edited by poi on 01-27-2008 22:21)

And probably not in Opera 9.2, it works strangely for me in that browser (it's not as smooth as in your screencap, gets a bit crippled).

Looking forward to the smooooothe version!

Wow

That looks really cool ... and pretty fast too.

( (788-j*287)%1337 )

live and learn ... I didn't know there were such things as "globalCompositeOperation"

works only with opera 9.50b ... displays some strange shapes and dark areas in opera 9.25

"invalid or illegal string was specified"
I've seen a lot of that with NaN ...

poi: It works in my Firefox 3.0 Alpha (assuming what it displays is correct - it looks close to your screencap ^_^) It doesn't however work in safari (expected :P). Just a couple of things:

1) 'descent' =/= 'decent' :P
2) I'm not too familiar with Canvases as I've mentioned before but...I assume there's no gross manipulations of the rules here? :P
3) The curves don't seem to vary in a very obvious way with the mouse (non-locally) - is this deliberate?
4) I missed the image call on my first run through the code...I was trying to work out how the javascript could possibly produce those words (I now feel adequately silly!)

It is a fun script though!

Who else are we going to see scripts from? I'm hoping to get a nice little one done soon (just inside the deadline if I flog myself...), but nothing too serious, hopefully there'll be something more fun from me next month!

Liorean? Argo? :P

Wrayal

[edit] On a separate note, how do the inmate rankings work? Do I need extra shock therapy to rank up from III to IV? :P[/edit]



(Edited by wrayal on 01-27-2008 22:41)

ahh yes ... works with my ff3 too ... almost the same as in opera 9.50b but there's some glow on the bottom of the canvas and the image looks much smoother (better) ... same thing that happens in ff and opera with embedded images only in reverse ... pixelated in opera, smooth in firefox

wrayal: the advancements are random :P (gets less probable every time) specially designed to fit in to this crazy place

Oh nice about Firefox 3. I tried a previous ( aka broken ) version of my script without success in it and only tried in Firefox 2 since then.

The Canvas implementation in Safari is a bit behind that of FF3 and Op9.5


1) damn I always mix the two
2) well, Canvas' methods are not chainable normally, but I make them so to gain a few lines. Abuse or not, you guys decide
3) decreased the influence of the mouse to a point where humans can understand it how it works
4)

Thanks.

I see...nice, I'd been looking at the chaining mechanism. Also prefer the new mechanism for the mouse - makes it give fewer super-erratic oscillations for me.

Also, I was thinking about grossly rule-abusive mechanisms, when I remembered this: http://en.wikipedia.org/wiki/Tupper%27s_self-referential_formula - wonder if any future deliberate rule-abuse attempts might take some inspiration?

The foreground ribbon changes colour with time and mouse position now. It give some shiny multicolour bleeding.

poi: to get it working with ff2 you just need to edit line 09:

/* 09 */ for( var j=0; j<3?(ctxL.fillStyle = (['#165','#457','rgb('+ Math.round(24+(window.sY||0)/19+34*Math.cos(j+now/8192+(window.sX||0)/92))+','+ Math.round(16+20*Math.cos(j+2+now/7192+(window.sy||0)/71))+','+ Math.round(32+24*Math.cos(j+4+now/5192+(window.sX||0)/87))+')'])[j]):false; j++ )

notice the "j<3?(" and "):false"

Still it looks much worse in ff2.

(Edited by Arthurio on 01-28-2008 10:20)

Oh, thanks!

Unfortunately the "fix" also makes the code less generic. To change the number of ribbons and their color, one must now alter the array and the exit condition. Will fall back to that fix if I can't figure another way.

did not expect FF2 to violate the specification of such a simple property.

quote:

---

If the value is a string but is not a valid color, or is neither a string, a CanvasGradient, nor a CanvasPattern, then it must be ignored, and the attribute must retain its previous value.

---

WHAT WG : Canvas, fillStyle

quote:

---

poi said:
Unfortunately the "fix" also makes the code less generic. To change the number of ribbons and their color, one must now alter the array and the exit condition.

---

You can replace the '3' with yourArray.length but right now the array isn't dynamic anyway so I don't see the problem :P

Also ... in case of

([1,2,1+2])[3]

I think the 1+2 may get evaluated, no?

(Edited by Arthurio on 01-28-2008 14:57)

(very quick one : ALL browsers with Canvas violate the spec in one or many ways, see tech notes of a very nice Canvas game engine called "canvex")
(off to enjoy flowers of the beautiful Swiss spring - walking flowers at that)

Fixed. The code is still as generic as before and it's a bit cleaner.

argo navis: Of course, but some parts of the specification, including fillStyle, are pretty solid and haven't changed for many months. Also the fail conditions of fillStyle are really simple and common.

Theory confirmed.

true?(([1,2,alert("asd")])[3]):alert("bla");

This code displays an alert with message: "asd".

false?(([1,2,alert("asd")])[3]):alert("bla");

This code displays only one alert with message: "bla".

So poi: this little "j<3?(" and "):false" may actually save you a little bit of processing time :P

edit: hehe too late

(Edited by Arthurio on 01-28-2008 19:22)

So any more entries ? Come on guys, the clock is ticking. Liorean, Argo Navis, Wrayal, Iron Wallaby, MaGnA, any one ?

3-4 days to go ... plenty of time ... don't be shy

quote:

---

wrayal said:
Who else are we going to see scripts from? I'm hoping to get a nice little one done soon (just inside the deadline if I flog myself...), but nothing too serious, hopefully there'll be something more fun from me next month!Liorean? Argo?

---

Well, most of your 20 liners seem to have something to do with graphics. I'm not a graphics guy. In fact, I know pretty much nothing about rendering and image manipulation. I can write a state machine parsing code into a tree structure (probably needing more than 20 lines unless the grammar is dead simple, though , and a code generator transforming it to byte code, and an interpreter executing the byte code, but I wouldn't know where to start, what to do or how to do it when it comes to rendering something. And even if you had a challenge that fit me, it's not likely I would have the time to cook something up and polish it.

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

obviously not for the challenge ... just fooling around

Is there a good/quick way for sorting/ordering polygons in such a simple scene? Right now I just sum the z-s and sort by that but it doesn't work too well... I know very little about z buffering and 3D is all too new to me ...

liorean: well then this is a great opportunity to get more familiar with some js graphics :P but I don't think it says anywhere in the rules that is has to be visual ...

(Edited by Arthurio on 01-28-2008 22:18)

No need for Zbuffer. Just sort the polys based on their furthest vertex.

True, the presentation doesn't have to be shiny. Great code shine by itself.

poi: You mean like Math.max(z1, Math.max(z2, z3)) or something else?

edit: because that I've tried and it didn't work ... maybe I'm doing something wrong
link
link

(Edited by Arthurio on 01-28-2008 22:56)

like Math.max( z1, z2, z3 ) oh and you should have some backface culling.

OK, here's my first contribution to something like this, ever

Rockford the Invincible

It's a half-assed Boulder Dash implementation in 26 lines. I didn't exactly get a hang of how you guys count lines yet, so I may be miscounting. I'm not familiar with all the JavaScript code obshortification techniques that you guys know about. How can I improve this to shave 6 lines?

I used a single GIF image I found on a website for the graphics. They are the original Boulder Dash sprites. I may crop & reorder them to optimize the CSS a bit. Also, the colors are a bit too dark...

<crappy-signature>magnetiq.com</crappy-signature>

(Edited by MaGnA on 01-29-2008 06:55)

(Edited by MaGnA on 01-29-2008 07:16)

Definitely something original in the context of 20 liners! Doesn't look too dark to me.
Some user interaction would be nice

Use inline if instead of normal if statement.
condition?statement_a: statement_b;
or
variable = condition?expression_a: expression_b;

Neat.

Hum, since an expression can be executed in the case statements, I'm tempted to count them too.
But I'm almost sure it can be shrinked to 20 lines. It might take to reorder the sprites and use proper array for the map instead of juggling with className and slices.


The week I got my first laptop, I made a Boulder Dash while commuting in the trains it was pretty cool way to spend time. Will try to put my hands on it. The code was not so big, about 4-5 kb for the markup + game logic and a few more kb for a few levels.

poi: thx, backface culling did it

link

quote:

---

Arthurio said:
Use inline if instead of normal if statement.
condition?statement_a: statement_b;
or
variable = condition?expression_a: expression_b;

---

That's not quite how it works, I'm afraid. The conditional expression always looks like this:

conditionexpr ? truthypathexpr : falsypathexpr

If you try to use statements of any kind in any of the expressions, you will find the code gives a syntax error.

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

try

true?alert("asd"):alert("bla");

or

var a = 0;
1==2?alert("true"):(a=2);
alert(a);

Arthurio: which is the normal behavior of the ternary operator, as Liorean said:

condition?expressionIfTrue:expressionIfFalse;

Of course expressionIfTrue and expressionIfFalse can include function calls and even code blocks, but it must be a single statement/expression ( which can include , ).



(Edited by poi on 01-29-2008 12:59)

Arthurio: Thanks for the suggestion about the ternary conditional operator instead of ifs. Is there a way I could capture mouse position without wasting too many lines?

poi: I've ditched the switch-case and replaced it with a for-in, for your temptation to count the case labels

I don't know how switching to a normal array would reduce the # of lines; it would eliminate the "className" references but the # of lines would be the same. Am I perhaps missing something?

Re-ordering the sprites would also just help optimize the CSS and I wouldn't gain any JS lines from that.

Implementing BD clones is a hobby of mine as well I have so far had one 68000 implementation on Amiga, one on Delphi and another (more complete) one in JS. Seems like the first thing I do when I get my hands on a new language is to implement a BD clone, instead of a "Hello World!"

The code is now down to 15 lines and now I'm tempted to add more elements

Features:

* Boulders and diamonds obey gravity
* Boulders and diamonds slide over walls and other boulders or diamonds
* Boulders prefer to slide left when balancing on another boulder or diamond
* Diamonds prefer to slide right when balancing on another boulder or diamond
* Butterflies are left-hand followers
* Rockford has a mind of his own

<crappy-signature>magnetiq.com</crappy-signature>

(Edited by MaGnA on 01-29-2008 18:34)

Make that 16; I should probably have counted the "g = { ..." as well.

<crappy-signature>magnetiq.com</crappy-signature>

quote:

---

MaGnA said:

Make that 16;

---

great! keep up the good work

MaGnA: Nice optimizations.

I see you're using the JS 1.6+* Array.prototype.every method which is a Mozilla invention. To make your code cross browser, you can add this 2 liner

Array.prototype.every = Array.prototype.every||function( callback, that )
{
	for( var i=0; i<this.length && callback.call( that||this, this[i] ); i++ );
	return i==this.length;
}

This at least makes the script work in Opera 9.5, but thows in IE7. Will try to figure why.


Regarding mouse capturing, for line optimized things, you can do it in 2 lines.

element.onmousemove = function( event )
{
	var event = window.event||event;
	window.mouse =
	{
		x:event.offsetX||event.pageX,
		y:event.offsetY||event.pageY,
		b:event.which||event.button?true:false
	}
}

Where element is an overlayed element on top of the area you want to capture the mouse.

HTH

As for my saying about using an array instead of classNames, I don't know for sure. It's more a gut feeling. OTO the functions hash table technique is really compact.



*: wouldn't be great if there was a standard body for JavaScript instead of browser vendords adding whatever they want with no discussion. I'm really looking forward to ES4



(Edited by poi on 01-29-2008 20:39)

Got it. IE7 doesn't like:

foo( undeclaredVariable=expression )

To get the script to work, declare k, ci and d or place them in the g global game object to not loose any line



(Edited by poi on 01-29-2008 21:11)

quote:

---

Arthurio said:
true?alert("asd"):alert("bla");

---

Which consists of three expressions. A function call is not a statement, it's an expression.

To show you an example of what happens when you actually try to use statements in it:

true?true:return false;

As opposed to

if(true)
    true;
else
    return false;

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

quote:

---

poi said:

MaGnA: Nice optimizations.I see you're using the JS 1.6+* Array.prototype.every method which is a Mozilla invention.

---

And on ES4 track, and supported by WebKit.

quote:

---

Array.prototype.every = Array.prototype.every||function( callback, that ){ for( var i=0; i<this.length && callback.call( that||this, this[i] ); i++ ); return i==this.length;}

This at least makes the script work in Opera 9.5, but thows in IE7. Will try to figure why.

---

Strange. It works well enough in IE7 when trying to analyse it like this:

var a=[];
alert(1+' '+Array.prototype.every);
Array.prototype.every = function( callback, that ){
    alert('every!\n'+this.length);
    for( var i=0; i<this.length && callback.call( that||this, this[i] ); i++ );
    return i==this.length;
}
alert(2+' '+Array.prototype.every);
[0,1,2,3,4,5].every(function(x,y){alert([x,y]);a.push(x+':'+y);return true;});
a.join('\r');

quote:

---

*: wouldn't be great if there was a standard body for JavaScript instead of browser vendords adding whatever they want with no discussion.

---

JavaScript being Mozilla's version of ECMAScript, I'd say Mozilla is the standardising organisation. They're driving the ES4 process, too, so expect JavaScript1.6-1.9 additions to be included in the ES4 standard library.

quote:

---

I'm really looking forward to ES4

---

You're not alone.

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

The lack of every method was not the only breaking in IE7. IE7 also chocked on undeclared variables. See my previous post.

Allright, Mozilla == Netscape == the creators of LiveScript aka Javascript. Sort of.
Beside they are not the only driving ES4, which is a good thing. More people playing the game means better, proper, standards. But well, I'm longing for ES4.



(Edited by poi on 01-29-2008 22:11)

liorean: ok thx for the explanation

btw 105. post in this thread ... we haven't seen a js thread burn this bright (pointing at the flaming pill) for ages

(Edited by Arthurio on 01-29-2008 22:30)

Liorean: Sorry I realized my " This at least makes the script work in Opera 9.5, but thows in IE7. Will try to figure why. " was misleading. I meant that the entire script threw, not the Array.prototype.every method itself. My bad.

Bad Frenchy.

quote:

---

poi said:

MaGnA: Nice optimizations.

I see you're using the JS 1.6+* Array.prototype.every method which is a Mozilla invention.

---

poi: Thanks for the compliments! Aww... I didn't realize that every() wasn't a widely supported method

Extending the prototype like you did is a good idea! I may employ it if I have any lines left to make my application x-browser.

And thanks for the mouse event code; I'll try to incorporate that

I have added two more features without increasing the line count. Rockford now blinks, taps his foot and looks towards where he's going. I've also added the firefly. I'm still at 16 lines (if everybody agrees to my counting method):

link

<crappy-signature>magnetiq.com</crappy-signature>

Coolio. FWIW I agree with your counting method

quote:

---

Extending the prototype like you did is a good idea! I may employ it if I have any lines left to make my application x-browser.

---

Meanwhile I added the Array.prototype to my userjs

Still just fooling around...
link
hmm ... this starts to remind something I've seen before ... I wonder what that could be ... hmm hmm :P

poi: I've incorporated your every() and (uninitialized = expr) fixes. The code size gone up to 19 lines now. I guess I won't bother trying to add mouse support now

Here's the final thing:

http://magnetiq.com/bd20/

Tested on FF2, IE6, Opera9, Swift0.2. IE6 runs like a turtle ensnared by a Zerg queen.

Arthurio: looks like you're having fun. Keep going

MaGnA: Moot points, but the Array.prototype is an extension to non-Gecko browsers, not an IE fix. Also I thought the declaration itself didn't count, just like function delcarations don't count. The default|| part is just there to keep the native/previous implementation if there is one. Therefore I counted it as 2 lines. If it is so, you have the 2 lines required to add mouse support


Oh and nice signature.

I've been following this thread fervently guys, it's been one of the best 20 liners in Years! Well done all.

1 day left ... plenty of time

quote:

---

poi said:
Moot points, but the Array.prototype is an extension to non-Gecko browsers, not an IE fix.

---

poi: Got you. I removed those redundant comments from the code.

It's still 15:38 ETA here so I guess I have time for one final version before the deadline:

Rockford the Invincible - now with mouse support!

Does anybody know why it's so darn slow on IE6? How's IE7 behaving?

Cheers

I believe we have a winner.

The speed seem fine in IE7.

IE is kinda stupid WRT background image swap. AFAIK it does not fetch them from the disk/memory cache.

Some browsers try to be clever and do not load images put into an element in display:none;, therefore for preload I usually use:

#preload
{
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	width:0;
}

This way the content to preload is not visible but browser still load the resources in the children elements.

BTW thanks to your page I finally realized the logic of the monsters. Never really thought about it before. The monsters were moving randomly in my boulder dash. Just found the source code. Yuk the files are from 2002 and the code is fugly

What about a trip to Castle Wolfenstein in 14 lines ?

Features & notes :

• move with the arrows
• click on the map editor to toggle the walls
• collision detection
• you start in the upper left corner. Destroy the wall if you're stuck at the beginning
• the code is based on the very first draft of 3D TOMB II, circa 2002. The technique is not perfect but it's quite compact
• sorry I haven't bothered to make it work in IE ( yet ? ).

Hope you enjoy your journey.
The plan for the next 2 hours is to cook, eat and try to add some entities in there. We'll see how it turns out.

Looking forward for last updates/entries from all of you guys.



(Edited by poi on 01-31-2008 22:23)

*poking server* what is the time?

edit: ahh 1h39m left :/

btw GREAT entry poi

(Edited by Arthurio on 01-31-2008 22:23)

poi: Just as I was planning to add keyboard support... Tsk tsk tsk... Even if I add VR helmet support, mine won't approach the coolness of what you've got here. Awesome last minute entry!

As for the image caching you've suggested, I had tried a similar thing but to no avail. Maybe I did something wrong...

And yeah, I had figured that those monsters just follow this simple algorithm:

if (can move left)
move left, also turning towards left
else if (can move forward)
move forward
else
turn towards right, in place

Congrats again! We wouldn't expect anything less form you, poi.

(BTW it's hogging FF. Are you rendering even when there's no new keypress?)

Poi -- Very compact and quite speedy too -- wish we could get rid of that fisheye, though! (I'd poke it myself, but I never quite have the time XD) I need to download Opera to try your other entry...

Magna -- beautiful work! It's very cute and runs great in Safari.

Phewww. There's a green guy dancing in the center of the map

Need to clean/optimize the code and make a proper sprite. Don't worry it can fit in 20 lines.


Thanks for the great feedback!!!



(Edited by poi on 02-01-2008 00:06)

Right...I think there's something to say first guys: I'm very impressed. Truly. We haven't seen competitiveness or activity of this rate or calibre in a while, and it's a pleasure to see. It's brought it home like rarely before why this little corner of the internet is really very special. [I also hope I haven't missed anything! Did argo submit an entry?] [It also makes me feel rather ashamed that I haven't entered one...honestly I would have done, I even started working on a more optimised flow-modelling system, but...for another time ^_^]

Also, I know everyone always says this, but I think it is uniquely true here: this was exceptionally hard to judge. Often, people say this, but everyone realises there is only one conceivable answer. Not so here. In fact, even Arthurio's entry that he asked to be diregarded was rather fun! So I must give everyone their due: great work, all of you. But a decision has to be made, so here goes! There will be comments for each later in the post.

Winner: Arthurio with A magnificent flame effect

2nd Place and special mention: MaGnA with The Invincible Rockford (sorry...it was such a close toss up for first place!)

3rd Place: poi with Castle Wolfenstein

Congratulations to all 3! Arthurio, please do the honours for next month! Also, I think there were some interesting ideas floating around in another thread about the next contest, if someone know the link that'd be awesome (pong, different size constraints etc.).

List of all entries + notes:

Arthurio:

Fireworks
A nice effect, but I'm glad you entered further ones

Bouncing balls
This was a fun piece of code, and exactly the kind of thing I hoped to see for a 'dynamics' competition. I also spent a fair bit of time picking over the nicely slimmed down code. Unfortunately, a few wayward bounces are a tad suspicious

Candle Flame
I loved this entry. It has all the classic qualities: It looks really good even to a non-programmer, it has some funky and lightweight code behind it, and it showed a great tenacity to iterative improvment. By your counting, it's 21 lines, but it's not serious - this is fun, and a lot of arguments could be had at the expense of line counts!

Walking Sim
A nice entry - pretty looking, but ultimately maybe not the best sim. It'd be interesting to see if this could be developed to model an accurate walk though!

Cubes
Again, a fun little tech demo. I'm not sure if this was intended to be an entry, but fun anyway [incidentally, 10_4 is also very fun, and quick ]

IW:

Growing tree
As ever, a lovely entry from you. Congratulations on the marriage by the way...but don't let her keep you from submitting more top entries

Poi:

Hypnoglow
A fantastic entry, and nicely improved again. Any normal month, this could well have been a show in, but no such luck this time. It would be somewhat patronising of me to comment any further, but needless to say, lovely from any perspective!

Castle Wolfenstein
Ok...maybe this one needs a little justification. A lot of people may have expected this to win. It was a fantastic script, don't get me wrong! ("stop it! You are doing impossible things! What if reality find out?!" ) In particular, I thought the map showed exactly the sort of flair that would normally win. But we know you're capable of this you've set yourself too high a standard What can I say, it was a great script, but I'd be interested to see what else could be implemented - I liked the rockford entry for example for the many simultaneous actions. Also, is there some inverse-fish eye? It kinda looks like you were linearly approximating the sin fix...congratulations anyway ^_^ (BTW....I know I said dynamics 'loosely', but....) Also, your last post was at 00:01, so...it might not have made it into the final adjudication!

MaGnA:

The Invincible Rockford
I'm sorry this couldn't win, but I did fall for the flame. This was a stunning entry, especially from a first time entrant, hence the special mention. I was pleased to see the constant refinement, and the many simultaneous actions combined with the user interaction make this a truly great script. I really hope you enter again; as with many entries this month, this could easily have come first another time!


And finally, once again, congratulations to all!



(Edited by wrayal on 02-01-2008 00:11)

Congrats Arthurio. And kudos to Iron Wallaby and MaGnA. Great entries.

Iron Wallaby, I seem to remember you played a bit with Proce55ing. You should really try to use the Canvas. It opens a whole new range of possibilities to good'ole DHTML. Hopefully this month.

The refinements on the The Invincible Rockford were impressive. Cramming the rendering and a significant part of the game logic in 20 lines deserve some respect. Btw, check out the keyboard handling in Castle Wolfenstein. It's a one-liner

wrayal: Thanks for this cool topic and for reviewing all the entries.

I know, Castle Wolfenstein is not quite dynamic but it was fun to code. And the last-modified date on my ftp says 23:59. Plus I tried it online before posting here.

Yay! Thank you very much. Though I liked the last (more realistic) version 8_4 of my flame more than the 8_2.

Anyway here's what came out of the 3D experiments: A Rubik's Cube shuffler Could probably make it into 20 lines but what's the point. It was never meant to be an entry anyway. (The colors are probably incorrectly positioned.)

Great entries everyone. I really liked the design and look of the growing tree. Fantastic entries by poi of course. I thought boulder dash was going to win but whatyougonnado :P.

How do you guys feel about a 64 line game contest? Maybe 64 is a few lines too many?

If anyone's interested then here's the full list of scripts that I have uploaded for ozoneasylum. This also pretty much sums up my javascript experience in general.

quote:

---

poi said:

Iron Wallaby, I seem to remember you played a bit with Proce55ing. You should really try to use the Canvas. It opens a whole new range of possibilities to good'ole DHTML. Hopefully this month.

---

In fact, I still play with Processing, and have been able to make some pretty great speed-breakthroughs with static fields lately... seems like my JS is behind the times, so yes, I'll definitely need to start exploring the possibilities of Canvas. I'll see what I can come up with for next month.

Arthurio: Why not a 20-line game contest?

(Edited by iron_wallaby on 02-01-2008 14:40)

quote:

---

iron_wallaby said:

Arthurio: Why not a 20-line game contest?

---

Lets go with 32 lines. I think this is a good balance ...

Congratulations to Arthurio and all other contributors. Thank you wrayal for honoring my entry. poi: Respect.

Aw. Did I just use up my game entry for the dynamics category? Can I add 12 more lines an re-enter an enhanced version of this?

I'd prefer to see a new game.