【福利】乳摇动画初探

498 查看

咳，以探索技术的精神进行一些猥琐的实现，先说明，如果你只想看最后乳摇的结果那就请ctrl+F4吧，因为网上有那些乳摇的APP，制作出来绝对比我这个初探的方法好，我这个只是介绍我实现乳摇的过程思路与方法。

关于乳摇如何实现，我第一个想法是使用metaball，因为是两个球嘛，然而发现根本就不行，Fail。最终使用的是液化算法去实现。

好了，下面是对液化算法的介绍。

如果你从来不使用ps，暂时想不起来液化是什么不要紧，请看下图

这个是采用液化使一只静态的小狗有了动的感觉

总而言之，液化是使一张图片的部分进行平滑的有规律的变化，这个变化有扭曲的平移之感

是如何实现的呢，来看算法，先给一张图

局部变化以一个圈为变化环境，C点是圆心，r是半径，当C移动到M这个点时，U移动到X。

通过以上这句话我们得出了这样的结论：

液化的变化只在半径为r的圆内发生，距离圆心越近，变化越明显。这是不是和乳摇这一现象特别的吻合？

下面是算法公式

公式终于实现的是你知道X点的坐标，可以推算出U点的坐标，反之知道U点也可以推算出X的坐标

怎么推算出来的这个我也不知道，需要结合圆的范围，进行插值处理，但是具体如何得到这个结论，感兴趣的同学可以阅读

Andreas Gustafsson 的 Interactive Image Warping一文，这个公式就是从这而来

好了，接下来该码程序了

乳摇首先你得有图

var sImg = new Image();

sImg.src = './dd.png';

var leftImage = new Image();

leftImage.src = './dd_left.png';

var rightImage = new Image();

rightImage.src = './dd_right.png';

var timer = null;

sImg.onload = function() {

oGC.drawImage(sImg, 0, 0);

};

这里上来就有三张图，其中一张是完整的，还有两张分别是美女左右对半分开的【其实就是左胸和右胸】，因为需要这两张图进行乳摇【液化】后的还原。当然你也可以只用一张图，先取出还原的像素存起来也是可以的，我在这里偷懒了

function liquify(imgData, cx, cy, mx, my, r) {

var imgDataBuff = copyImageDataBuff(imgData);

eachCircleDot(imgData, cx, cy, r, function(posi) {

var tx = posi.x,

ty = posi.y;

var u = transFormula(cx, cy, mx, my, tx, ty, r);

moveDot(imgData, imgDataBuff, posi, u);

function transFormula(cx, cy, mx, my, tx, ty, r) {

var relativity = sqr(r) - distanceSqr(tx, ty, cx, cy);

var distanceMovedSqr = distanceSqr(mx, my, cx, cy);

var rate = sqr(relativity / (relativity + distanceMovedSqr));

var ux = (tx - rate*(mx-cx)),

uy = (ty - rate*(my-cy));

return {

x: ux,

y: uy

};

}

});

return imgData;

}

上面是液化算法的函数，结合上面的图来看，参数分别是图片像素data，圆心C的x轴和y轴，M点的x轴和y轴，圆的半径r

copyImageDataBuff是将将要液化部分的像素copy一份，代码如下

function copyImageDataBuff(imgData) {

var data = imgData.data,

imgDataBuff = [];

for(var i in data) {

imgDataBuff[i] = data[i];

}

return imgDataBuff;

}

eachCircleDot是将每个圆内的像素取出来进行处理