Topic: 20 liners - a holiday special

'Nuff rambling, for the sake of separating topics : here is the return of the mighty Ozone Asylum javascript 20 liners (insert drum roll here).

The topic for this installment? Christmas, new year's eve, the snow, Santa, anything goes - you choose.
But to spice up the challenge, entries are accepted until January 2nd 2008.

Gentlemen, start your script editors!

(btw, P01, IW, Liorean, please set and write down the current rules : I've been off of the js scene for more than a year,
so I am not certain what would be legit nowadays in the terms in which the "friendly compo" was started back then..)

(Edited by argo navis on 12-23-2007 22:13)

Nice to see the 20 liners back. Dunno if I'll have much time to do anything ok as I only have my recently re-installed laptop.

As for the rules, since JavaScript's syntax can be wild, they were pretty basic:

• ~20 lines
• don't abuse wild constructs like coma to "cheat"
• only the line of actual code count ( curly braces and similar symbols don't count )
• have fun

Yay! I have a little script I'm aiming to submit, though normally we have a month, not 10 days or so *flexes fingers* it's been a while since I've done any coding like this...performance issues may abound.

p01: Come on You know you can hack together a top quality script in 5 minutes flat :P

Good luck everyone

Well....hmm, sorry for the double post, but it seems that my last post is too old!

In tribute to my obsessive hatred of my new Fluid Dynamics course, here is a quick script, as I'm not sure how much more time I'll have before the 6th. I think it's fun, but there you go: http://wraypa1.demon.co.uk/snow.html [tested under FF on XP]

Wrayal

Sexy!! Works a threat in standards compliant browsers (Op, Moz, probably the khtml family as well), kudos.

As far as I am concerned, after striving two hours to make IE like a script that was 100% standards compliant, Redmond's crippled browser can suck it up.
But as far as the Ozone spirit is concerned, you'd better make IE like it as well before P01 delivers.

Or me, for that matter ,) Since my return from the dark side, I feel like light sabering some.

Woo!

I have ideas for this, but I won't have time for this for several days yet. Hopefully I can put something together!

Wrayal: how fun! Worked great for me in Safari.

Play, fiddle, learn, like "someone" said I am snapping mah own fingers, and testing things.
Swish and some Flash for starters : got my hands on the ala "Flash Satay" method, threw in some png transparency, 15 lines of JS.
Got something that works for FF, flickers in IE, and is sluggish in Op. (Flash 9 required for now).

*15 liner* - Flash meets png and js

But the flickering is only partly the browsers fault, the Flash engine is involved also. Swish is cool btw.
...
On to making the same with performance, an increased fun factor, and cross browser compatibility.

(Edited by argo navis on 12-26-2007 19:00)

The Xmas card I made for Opera, and had to fight for IE compatibility and make compromise for the sake of accessibility, is rather similar. Of course it's not a 20 liners but hey... Hopefully I'll do a little 20 liner.

argo navis .... beyondwonderland.com ...

poi: Yes indeed ^_^ read http://www.ozoneasylum.com/29779 :P

Nice little script there btw

Thanks.

I was interested in seeing how things behave when pushing the boundaries, and in "touching" Flash again.

Eg. seeing how
the browsers manage multiple instances of a complex animation component like Flash in parallel - and how the subtle alpha
channel of a png file gets handled.

So, funnily enough, it is the stability of Firefox which makes that kind of animations possible : Opera encounters "deadlocks",
and IE doesn't even get to streaming the movies properly.

Of course, if I remove the Flash, keep the png, and throw in some zIndex management, it gets to be cross browser and a lot faster.

But now, how do I restore the individual rotation of the flake? And can I leverage some more processing power
by pre-computing something about the individual zoom of each one?

...
With 14 lines of code, at the moment, there is room for that too ,)

Well, you could use the standard old trick - create a canvas with each possible rotation (by symmetry, I guess you'd only need 4 images or so) and then use the clipping method to display the rotation frame by frame. It'd be interesting to see how quickly you could get it to come out ^_^

Also, as you're already handling z-indexing, would it be possible to use that together with resizing to permit rotation in the third axis? I don't know how it would look, but if you find yourself with a spare couple of lines....^_^



(Edited by wrayal on 12-27-2007 14:19)

(Edited by wrayal on 12-27-2007 14:24)

Good guess Except for the "rotating on the z axis" bit, this is something new to me - don't think it can easilly integrate with the rest, but let's see
(actually, the position vector of each star does rotate around z-axis as well, but they all face the camera atm).

Anyway, History log and source files for argo navis entries for Dec 07 20 liners.

Mini-tut : I already have decomposed the Flash animation into 8 png files, rather than 4 ,)
----------------------------------------------------------------------------------------------------
I did that by using Swish export features, probably similar to Flash :
- Set the movie size to the number of frames you want to output (8 in this case)
- Set the export setting for png to preserve transparency
- Export sequence as png

And there you go. I need now to make a big strip of these individual images, and code some, should be quick.
I'll come up with an "explanatory animated gif" to show how sprites clipping works.

It should lay the ground for some spiffy animated png toys using javascript - I suspect some of those already exist, but it never hurts to...
Play, fiddle, and eat swiss cheese. *munchmunchmunch*

Am through with the Swiss cheese so I got bored
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
(a couple of hours later..)

Okay, send in master Suho. I have a BAD addiction problem now - I can't, for the love of me, sit still and watch a darn movie or do anything
but get back to these snowflakes.

OR, send in an exorcist. I may be possessed by the spirit of poi

Or send both. Either cases I need help.
Beta 0.8 is up and running.

Some tips and tricks and technicalities for further reference :
- I have declared all my globals as items of an array named "globals". I feel this is legit, contradict me as needed : two integers, two array pointers to store references.
- I have used the "for" constructs in a now famous way, and crammed one extra instruction inside each one of those.
- I have used a bunch of "multiple assignments" like var = stuff = 0.

But that's as far as it gets for the packing and bypassing "laws of readable programming"

For the speed optimisations :
- Static image snowflakes rather than Flash is good (since version 0.4 that is).
- Alpha blended, png "flakes" are slower to animate than simple gif or 8 bit png (makes sense : all the blending is calculated at runtime afaik, adds some overhead).
- My pc is the same crap laptop I have been using for years so it's a centrino from way back, with 512MB ram - it should work faster on your pc.
- Other than that, with succesful tests including 64 sprites that are zooming, rotating, and moving in 3d, I am a happy man.
- I used bitwise operators, with the modulo trick : "% 8" became bitwise "& (8-1)" at some point. Currently it is "% 4" but reads "& 3" ,) Go ask Alice for details.
- I used bitwise operators for some mults also : << 2 should read "multiply by 4".

The rest will get some cos/sin lookup tables, some valid xhtml and strict mode, and that should be it for speed improvements.
Once I am through with those, I will be left with... 4 lines of sound javascript to play with Like : 25% of the code currently in use.

@Wrayal : the "sprite rotate trick" could certainly be used in your entry in some way, but I probably won't have time to include it myself.

Now, some stats...
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Background image + all anims =~ 200KBs of jpg/png data, respectively.

Well, what do you mean, "heavy"?-) It's a high res picture and a png 24 transparent picture containing
a full animation!! Bite me.

There are 48 stars, I have made tests with 64, I can get it up to 96 : maybe more, it all depends on removing those nasty
"Math.cos" and "parseInt" constructs and how much speed that will gain.

...Warming up was fun. Anybody else dares to submit something or have I scared you all into hibernation already?

(Edited by argo navis on 12-27-2007 23:29)

Here's my entry. It's barely 20 lines, but between the holidays and getting married, I don't find myself with a lot of time for cleanup and fixes!
http://www.lonelypinkelephants.com/random/xmas07.html

Merry christmas, everyone

(I like your entries, argo -- very fun looking, and way to cram lots of code in! ;D)

(what am I doing down the halls at such a time? Somebody remind me NOT TO wake up at some random time of the night and have a ciggie..)

>> but between the holidays and getting married, I don't find myself with a lot of time for cleanup and fixes!

Poor, poor Iron Wallaby. You DO realize that some people would pay to have such problems?
And you DO realize that everybody hates you, now, and is jealous of your newfound happiness?

...

:O) CONGRATULATIONS! And plenty of little Wallabies to you and your lady.

Now do me a favor : do not teach javascript to the lil' Wallabies right away, hmmm? I would mind them inventing "polyfilling with two liners"
and making my flakes look cheap.

...I'd be speechless, but such news do get the most spontaneous expressions of joy : again congrats, for that (and for the nifty angel)

(Edited by argo navis on 12-28-2007 03:43)

IW: Congrats man! And I'm very fond of the script; the effect is very cool. I do have one q. though - how do you come up with these equations, such as the equation for the shape of the angel, and the shape for the bouncing heart I remember you making, and so on? I know they're constructible, or I wondered if it came up in your work or something? (I'm actually doing maths, but it rarely results in such fun equations...with the odd notable example)

argo: why not round the angles and have a cos lookup table? It's faster and you've got a few spare lines.

Wrayal

P.s. Happy belated xmas to all ^_^

@Wrayal, ditto - the lookup tables are up next - what's with not reading my novel sized rants and restating the things I have in my plans?-)
Lookup tables and a final "wrap up" scriptlet to take care of small details.

Ditto also on the shapes using by IW : love them. But so far, my ranking is something like - Wrayal 1st (based on user interaction rather than animation only),
Argo 2nd, IW 3rd because of a BUG - non blocking - in the angel thingie, check the Firefox js error logs. This is a blocking issue in IE for one.

Add some "nagging at the lack of interest for compatibility across browsers" : I am the only one who took care of dreaded IE.

I will not use this to judge anything, I said it, it is MS responsibility to abide to web standards, not the other way round - but it never hurts to
test things on all browsers since users do not give a damn about web standards.

Thanks guys. It's been quite a trip these last couple weeks, but I wouldn't trade it for anything!

@wrayal: I just play with equations until they suit my fancy. My day job is in programming, not in math. This one in particular started as a circle of constant radius; that is:

radius(angle) = k

I then wanted to give it the wings and body, which meant I needed a recurring "bump" in the function. Four of these, in fact! We can use a sinusoidal function to make those bumps... since they usually have 2 bumps in the range of 0..2*PI, we can double the angle to get four instead:

radius(angle) = k + abs(cos(angle * 2))

The shape of the wings wasn't quite right, though... they needed to be flat on the ends, not rounded. So, let's make the bumps flat on top:

radius(angle) = k + min(3 / 4, abs(cos(angle * 2))) * 4 / 3

This worked great for the wings and body (which are the same shape), but not for the head. Since the head needed to be a special case, I simply made the whole thing a piecewise function: from 5PI/4 to 7PI/4, we use a different function (which is also a sin curve, tweaked to look right). (You can look at the code to figure out this part. )

Ah, and the heart! That one I figured out little by little too, in a similar way. AFAIR, it was something like:

x * 2 - |x| * y + y * 2 = k

I never showed you guys, but I found a great generalization for a 3D heart too, that was just beautiful! (It was a cubic equation, so it wasn't super easy to render in 3D... Marching Cubes worked great though.) As a joke, I gave the equation to some engineer friends for Valentine's Day about 3 years ago. When I figure out the equation again, I'll put it up.

@argo: Yeah, I noticed several bugs myself. I'll try to fix them before the second, but no guarantees!

(somebody cut my meds supply) - I am on holiday, and sitting by the comp all day to kickstart my own business which I mentionned earlier.

On the 3d heart bit : everybody MUST dig into "implicit surfaces" - approx. anything can be rendered in 3d using them, eg. using surfaces
described as functions, rather than an aggregate of vertices. No surprise for me here, but a good hint I had to "pick up" and enhance.

Google + Implicit Surfaces + Marching cubes == lots of fun, not only metaballs (meta-anything actually, think meta-hearts..).

(Edited by argo navis on 12-28-2007 16:21)

Twenty four hours to New Year's eve.
Woot.

My laptop's power supply passed away. FTP'd some of my stuff back to the desktop,
a huge leap backwards to Win2k. Stuff happens.

I am happy to be around : guess you could tell, the Asylum feels like "being argo navitch" - as much as I try not to, I am everywhere.
But it's all for the best, so, quick recap of entries (the use of explicit links is aimed at giving adequate page rank to the target pages) :

Iron Wallaby - javascript Angel in 20 lines
Wrayal - javascript interactive snow in 20 lines
Argo navis - javascript alpha blended snow in 20 lines

Quick reminder
-------------------------
Don't fear the Gurus. They're getting old.
Beat them with a stick, grab the candies and run instead

In other words : the competitions are open to everybody, they are friendly, the fun factor gets you a victory you can brag about
and use to impress hot chicks - "My FINGERS are longer than this guy's, and I will only cost you a couple of drinks if you behave."

For a quick opener.

Participate, contribute, it's a great way to learn and push your own limits, but in poi's words...

quote:

---

As for the rules, since JavaScript's syntax can be wild, they were pretty basic:

* ~20 lines
* don't abuse wild constructs like coma to "cheat"
* only the line of actual code count ( curly braces and similar symbols don't count )
* have fun

---

Emphasis on HAVE FUN!

...now, why 0.9 entries on my side? Because I have this nagging feeling someone will drop the bomb before January 2nd.
Time will tell.

AN: Many thanks for your mirror ^_^ Hopefully mine should be back up now - somehow my server had slipped onto a different IP. I'm actually serving it at my home - not much b/w etc. - it's a fun way to do it, but it means that if something goes wrong, it can be a pain to fix as I'm often at uni Unfortunately I really don't have that much time to devote to it at the moment, but hopefully I'll keep it up there, and update it to be nice and spiffy when I have a chance

Wrayal

[I really need to start keeping several backups - I lost the entirety of my last server and its backup; I think I no longer even have the final incarnation of my 5kwraytracer. While this was never a wonderful piece of code - it used a lot of foul kludges - it did at least represent my first attempt at a serious script. I really should go hunting for it again - it was fun]



(Edited by wrayal on 12-31-2007 22:42)

It's still a WIP but I had to do a little something. So here comes:

Santa paper doll

There's no physic at the moment, but something simple should be doable in 20 lines.

Notice the big object declaration, except the render function, can be crammed on one line, or in an Array. Being a WIP it's still on multiple lines.

Goodie No snow this time around though.

Now the reasons why your favorite ufo set the 2nd of January as a deadline :

1) I brought you all back to "speed" : 20 lines do not require large amounts of time, they require a will, and ideas.
It was more than time to dust off all that creativity "use the force, and kick the darn X-wing machinery off".

1b) So now we can talk about expanding the deadline

...

Just kiddin : instead, we can restore the deadline to one month, and the tradition to what it was - but of course, as it is a friendly compo,
late entries "may" be accepted for a small fee (to pay on my paypal account).

2) And now the discussions around this forum are as rich as they once were, on a consistant basis.

