Topic: 20 Liners - April 08 - Split Screen Pages that link to <a href="https://ozoneasylum.com/backlink?for=30163" title="Pages that link to Topic: 20 Liners - April 08 - Split Screen" rel="nofollow" >Topic: 20 Liners - April 08 - Split Screen\

 
Author Thread
MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

IP logged posted posted 04-02-2008 19:39 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-03-2008 09:09 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-27-2008 17:16 Edit Quote

There goes a quickie.

Twinkle



Hope this will bump this contest a bit.

Arthurio
Paranoid (IV) Inmate

From: cell 3736
Insane since: Jul 2003

IP logged posted posted 04-28-2008 01:08 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-28-2008 02:49 Edit Quote

Thanks.

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-28-2008 21:48 Edit Quote

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

wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

IP logged posted posted 04-29-2008 15:43 Edit Quote

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)

Arthurio
Paranoid (IV) Inmate

From: cell 3736
Insane since: Jul 2003

IP logged posted posted 04-29-2008 16:09 Edit Quote

403 Forbidden

kimson
Paranoid (IV) Inmate

From: Royal Horsing Ground
Insane since: Jan 2005

IP logged posted posted 04-29-2008 16:52 Edit Quote

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)

wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

IP logged posted posted 04-29-2008 17:17 Edit Quote

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)

Ox0D06
Obsessive-Compulsive (I) Inmate

From: Germany
Insane since: Apr 2008

IP logged posted posted 04-29-2008 22:52 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-30-2008 12:57 Edit Quote

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.

Ox0D06
Nervous Wreck (II) Inmate

From: Germany
Insane since: Apr 2008

IP logged posted posted 04-30-2008 14:24 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-30-2008 22:32 Edit Quote

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)

MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

IP logged posted posted 05-01-2008 17:41 Edit Quote

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

MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

IP logged posted posted 05-01-2008 19:02 Edit Quote

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:

code:
"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)

wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

IP logged posted posted 05-01-2008 21:07 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 05-05-2008 02:07 Edit Quote

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)

Bmud
Bipolar (III) Inmate

From: Raleigh, NC
Insane since: Mar 2001

IP logged posted posted 07-30-2009 23:44 Edit Quote

Twinkle is really impressive. I'm not sure how you when about entering text in to the scrolling marquee unless it's stealing text from the header... *looks deeper* Yeah; it is. Jeez... Took me a little while to understand that the blurred balls were pre-blurred as slices of an image the same way you handle image swaps in your javascript FPS. Just starting with canvas today. This is about as far as I've gotten in a few hours.

http://www.rgbk.org/content/html5/01.html

Shine and shine. :: [old cell]

sandyvicky
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Oct 2009

IP logged posted posted 10-29-2009 17:39 Edit Quote

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*
It is like Online Pharmacy Prescription
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!

sandyvicky
Obsessive-Compulsive (I) Inmate

From:
Insane since: Oct 2009

IP logged posted posted 10-29-2009 17:47 Edit Quote

Edit TP: Aggressive anti spam stance applied.

(Edited by Tyberius Prime on 10-29-2009 18:20)

SleepingWolf
Paranoid (IV) Inmate

From:
Insane since: Jul 2006

IP logged posted posted 10-29-2009 20:15 Edit Quote

I can't believe the spammer actually personalized this...talk about context sensitive spam...could this be done by a bot?

Nature & Travel Photography
Main Entrance

carl_can
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2011

IP logged posted posted 01-17-2011 12:42 Edit Quote

I appreciate your work, the post is really helpful. It?s some pretty great info, I appreciate the information you provided is excellent post. Thank you.








bad credit loans

coach
Obsessive-Compulsive (I) Inmate

From:
Insane since: May 2011

IP logged posted posted 05-31-2011 10:59 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu