I want to know how websites like http://photofunia.com/ and other online photo effects sites are built. For example, using php, i want merge two images frame.png with profile.jpg. I want my frame.png transparent in the center where I would place my profile.jpg.
I have tried this, but it doesn't work:
<?php $dest = imagecreatefromjpeg('dest.jpg');
$src = imagecreatefrompng('logo.png');
$src = imagerotate($src, 90, imageColorAllocateAlpha($src, 0, 0, 0, 127));
$almostblack = imagecolorallocate($src,254,254,254);
$src = imagecolortransparent($src,$almostblack);
imagealphablending($dest, true);
imagesavealpha($dest, 0);
imagecopymerge($dest, $src, 900,600, 1, 1, 90,90, 90);
Thanks in advance. Please help me.
Answering your questions:
Adobe doesn't provide an API for this. However you can use Adobe Creative SDK for your Photo-editing stuff.
Usually a lot of Javascript libraries are used. you can check out top image manipulation libraries at codegeekz
If you insist on using php, your best bet is to go with ImageMagick or with Image processing GD Library. It is the developer who is supposed to make these results 'perfect' as you term it. There are some interesting php image editing libraries that you could check out many of which are maintained till date!
For Merging images, you can hop to the official docs for imagecopymerge or perhaps utilise the Imagick/GD Library. This SO post may give you a headstart.
You could also use Gmagick which is a fork of ImageMagick and faster (see benchmark) in processing images (although at the cost of lesser features). The original project can be found at graphicsmagick. Going strictly by Php way, personally, I'd recommend ImageMagick given its speed, rich feature-set, popularity, support, documentation and examples.
Additional Ref:
Php Image Processing
GD vs ImageMagick vs Gmagick
You've received a more technical answer already so I'm going to focus on the creative aspect of things. You've also mentioned familiarity with the associated php libraries and even previous attempts to create similar compositions that seemed to lack luster in the end.
In my opinion, this endeavor is far more reliant on artistry, creativity and, most importantly, prepared assets. By manually preparing these images you will have more finesse over the final result as well as leave only the simple compositing to php. Not the entire editing process.
Frankly, such detailed results are not achievable via an API. This project will require hours of manual labor and editing. Paying attention to lighting, transparency and colors.
The most impressive effects are the ones where objects in the photo overlap the user-added image. Ie:
While this example is rather simple, the same logic applies to more complex compositions.
You need to start with a high resolution image. Especially if you will be offering physical prints to your users.
The high resolution is also quite necessary as you will have to edit and prep these in a program like Photoshop beforehand.
For best results these will require complex, compound masks in Photoshop. Think sharp and smooth alpha transitions. Don't just cut everything with hard lines.
When considering the example above, you would be able to get away with only one layer in photoshop. Simply cut a hole where photos will be placed and export as png.
For other examples I would recommend separate background and foreground layers, with the user-added image sandwiched in between.
This is another great example where resolution is of utmost importance. The leaves are way too small to be effectively masked out at a tiny resolution. Some of the leaves may also be blurred and out of focus; again, don't cut them with hard lines. For best results, use a soft brush when masking them in Photoshop.
And last but not least, here's a very simple hands-on example.
Note how the background image has a smooth mask while the leaf has a hard one. Frankly, parts of the leaf are out of focus and can be further refined. The investment of time you make here will make the world of difference in how convincing your final results are.
Save out each layer as a png and composite within php. I would recommend making sure each png has the same dimension. Don't try to position a tiny png over a larger one. Give them the same dimensions to make alignment a breeze.
If I understood the Question, Then it does'nt need to be js, Css will do the trick. Look into alpha and opacity and z-index
#img1{position:absolute;top:0px;}
#img2{position:absolute;top:50px;opacity:.6;}
<img src="http://lorempixel.com/400/200/sports/1" id="img1">
<img src="http://lorempixel.com/50/50/sports/2" id="img2">
Related
Long time Stack Overflow creeper. This community has come up with some incredibly elegant solutions to rather perplexing questions.
I'm more of a CSS3 or PHP kinda guy when it comes to handling dynamically displayed content. Ideally someone with a solid knowledge base of jQuery and/or Javascript would be able to answer this one best. Here is the idea, along with the thought process behind it:
Create a Full Screen (width:100%; height:auto; background:cover;) Video background. But instead of going about using HTML5's video tag, a flash fallback, iFrame, or even .GIF, create a series of images, much like the animation render output of say Cinema4D, that if put together in sequential order create a seamless pseudo-video experience.
In Before "THAT's JUST A .GIF, YOU'RE AN IDIOT" Guy.
I believe jQuery/Javascript could solve this. Would it or would it not be possible to write a script that essentially recognizes (or even adds) the div class of an image, then sets that image to display for say .0334ms (29.7 frame rate) then sets this image back in z space while at the same time firing in the next image within the sequential class order to display for another .0336ms; and so on and so forth until all of the images (or "frames") play out seamlessly fluid, so the user would assume he/she is actually seeing a video. Not a knowing it's actually a .GIF on steroids.
Here's a more verbose way of explaining the intended result:
You have a 1 second super awesome 1080p video clip (video format doesn't matter for helping to answer this question, just assume its lossless and really pretty k?). It's recorded at 29.97 frames per second. Break each frame into it's own massive image file, leaving you with essentially 30 images. 24 frames a second would mean you'd have 24 images, 60 frames per second would mean you'd have 60 images, etc., etc., excedera.
If you have ever used Cinema4D, the output I am looking to recreate is reflexive to that of an animation render, where you are left with a .TIFF per frame, placed side by side so that when uploaded into Photoshop or viewed in Quicktime you get a "slideshow" of images displaying so fast it look likes a video.
HTML would look something like this:
<div id="incredible-video">
<div class="image-1">
<img source=url('../movie/scene-one.tiff');/>
</div>
<div class="image-2">
<img source=url('../movie/scene-two.tiff');/>
</div>
<div class="image-3">
<img source=url('../movie/scene-three.tiff');/>
</div>
<div class="image-4">
<img source=url('../movie/scene-four.tiff');/>
</div>
<div class="image-5">
<img source=url('../movie/scene-five.tiff');/>
</div>
....etc.....
....etc.....
....etc.....
</div>
jQuery/Javascript could handle appending the sequential image classes instead of writting it all out by hand for each "frame".
CSS would look like:
#incredible-video img {
position:absolute;
width:100%;
height:auto;
background:cover;
}
But what would the jQuery/Javascript need to be to pull the off/can it be done? It would need to happen right after window load, and run on an infinite loop. Ofcourse audio is not happening in this example, but say we don't need it. Say we just want our End User to have a visually appealing page, with a minimal design implemented in the UI.
I love video animation, and really love sites built with Full Screen Backgrounds. But a site out with this visual setup and keeping it responsive is proving to strenuous a challenge. HTML5 will only get you so far, and makes mobile compatibility null and void (data usage protection). .GIF files are MASSIVE compared to calling in a .mp4, .Webm, or .OGG so that option is out.
I've actually recently played around with Adobe Edge Animate. Using the Edge Hero .js library I was able to reproduce a similar project to this: http://www.edgehero.com/tutorials/starwars-crawl-tutorial
I found it worked on ALL devices. Very cool. Made me think that maybe it's possibly to use this program or hit jQuery/Javascript directly to achieve the desired effect.
Thanks for taking a look at this one guys.
-Cheers,
Branden Dane
I found a viable solution to what I was looking to do. It's actually rather interesting. The answer it's introduces many interesting ideas on how we can display any kind of content dynamically on a site, in an app, or even a a full fledged software application.
The answer came about while diving hard into WebGl, canvas animation (both 2d and 3d), 2D video games techniques, and 3D video game techniques. Instead of looking for that "perfect" workflow, if you are someone interested in creating visually effective design and really seeing what the bleeding edge can do for your thoughts on development, skip the GUI's. Ignore the ads with software promising to make things doable in 5 min. It's not. However we are getting there. 3 major events we have to look forward too in just a few months are
1.) the universal agreement to implment WebGL natively in Opera, Chrome and Firefox (ofcourse), Safari will move to ship with webGL enabled, compered to the user having to enable it manually, and even IE is going to try and give her a go (in IE 12).
2.) Unity 3D, an industry standard in game development, has announced that next month it will release version 5, and with it a complete, intuitive workflow from start to exporting in Javascript (not JSON actual JavaScript). The Three.JS library more specifically as it is one of the most popular of the seemingly endless games engines out today.
How does this answer my initial question?:
Though WebGL has been around for about 3 years now, we are only now starting to see it shine. It's far more than a simple video game engine. With ThreeJS We have a full working JavaScript library, capable of rendering in WebGL, to the Canvas, or EVEN with a few CSS3 magic. Can't use your great movie as a mobile background? It ruining the overall UI? Cheer up. ThreeJS can working with both 2D and 3D javascript draw function, though not at the same time. Hover other libraries exist that allow you to bypass this rule.
AND DRUM ROLL. It is, or can be very easily made in a responsive or adaptive way.
The answer to my question came from looking at custom preloaders. Realizing I can create incredible looping animations in AE, and export them as GIFs offered the quality I wanted, but not control, no optimization, now sound. However, PNG Sequences CAN be exported. Then the epiphany hit. Before I just say what I am using to solve my problem, I'd like to leave a list of material anyone looking to move beyond easy development and challenge limits can use as a reference guide. This will be in order with what I began to where I am now. I hope it helps someone. The time to find it all out would be very much worth it.
1.) WebGL-Three.JS
WebGL opened my eyes to a new world. It's a technology quickly evolving and is here to stay. In a nutshell, all live applications you create now have access to more than just a CPU, but also the Graphics card as well. With GPU's getting more and more powerful, and not so unreasonably priced, the possibilities are endless. The idea we could be playing Crysis 3 "in-browser" without the need of a 3rd party client is no fiction. It's the future. Apply that to websites. Mind blown.
2.) First Cinema4D, then start working around with Verold.com & PlayCanvas.com
C4D is just my personal favorite because if it's easy integration with AE. You will find that with exporting your 3D models, Textures, Mesh's, anything to Three.JS (or any game engine period) that it is Blender that is the most widely supported. As of writing this, their are 2 separate C4D workflows to ThreeJS. Both are tedious, not always going to work, and actually just unnecessary. PlayCanvas was also a bit of a let down. Verold, however is an EXCELLENT browser based 3D editor in which you can import a variety of files (even FBX with Baked animations!) and when you are satisfied you can export into a standalone client or an iframe. The standalone client is superb. It is a bit glitchy, so have patience. You shouldn't get comfortable with it any way. Go back to your roots.
3.) iPhone app development, Android app dev (to an impressive extent), Web Sites, Web Apps, and more all function in a way that an application need only be made using JavaScript, HTML/5 and CSS/3. Once this is understood, and the truth hits you as to how much control you may not have known you had, then the day becomes good indeed. Learn the code. With a million untested and horrible "GUI's" out there that claim to do what you want, avoid the useless search. Learn the code. You can never go wrong at that point.
4.)What code do I need to learn?
JavaScript is the most essential. More on that in a moment. Seriously dive into creating apps of any kind with ThreeJS. Mr. Doob (co-creator of the library) has an EXCELLENT, well-documented website with tons of examples, tuts, and source code for you to dive into. Chrome Experiments is your next awesome option to see how people are really taking this kind of development to a new level. In the process of learning ThreeJS, you'll become more proficient with JavaScript. You will also start to play with things you maybe never had to, like JSON, or XML files for packaging data. You'll also learn how simple it is to implement Three.JS as a WebGL render, or even fallbacks to Canvas and even CSS3D if and when possible.
Before going on, I will make a caveat. I believe that once Unity 3D drops ThreeJS fro pro and free users, we will see much much more 3D in the web. In that case, it can't hurt to Download the software and play around a bit. It also serves an an excellent visual editor. There are exporters from Unity 3D to ThreeJS, but again they are still pre alpha stage.
2D or not 2D. that is the question
After getting a little dirty with 3D I moved into drawing in the 2D realm using the canvas. Flash still seems like a viable tool, but again, it's all about the code. Learn how to do it and you may find Flash is actually costing you time. I found 2D more difficult than 3D because the nature of 2D has yet to radically change, at least in my lifetime. You'll need to start learning Spritesheet creation tutorials. Nothing incredible hard if you know where to look. Use A photoshop, or an equivalent application. Create as many "movement" frames that if were put together in a GIF would be enough to seamlessly loop the sprite. OR render a master image out and cut around the elements naturally distinct pats. Ex: You want to make the guy you have standing on a street corner you created, stays. Cut that character up in as many separate PNG files as you believe you need. The second method is all about using the same sprite sheet we brought in the first try. The first scenario meant writing CSS selector and have javascript written for the regular user would become increasingly difficult.
First solution: Using CSS and Javascript to plot "frames" meticulously put together in the sprite sheet. This really can become a pain if not done correctly all the way through.
Second solution: We lose the frame by frame effect if we need it, but our overall 2D animations will look incredible. Also, building in this way creates more efficient games when implementing physics engines and setting up collision detectors. We will still use the same sprite sheet, however we only need to choose the frames we really actually need. The idea is to use dynamic tweening between frames that are called together via Javascript. In the end you have a fully animated Sprite, but could have done so with just one frame. Ex: You have a Stickman you want to show walking in a straight line. Solution one would jump frame by frame, creating a mild chop, to illustrate an animated walk. In solution 2, we take the Stick man and chop his dynamic bits apart so we can call them through JavaScript, then build our sprite from JavaScript directly. To create the walking effect, we cut apart stickmans legs and have those separate in the sprite sheet from the rest of his body (unless you need to animate another body part as well). We map out where the coordinates are for each piece of stickman. Free software like DarkFunctionEditor is one of many programs that will instantly take care of generating for you a reliable sprite sheet, printing out the coordinates of your sprite sheet after you bake it. With this knowledge, head into JavaScript and call in your variables that you wish to associate to the pieces of Stick Man and their corresponding coordinates. Then use Javascript to "build" all the pieces together. The walking animation is accomplished by the Tween we talked about earlier. Each leg essentially runs on a beautifully fluid path you set in JavaScript. No chop. Very easy to customize and control. If you want to make it even easier for yourself, try using one of the many libraries for Sprite animation. My favorite at the moment being CreateJS.
If you are looking to include collision detection or create particle systems then you will need a physics engine. For 2D I am torn between 2 at the moment. Right now I would put PhysicsJS over KineticJS. Both are fantastic. I believe PhysicsJS integrates with CaccoonJS and other mobile scripts easier.
My last words of advice are=, after reading this, understand you will be working will JavaScript. You will have a bit of jQuery to make it easy, but you will encounter things that are difficult on the way. My HUGE recommendation is to move into learning how to build using NodeJS. It's an Asynchronous Javascript Server-side and client-side development space. The documentation is wonderful. Your first stop should be learing about npm, and bower. Then understand how to effectively implement Grunt into the workflow. Try out NodeJS assets like Yeoman to give you "boilerplate" Node setups from which to start with. After you start understanding NodeJS mechanics and feel comfortable with setting up your initial package.json, you'll find that all this JavaScript will almost feel like it's writing itself after a certain point.
And that's all you need to know to get into 2D and 3D design and development. My initial question could have been answered using say a 3D rendered fullscreen. However my final conclusion came in a different method entirely.
After learning about 2D sprites and framing, then noticing the encoding process of gifs. I had the idea to try and create PNG Sprite Animations. Not PNG Gifs, per say. But rather creating a 2D scene and using a PNG sequence that I would then animate via JavaScript. I found a few great libraries on Github, both for my idea and cool ideas for GIF manipulation.
My final choices was with the Github Repo "jquery.animateSprite" Instead of mulling through sprite sheets, you take your individual PNG's and this library gives you an incredible amount of control in how you can store variables for later use, but also the animations you can pull off in general. For a full screen, responsive background that works on any device (and can even be animated to sound....) I'd recommend this technique. It works much like a flip book animation works, except much much more effectively.
I hope this helps someone along the way. If you have a question on anything I have mentioned here, or know of an area that needs further detail, then by all means please let me know.
-Cheers
So I'm building a portfolio and sales website for a painter (my wife) based on WooComerce (WordPress). This is a side project that I have plenty of time to finish. I want to build a live/moving photo wall, with perspective. The following photo will give you a (albeit, very rough) idea.
Basically, I want to start off with 16 images (the number is actually arbitrary), apply perspective to them and allow the visitor to click any of the pics and go to that images associated page. Now, after a given time, I want new photos to show up.
I'm not particularly concerned if I flip these pics, randomly, like tiles to introduce new ones OR if a column slides off and a new column is added (i.e. the adding of 17-20 in my picture). This is a semantic difference in the way I build this code and isn't part of my question (I don't think). All of the original pictures are going to be square and will be uploaded by the user, whom we assume is of novice/intermediate computer experience.
So my question is about the approach. Do I:
Make my wall script (likely using jQuery and HTML < map > and < area >) take care of the flipping and linking, but the perspective and scaling is done and cached on the backend.
Every image I upload to the server, for the photo wall, run it through a ImageMagick script that will transform (i.e. apply perspective of the largest size for the wall) and then scale it down for the other columns using a naming convention like: orignalthumnail_marilyn.png perspective0_marilyn.png perspective1_marilyn.png etc. (with the number for the different columns, relating to the scaled sizes). This is will be harder on bandwidth (maybe not, if compressed correctly) and easiest on the user's hardware (assuming non-mobile).
Use Javascript & CSS (and possibly HTML5) to do everything. I load the images into and use the CSS3 skewed/transformed < div >s, JS to flip/moves the tiles (I could do CSS I suppose). I feel that this option is the worst, as far as looks. This is because CSS clips horribly using the transform attribute (on my browser, FF 30) (I also made a quick demo at http://jsbin.com/febatohi/2/edit). Also, it requires the user's hardware to be able to handle all of the transforms, which is not always appreciated online. Maybe there is a way to handle this with a JS library I'm not aware of.
Use Flash. This is my least desirable option. It requires me to either not build this myself or pay someone else (pfft!) or that I acquire and learn Flash from Adobe (I said time wasn't an object, but patience can be). However, it can produce the best looking result, as I have seen things done similarly to this is Flash. It also is a middle ground of hardware and bandwidth, but to me the most time consuming and also limiting to those browsers and users who use Flash (though I feel this is only a small percentage of users).
Other suggestions?
My 9 year old son has very low vision, 1/10. Currently the support people in his school provide him with pdf scans of the textbooks and provide good training for him to access his textbooks on a PC.
However, I consider that this is less than ideal for a number reasons :
Large file size (One geography book is 300Mb, the people who do the
scanning are not tech people)
The text size is only controlled indirectly via zoom, my boy need
40pt text at least the whole time
Difficult to navigate, i.e. there's lots of scrolling over and back
just to read a phrase making the whole reading thing a bit tiring.
No ability to take notes and/or fill in areas for answers in the
textbook.
No access to a TOC/index/
PC problems (weight/power/totallackofcoolnesscomparedtoatablet)
So, I'm thinking that the world of html5 has an answer for me. The process I'm hoping to move towards is the following :
I scan the textbooks and run them through an OCR program like ABBY
FineReader.
This gives me the raw text and the images
Twist this raw data into html5 format with a structure something like
<div class="book">
<div id="TOC"></div> (This TOC will be built dynamically)
<div class="page" id="1"> (Important to keep the notion of pages to allow him to have the same reference as the rest of the class)
<div class="text"></div>
<div class="img"></div>
<div class="answerzone"></div>
<div class="footer"></div>
</div>
</div>
Next, the javascript kicks in and adds the following functionality
Large, semi-transparent Left and right arrows always on screen on bottom corner
Large, semi transparent page number is always apparent, for example on top right corner
Large, semi-transparent symbol on top left corner which gives access to the following features
Access to the Table of contents
Increase/decrease font size
Add a zone where he can either write text from keyboard or onscreen with a stylus. This zone can have an image as background, e.g. where he needs to draw circles around answers.
Everything he adds (text/images) is stored locally on the tablet
So after all that, here's the question part. Does anyone have any experience of similar requirements that have found a solution ?
I can do the javascript stuff (well I think I can) up to the zone for adding text/images and storing all that locally. Does anyone have pointers to existing html5 solutions that could suit my need ?
Best regards,
Colm
P.S. I've gone away from the whole epub thing since, lets face it, it is only html and why not just use a browser instead of ebook reader solutions ?
Take a look at this article: Building Books with CSS3
That is an excellent article, and it has a lot of techniques that could be very useful. Obviously you're going to have to generate a lot of HTML, but using the techniques shown in that article, you won't have to generate nearly as much useless HTML. That article tells you exactly how to do the page numbers and table of contents, and it won't be hard to use JavaScript to create left and right arrows for changing pages (and style it with CSS, naturally).
As for annotation, I'm a little bit confused about whether you want this for a tablet, or a PC. If it's for a PC, I'd suggest to use pre-built tools, such as Zotero. If it's for a tablet, then you may have to play it by ear a bit, because what you can or cannot do varies greatly from tablet to tablet.
This is a very difficult problem. The biggest issue is getting intelligent text out of the PDF. PDF does not have the structure that you will be used to with HTML. It is essentially an electronic piece of paper that is printed to. Text is laid out in blocks that visually line up, but may not have much relation to each other in the file.
I think probably your best bet is to use Calibre to change the format to something else. The results will be far from perfrect, especially in something as complex as a text book. When you convert a book, make sure to go into the options for Heristic Processing and enable it.
If Calibre doesn't work for you, there are also some libraries that you can use to do this.
itext is free for non commercial uses and has text extraction.
pdfbox is free and also has text extraction.
pdfnet is a commercial product, but may have something you can use.
I'm not sure that you are going to get automated results that are going to be satisfying. Given that you only have to deal with one child's curriculum, and not a huge library of PDF's, it might be worth the time to hand copy each page. This way you can arrange the text in an intelligent way.
My demo is here.
Basically, I have a HUGE image (19160px × 512px to be exact, just under 2MB) that I transition the backgroundx using javascript to make it appear as if a transformation was happening.
I cannot compress the image much more without ruining its quality dramatically. Is there another way that I can achieve this with the same level of cross-browser and not rely on plugins like flash, but have it load faster?
Have you considered making this a video?
It might improve loading time somewhat.
Also, another idea. Have you tried using only the first and last image, putting the last one on top of the first, give it opacity:0 and fade it in using JavaScript (e.g. jQuery)?
The effect won't be 100% identical to what you have now, but it might look good enough to please the client, and it would reduce loading time to a bare minimum.
If both ideas won't work for you, I think the first 10-12 frames could be compressed more effectively as GIF images. (It's an estimate, I haven't tried.) You would have to split the image into multiple div s to do that and change the method you use to switch the images, and you would have more requests, but it could be worth it.
If it is a jpeg, you can always use progressive encoding. it will become clearer as it is downloaded.
There is also an interlaced
"Progressive JPEG" format, in which
data is compressed in multiple passes
of progressively higher detail. This
is ideal for large images that will be
displayed while downloading over a
slow connection, allowing a reasonable
preview after receiving only a portion
of the data. -Wikipedia
Slice it like Google Maps.
If you want to change that many pixels on the screen at once, you'll have to get them to the client somehow. You could chunk it into multiple images and use something other than background-x, but then you expose yourself to other potential network interruptions along the way.
The only alternative I can think of to precomputed images like this one is to do the computation on the client - start with the full-colour image and manipulate it using the client's CPU. Your options here involve canvas or CSS3 or a plugin.
I'm not a big fan of Flash but in this case it seems like the right tool for the job (unless you need it work on the iPhone). If you don't have the Flash authoring tool you can use the free Flex compiler.
See http://www.insideria.com/2008/03/image-manipulation-in-flex.html
Make it into an animated gif? Break it up into individual parts to remove all the area that is obscured by content.
I'm doing some animations and I want to implement something like this on the web. I was thinking that the HTML canvas can do this kind of job. Because I can scale part of an image. I just need the algorithm to actually make it work.
The effect is elastic, if the window is small, the greater the elasticity of the window when you restore it. I was thinking that I can make this work in web images.. if the user click the image it will scale with this kind of effect, not the boring way of scaling.
This is ubuntu, I know that we can look at the source code maybe to see how it actually implements the animation. But I dont know where to find it. Or i don't even understand codes written in linux because I just understand php, javascript. Basically I'm not a software developer, My core expertise is in web development.
http://www.youtube.com/watch?v=hgQP-aFragQ
I believe your best bet is having a look at John Resig's Processing.js.
Processing is a animation language for Java; John has ported it to the browser using canvas.
Your not going to find a web based solution that is going to do this for you. If you need something like this done it will have to be in flash or some other application (Lenni mentioned Java) that runs in a separate media box embedded in a web page.
People don't want big flashy animations, seeing something that is 'boring' is much better if it becomes more usable.
First up - I don't know the actual algorithm they use here.
However, I'd attack this by creating a grid of points (say 10x10), each point attached to it's neighbors by damped springs. It might be worth anchoring the edge/corner points to the screen with springs too.
By deforming the grid (stretching and compressing the springs) and then modeling the spring responses, you'd get some interesting effects like those shown. You might then be able to record the patterns so that the points can follow a pre-computed path for faster animation if your animations are predictable.
Then you need to work out how to split the image and map it onto the grid. The splitting may be better done once on the server, but the client can do it if you use canvas.
svg & vml is a possibility - they'll work without plugins and are similar enough to code for, but I don't think you'll get correct enough image deformation. However, you can scale and rotate with impunity (and quickly) so if you just anchor 2 cell image points to the grid rather than all 4, you'll get an interesting animation - not quite like the video, but pretty good.
As for how to model damped springs, you'll need to keep track of the mass of each point (how heavy it is), how much force the spring is exerting on each point (scalar of how compressed/stretched it is and it's vector) and a damping force on the points (resistive force to the square of the velocity of the point).
It's physics modeling, to be sure, but quite possible.
The response may well be slow. Especially on IE. Canvas needs a plug-in on IE, so if you use canvas, IE folk wont see it. SVG works on almost everything except IE, but it does have VML which is similar. http://raphaeljs.com/ is a library that uses whatever's available. This will be a challenge to tune up :)
However you do this, it will always look best in chrome, the V8 javascript engine outstrips everything else for this kind of work. IE has the slowest javascript engine.