Does anyone know an algorithm for this kind of rubber effect?
I am doing animation and I want to implement something like this on the web. I thought an HTML canvas could do this kind of work. Because I can scale part of the image. I just need an algorithm to make it work.
The effect is elastic, if the window is small, the greater the elasticity of the window when it is restored. I thought I could make this work in web images. If the user clicks the image, it will be scaled with that effect rather than the boring way of scaling.
This is ubuntu, I know we can look at the source code, maybe how it actually implements the animation. But I don't know where to find it. Or I don't even understand the codes written in Linux because I just understand php, javascript. Basically, I'm not a software developer. My main specialization is in web development.
a source to share
I believe your best bet is to look at John Resig's Processing.js .
Processing is an animation language for Java; John ported it to the browser using a canvas.
a source to share
You won't find a web-based solution that does this for you. If you want something like this, it must be in Flash or another application (Lenni mentions Java) that launches in a separate media window embedded in the web page.
People don't want big flashy animations, seeing something "boring" is much better if it becomes more useful.
a source to share
First - I don't know what algorithm they are using here.
However, I would attack this by creating a grid of points (e.g. 10x10), each point anchored to it by its neighbors with damped springs. It might be worth pinning the edges / corner points to the screen with springs.
By deforming the mesh (stretching and compressing the springs) and then simulating the spring responses, you will get some interesting effects like the ones shown. You can then write patterns so that points can follow a pre-calculated path for faster animation if your animations are predictable.
Then you need to figure out how to split the image and apply it to the mesh. The splitting might be better done once on the server, but the client can do it if you are using canvas.
svg and vml are a possibility - they will work without plugins and will be code-like enough, but I don't think you will get a good enough deformation of the image. However, you can scale and rotate with impunity (and fast), so if you just snap 2 points of the cell image to the grid rather than all 4, you end up with an interesting animation - not quite like a video, but pretty good.
Regarding how to model damped springs, you will need to keep track of the mass of each point (how heavy it is), how much force the spring exerts on each point (scalar as compressed / stretched this is a vector) and damping force on points (resistive force per square point speed).
Of course, this is a physical simulation, but quite possible.
The response may be slow. Especially on IE. Canvas needs a plugin for IE, so if you are using canvas, IE folk will not see it. SVG works on pretty much everything except IE, but it has VML that is similar. http://raphaeljs.com/ is a library that uses all available. It will be a tricky task to set up :)
However you do it, it will always look its best in chrome, the V8 JavaScript engine beats everything else for this kind of work. IE has the slowest javascript engine.
a source to share