Topic: 20 Liners - June 08 - Zoom (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=30306" title="Pages that link to Topic: 20 Liners - June 08 - Zoom (Page 1 of 1)" rel="nofollow" >Topic: 20 Liners - June 08 - Zoom <span class="small">(Page 1 of 1)</span>\

 
Ox0D06
Nervous Wreck (II) Inmate

From: Germany
Insane since: Apr 2008

IP logged posted posted 06-05-2008 11:57 Edit Quote

This month's theme is: ZOOM!
Zoom into anything you'd like. Into infinite images, fractals, tunnels, perhaps with interaction... The more fascinating, the better Just stay withing the limit of about 20 lines.

Enjoy!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-07-2008 18:07 Edit Quote

Cool theme. Hope to see a couple of entries.

ninmonkeys
Bipolar (III) Inmate

From: mn
Insane since: May 2004

IP logged posted posted 06-10-2008 17:03 Edit Quote

Is it ok to use a library like Processing.js? If so, I could try these contests. If not, I can't do much.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-10-2008 19:35 Edit Quote

I'm rather fine with the idea of allowing JS libraries/frameworks in order to lower the barrier to entry and increase the number of entries. And for not having used such frameworks I'm curious to see what's possible with them outside the realm of the usual web 2 gimmicks.

With a quick search I found an image shuffle game done in 5 lines. Without a library, this could easily take 10 lines. But the code looked elegant-ish.

Ox0D06
Nervous Wreck (II) Inmate

From: Germany
Insane since: Apr 2008

IP logged posted posted 06-10-2008 20:19 Edit Quote

I don't have any objection. Sure, that sounds like a good idea! But John Resig's processing.js will be the only framework allowed. And you don't have to use it, but I would really enjoy to see many entries

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-16-2008 21:32 Edit Quote

Hypno trip down the fractal rug



Take a fractal cookie and enjoy your never ending trip down this stochastic Sierpinski-esque carpet.


... 17 lines of Canvas love, tested in Opera 9.5, Firefox 3 RC2 and Safari 3.1 on Vista.
Hope you like it .

Arthurio
Paranoid (IV) Inmate

From: cell 3736
Insane since: Jul 2003

IP logged posted posted 06-16-2008 21:39 Edit Quote

looks excellent, you never cease to amaze

MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

IP logged posted posted 06-16-2008 22:02 Edit Quote

poi: Looks great! And it's just the middle of the month. I bet you're going to submit a second entry on June 30th at 23:59

What is the reason that you use setTimeout() instead of setInterval() (the latter could have saved you 1 line)?

Also, what's the best way to set a single pixel on a canvas? Right now, I'm doing:

code:
g_ctx.fillStyle = "rgb(...)";
g_ctx.fillRect(x, y, 1, 1);



(Yes, I'm working on an entry as well I'll just hope that I'll have time to finish it -- and it will fit in 20 lines.)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-16-2008 22:19 Edit Quote

Thanks.

Submitting a second entry at the end of the month might be tough, both WE are taken. But the topic is way cool so you never know.

I use a setTimeout() to let the CPU breath a bit. A setInterval() with an arbitrary delay would be too demanding for slower machines. This way the CPU loads hover around 30% in Opera on my Notebook. And also I'm not running out of lines so I can afford to "waste" one.

fillRect( x, y, 1, 1 ); is the best way to is you want draw a single pixel. If you want to draw many you should probably look into the Canvas ImageData ( which alas is only supported so far by Opera 9.5 and FireFox 3 ), or maybe the good'ole BMP data:URI generation technique.

Looking forward to see more entries.

Ox0D06
Nervous Wreck (II) Inmate

From: Germany
Insane since: Apr 2008

IP logged posted posted 06-17-2008 00:37 Edit Quote

Impressive! You could still save a line by using

code:
(function () {
...
setTimeout(arguments.callee);
})()



I am amazed by the speed this thing renders

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-17-2008 00:41 Edit Quote

Thanks.

I thought about wrapping the function into a singleton but thought that the ({...})() part would count as a line.



(Edited by poi on 06-17-2008 00:42)

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

IP logged posted posted 06-17-2008 00:55 Edit Quote
quote:

Ox0D06 said:

I don't have any objection. Sure, that sounds like a good idea! But John Resig's processing.js will be the only framework allowed.



So using Prototype.js would be out? Why limit to only 1 framework? I have a great interactive magnifier I'd love to try and get down to 20 lines, but it relies heavily on Prototype...

Dan

(Edited by BillyRayPreachersSon on 06-17-2008 00:59)

MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

IP logged posted posted 06-18-2008 06:16 Edit Quote

I want to use 2dctx.drawImage() with a destination rectangle that is exactly twice the dimensions of the source rectangle. But I want to get the pixelated, boxy look. drawImage() seems to be doing resampling (bilinear/bicubic interpolation?) and blurring the enlarged image. Is there a way to instruct the 2d ctx not to do that? Is this something implementation dependent? Do I have to achieve the pixelated-zoom effect by drawing individual rectangles?

And here's a sneak preview of what I'm working on:

Scrolltext with Subpixel Rendering
(should be viewed on an LCD)

The plan is to zoom into this

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-18-2008 09:58 Edit Quote

Canvas operations are supposed to interpolate the colors.

Your font is quite simple so you could rather easily draw the filled squares that don't need AA in a first pass then draw the AA horizontals and verticals. Or it might even be more simple to make a routine that draw an AA square in a globalCompositeOperation ( darker should do ) that will nicely blend adjacent AA pixels.

... or you could generate each character at the maximum size, say 128x128, and drawImage() them with floating point coordinates and let the Canvas implementation do the filtering for you. The results are normally good. Although I have not compared with a software AA.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-25-2008 10:10 Edit Quote

*bump*

MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

IP logged posted posted 06-25-2008 17:42 Edit Quote

*bump*? *ouch*!

Crunch time at work is almost over and I think/hope I'll have some time to try and get something ready for this month!

poi: It's a bummer that I can't do stretching without interpolation I'll have to render the zoomed in letters rectangle-by-rectangle. Note that I'm doing sub-pixel rendering, and not plain old AA. Thus, the pixels used to render a single letter are not always the same. At every 1/3 pixel, the composition and colors of the pixels change:


100%


300% zoom

That's the reason I have three different variations of the text in the small (currently visible) buffer I'm using -- each is for a different 1/3 pixel "phase". For the same reason, I can't render the letters once at their largest and just shrink them to the appropriate size -- I would need 3 different huge variations for each letter. I'll think about this a bit more. Your continued input is also always appreciated!



(Edited by MaGnA on 06-25-2008 18:40)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-25-2008 20:01 Edit Quote

MaGnA: Surely it's possible to write a function in a couple of lines to draw a single square or rectangle with the AA method of your choice ( 4 fillRect of 1 pixel for the corners, 4 lines of 1 pixel for the edges and a plain fillRect for the "integer body" of the square ) , in a globalCompositeOperation that will blend adjacent squares nicely.

And yep I've got an idea for another entry, interactive this time, but don't know if I'll have time.

ninmonkeys: any progress ?

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

IP logged posted posted 06-26-2008 20:48 Edit Quote

poi, your effect is amazing!

Nosredna
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Jun 2008

IP logged posted posted 06-30-2008 19:15 Edit Quote

Howdy. I linked to this thread from my blog...

http://dreaminginjavascript.wordpress.com

Discussed poi's entry.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-30-2008 19:53 Edit Quote

Cool! and welcome in the orange padded walls.

You know what would be even cooler ? That you, and a few others, pull an entry Come'on you. Do it!

GRUMBLE: Thanks.

Nosredna
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2008

IP logged posted posted 06-30-2008 20:20 Edit Quote

I think I arrived too late to pull off an entry for this month. :-)

Maybe next month with some long-ass Canvas chaining.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-30-2008 20:24 Edit Quote

tssk.

Chicken. Fight like a robot!

Nosredna
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2008

IP logged posted posted 06-30-2008 20:41 Edit Quote

Yeah, yeah. You'll be sorry.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 07-01-2008 10:30 Edit Quote

Nice bit of promotion there poi, well done

Ox0D06
Nervous Wreck (II) Inmate

From: Germany
Insane since: Apr 2008

IP logged posted posted 07-03-2008 22:30 Edit Quote

Oh crap, I lost track of time... and track of the thread!

quote:

BillyRayPreachersSon said:

So using Prototype.js would be out? Why limit to only 1 framework? I have a great interactive magnifier I'd love to try and get down to 20 lines, but it relies heavily on Prototype...Dan


I'm afraid that if more frameworks are allowed, anybody could use "their own" script and just call it a framework. Perhaps in another 20liner?

Are there any more entries? Or is it just poi's hypno trip and Magna's subpixel-scroller?

MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

IP logged posted posted 07-03-2008 23:07 Edit Quote

0x0D06: I think it's just poi's hypno trip; my sub-pixel scroller just ended up remaining as a scroller since I couldn't find the time to add the zoom effect. The plan was to make into an infinite zoomer, where you discover sub-pixel scrollers in every sub-pixel as you zoomed in. Though, I don't think the overall effect would look anything closely as cool as poi's submission...

poi: Congrats again! You've astonished us all with yet another wonderfully cool and compact implementation. BTW, we still seem to have a disconnect on how I would supposedly be zooming into my sub-pixel scroller because I don't really have "integer bodies" and simple alpha compositing wouldn't work. I'm dealing with sub-pixels and not simply AA'd whole pixels. Or perhaps I'm still missing something

I was tempted to submit a last minute entry in the "humor" subcategory; my plan was to write a 1-liner that keeps stretching a crappy 640x480 JPEG of the initial Mandelbrot set. "Mandelbrot Zoomer in 1 Line of JavaScript" would be the title :P

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-05-2008 13:32 Edit Quote

mmmh no "official" results ... since MaGnA's entry wasn't finished, should I take over and open July's 20 lines contest ?


MaGnA: Thanks. I might be completely mistaken about my idea for ClearType'd zooming bitmap fonts . And I'm not entirely sure Canvas has a blending mode that would do what I'm looking for to nicely blend adjacent pixels. I'll try to cook something.

Blaise: I believe it's mostly the result of my tweet about Hypno trip down the fractal rug. Some people picked it up and it ended up on Ajaxian, Reddit and a bunch of sites aggregating their feeds.

Ox0D06
Nervous Wreck (II) Inmate

From: Germany
Insane since: Apr 2008

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

Congratulations, poi! You are the winner and finished last at the same time

poi: I do have to say that your entry is just amazing! It really blew my mind...

MaGnA: Your (unfinished) entry looks like a lot of work. I enjoyed your code, the result is very creative!


Once again looking forward to the next 20liner!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-05-2008 22:48 Edit Quote

Danke schöne.

Time to give more JavaScript love in 20 Liners - July 08 - Your favorite video game

kuizzklb
Obsessive-Compulsive (I) Inmate

From:
Insane since: Sep 2011

IP logged posted posted 09-03-2011 05:10 Edit Quote

&#19981;&#38169;&#21727;



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu