Thursday, August 27, 2009

Book Cover flow on JavaScript

I had lately one task to make Book Cover flow in JavaScript. It should looks like Book Cover on this page.
Requirements were are follow:

  • It's implemented in JavaScript
  • Images could be added to the queue dynamically
  • On mouse hover over flow it should stop and on over resume.
  • Every cover have own link.

I decide to use my loving jQuery and specially animation feature of it. You can find demo of final version here. jQuery plug-in could be found here.
Read more...

Box with Corners and Borders and JavaScript Pin Layout.

Requirements:
I am making project where I needed to make such Layout environment:
  • Layout consists of boxes (divs) that are could be pinned to the borders (sides) of it's container. (for the first time there could be only one container and all divs inside it)
  • If box pinned to right border it should stay on the save length from right border. Same for left, bottom and top.
  • If box pinned to right and left at once, than it should also be always at same lengths from right and left borders. In this case only width should change. Same for top and bottom.
  • If box doesn't pinned to any border, than it should always be in the same place (in percentage to container size).
Also there special requirements to the box itself:



  • Box should consists in most of 10 peaces: 4 borders, 4 corners and center zone.
  • For each zone css background property could be assigned (with tiled picture or color)
  • All except center zones could be omitted.


Read more...

Wednesday, August 26, 2009

Canvas experiments.

Zoom In/Out using HTML 5 Canvas element

I played a little with HTML5 canvas. I was thinking about how to make zoom-in/out for image in web application. If you make ordinary image tag just with bigger properties height and width, than you get bigger  blurred image. It's not suitable for me. I need effect similar to stand alone applications like in Photoshop: if I magnify image 10 times, than there should be sharp colored squares (10x10 px) representing each pixel.




Canvas element has ability to take canvas image data as array of pixel colors. Also you can define canvas data by providing such array. So I've made couple of example where I process such data with JavaScript.

Here you can find demo. Try it with Firefox or other browses supported HTML 5 Cavnas element (not IE 6/7)
By clicking mouse with right/left buttons you can zoom in/out.  (But do it gently)

In the second demo you can find same effect but you should scroll your mouse wheel (also gently) and to move picture around you need to drag it.

In the third demo I used blurred magnification (that I mentioned earlier) but I tried to make grid to distinguish each pixel while zooming in.

I didn't find any suitable solution for my task. First two are very slow when you have big images and lot movements, even if you use much optimized JavaScript. Image with sizes 512x512 px (as I used in my demo) is represented as 512*512*4 = 104 8576 length's array. When you magnify it 5 times you get 5 242 880 length's array.

In first demo I didn't get whole image data at once, but only needed piece of image. But it happens very often while you move mouse around and its eats lot of memory and processor time.

In second demo I firstly make whole image magnification and after it you just move it around. So as you zoom in pixel array is growing exponentially, which leads to longer and longer pause.

Cropping Tool and Life game
In this demo I've made cropping tool with canvas. You can click and drag on empty space (above image) for make rectangles. After making some rectangles you can move it around and resizing it with right bottom corner.


In this demo you can find classic zer0-player Life Game. Try to run it by clicking Start button. If you want you can change initial droids count and life rules ("Live if there is from"). Also you can change speed by changing FPS value.
Read more...