Topic: 20 Liners - June 08 - Zoom

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!

Cool theme. Hope to see a couple of entries.

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

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.

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

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 .

looks excellent, you never cease to amaze

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:

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.)

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.

Impressive! You could still save a line by using

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

I am amazed by the speed this thing renders

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)

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)

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

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.

*bump*

*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)

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 ?

poi, your effect is amazing!

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

http://dreaminginjavascript.wordpress.com

Discussed poi's entry.

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.

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

Maybe next month with some long-ass Canvas chaining.

tssk.

Chicken. Fight like a robot!

Yeah, yeah. You'll be sorry.

Nice bit of promotion there poi, well done

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?

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

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.

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!

Danke schöne.

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

不错哟