Topic: 20 Liners - April 08 - Split Screen (Page 1 of 1)

I have the honor of picking this month's topic. It's "Split Screen". In 20 lines of JavaScript, display as many different effects as possible, in different boxes on the same screen. Some examples to illustrate what I mean (check the screen shots):

Flashback by The Carebears
Frameskool - Breakpoint 2007 64k invit by Equinox
(Thanks, poi for the links!)

As usual, pure-DHTML or <canvas>, it's up to you!



(Edited by MaGnA on 04-02-2008 19:40)

Me likes.
The PC group Doomsday also did a few split screens, mostly with table based effects.

Looking forward to see the type of effects/graphics people think of and if some manage to squeeze in some transition of some sort.



(Edited by poi on 04-03-2008 09:29)

There goes a quickie.

Twinkle



Hope this will bump this contest a bit.

wow ... great job! once again you have done the impossible ... simply amazing

Thanks.

I'm sure you, and others, can show some JavaScript love too.

Come on people, don't let me win without a fight

sorry I've been absent far too much. Mountains of work. Taking an afternoon off after handing in a large project this afternoon.

Anyway...poi, as ever, incredible. I showed all my friends....they gapes, as always But still, it'd be no fun to give you no competition at all. Therefore I give you the first very hacky, exceedingly cheat-ridden incarnation of my effort:

http://www.beyondwonderland.com/wrayal/20Liner.html

Wrayal

[edit]Something odd seems to be going on...could you possibly try again? I seem to be getting 403 intermittently, but not repeatably



(Edited by wrayal on 04-29-2008 16:26)

403 Forbidden

Copy and paste the address in a new window

Wrayal: it's got something to do with your host.

(Edited by kimson on 04-29-2008 16:54)

Ok, well, I'm not sure; this is actually hosted on a server argo kindly provided for me

Anyway, I've uploaded a newer version. I don't suspect I'll get much if any more time to work on this, but I hope you like the effects ^_^

Oh, also, there should be a wall at 45 degrees on the left of the bottom left one, and a vertical one on this right - it's just a little 'collision detection' think but....meh to walls



(Edited by wrayal on 04-29-2008 17:22)

poi

quote:

---

poi said:

Come on people, don't let me win without a fight

---

right

http://weibell.de/javascript/contest/split-screen/

I really enjoyed the way you chained, poi. I used some of your ideas in my entry, hope you don't mind ...

Cheers

Edit: fast version available under http://weibell.de/javascript/contest/split-screen/fast.htm

(Edited by Ox0D06 on 04-29-2008 23:09)

wrayal: More/Nicer images and colors would improve the effects a lot.

Ox0D06: Interesting entry. Glad you found some food for thought in Twinkle.

Wow! sneaky way to get the CanvasRenderingContext2D in Safari Good job finding it.

I wondered if I pushed the chain'ing too far, but you pushed the idea even further by switching rendering context in the chain.

Using similar tricks could easily save 6 lines in Twinkle ... I might give it a shot.

poi: Thank you! Glad you like my safari solution, I was quite relieved to finally see it working in the end

It turns out that 8 lines got spared.
Fidling further but it's getting very very heavy, and crazy.

[edit]

Alright. Enough with this crazy idea. I have to eat and work ( as in for work ) a bit.

I was trying to composite the effects in various shapes, but it requires 9 canvas ( 4 for the effects themselves, 4 for the effects with their background and foreground, and 1 to composite everything ) and many drawImage ( 21 ) in various modes with various clip regions. 14 lines of pure madness.



[/edit]



(Edited by poi on 04-30-2008 23:22)

It's been such a hectic month for me that I've totally lost track of time (i.e. what day of the month it is). I thank poi for reminding me that it's already May (yet it's still 6 degrees Celsius here in Toronto!). I had high hopes that I would enter with a pure-DHTML attempt when I enthusiastically picked this month's topic. *sigh*

Moving on to announcing the winners. You know what... Everybody won, since we had exactly 3 entries!

The placement is as follows:

First Place - poi with Twinkle

Another perfect example of poi the alchemist, alchemizing his alchemies, as usual. Extra credits for the nice frame rate and the eye-candy design (I especially liked the chubby stars.) Function chaining taken to the extremes!

Second Place - Ox0D06 with Split Screen

A bit choppy FPS-wise but nice effects and nice palette! Kudos for not having just 4 but 6 screens!

Third Place - wrayal with [what I'd like to call] The Forbidden

A pure DHTML entry that I would be competing with, if I had a chance to enter this month I especially liked the triangle utilizing the border hack. (I'm sure I'd have included at least one such polygon.)

Thanks to all for coming up with entries that were exactly what I had in mind. It feels good just to have picked a nice topic, even if I didn't have a chance to enter myself

poi:
I think it would be possible to shave 2 lines by inlining the chain() function and changing the object property iteration with a forEach() on an array:

"set,clearRect,save,translate,rotate,drawImage,scale,restore,fillRect,moveTo,lineTo,beginPath,closePath,stroke,fill,arc"
    .split(",")
    .forEach(
        function (chainThat) {
            CanvasRenderingContext2D.prototype[chainThat] = function(func) {
                return function() {
                    return func.apply( this, arguments )||this;
                };
            }(CanvasRenderingContext2D.prototype[chainThat]);
        });

It looks fugly but hey, it's a single line! (wrapped so that this table doesn't explode)



(Edited by MaGnA on 05-01-2008 19:06)

(Edited by MaGnA on 05-01-2008 19:21)

Cheers ^_^ And congratulations guys - some incredible canvas-fu going on there
Let's see some more entries next month
I'm sorry mine was fugly - I only had an hour or so, and I still haven't figured canvases out. It was really an exercise at trying to cram simple effects into individual lines; I'm not familiar enough with standard effects like interference, so it won't happen till I do some honest work
This month is exam month, but I'll try and get something out anyway

Looking forward to next one!

Wrayal

Thanks guys.

Sorry for delay, I just arrived from Outline, a small-ish demo party in the Netherlands. I didn't managed to enter in any "code" compo but came 2nd ( 161 vs 169 points ) in the 16 colors graphics. The winning image is less technical but more colorful and happy happy joy than huh, my image ( look closely for all the shapes and characters added in the dithering ).

Magna: Array.prototype.foreach only works in Gecko. But yep I could probably save 1 line there. Will look into that.



(Edited by poi on 05-05-2008 02:08)