Jedis are back in the house, watch out and don't go messing with powerful, old, perv politicians ,)

So, the competition is over for this month.

Winner :
Wrayal's fluid snow in 20 lines
I like the user interaction - and a pretty well done one at that.

Next runner up for variety :
Alpha blended snow

Then we have the mightiest of Wallabies, for a stylish entry :
Javascript Angel

And last but not least, some dynamic html5, some physics, a character, poi's :
Santa paper doll

That's it for this month, so Wrayal, up to you to get things started for January.
Congrats everybody.

Sorry that I couldn't find the time to update mine! Busy busy though.

Grats, Wrayal, on your fun entry; and I am looking forward to the next one! (BTW -- your entry reminds me a little of my friend Kyle's "Empathy": http://www.rpi.edu/~mcdonk/empathy/ )

Congratulations all, I really liked these entries - much like old times!

poi: It'd be a shame not to see further work done on the santa doll...so hopefully you'll take the bait for this month's competition

argo: Thanks!

Wrayal

Well put Wrayal : Poi and Iron Wallaby have a history of amazing javascript, tiny script, stunningly fast and accurate effects in a nutshell.
Read this again : they have a history of it, they have NOTHING to prove to the masses.

I try to be fair, as human as I am I genuinely think the ranking is "as fair as can be", although I am certain some people prefer
my entry to IW's, and the other way round as well - have to draw the line, no matter what.

So, back to poi and IW's entry : ranking them 3rd and 4th is not an insult, is not the byproduct of a bias.
It's fair game, and a CHALLENGE to people I consider elite programmers - challenge being something I value, paying it back is a compliment.

...Sometimes it takes saying explicitely things that should be "understood". So, game on for Decemb.. er.. January 08 ,)

what about a 20 or 40 line js game for the next contest ... most fun game wins

[edit] err ... need to learn to read ... dynamics is almost the same thing so yeah .... game on ...

(Edited by Arthurio on 01-04-2008 08:34)

argo navis: Beside we're all doing this for fun. It's not like there is a fat loot to steal.

Arthurio: I like the idea of a game contest in a bit more lines, why not up to 32 or 64 to make it a round number ? Pretty cool things could be done in that "many" lines.