像素色散（溶解）算法

#1 楼

一种非常简单的低内存方法

如果您真的想使用尽可能少的内存，则可以用不超过存储单个图像（第一帧）所需的内存来完成此操作可以接受预先进行一些预处理。

如果复制以下混乱的图像，则此jsfiddle将其作为输入：



然后，它将一次将像素移动大约一个步骤，从而使它们漂移到位以再次提供原始图像：

。该算法非常简单：


随机拾取一个像素
与它的四个邻居之一交换它
重复一百万次

>由于不使用颗粒，因此不需要额外的内存。我们只是在不考虑目标位置的情况下随机交换像素。关键在于选择看似混乱的初始图像，以将像素放置在正确的位置，以便应用一百万次随机交换将所有像素留在正确的位置以提供所需的文本。 />设置初始的混杂图像

为此，该准备好的jsfiddle将图像作为输入，并输出经过精确排列的混杂图像，以用作主要jsfiddle的输入。

这会占用更多内存，但仍然是一个非常简单的算法：


生成大量随机数并存储它们
以相反的顺序使用这些数字*（使用倒数第二个）：


随机选择一个像素
与四个邻居之一交换它
重复一百万次



这与主要jsfiddle所做的恰好相反，因此搅动将被完全反转，从而还原原始图像。您可以粘贴彩色图像，也可以只粘贴黑白像素的文本。上面显示的示例图像介于这两个极端之间，因为它具有用于抗锯齿的灰度像素，并且在黑白像素旁边徘徊。

一百万个像素交换适用于相当小的图像。对于较大的尺寸，这不会使它们杂乱无章以至于完全遮盖原始图像，因此您需要调整交换次数。只能这样做是因为在两种算法的开始都重新植入了伪随机数生成器，以确保它们都使用完全相同的“随机”数列表。大多数语言将允许您重新设定随机数生成器的种子，这使此方法很简单。 JavaScript不支持，所以jsfiddles包含xorshift的实现以允许重新播种。

即使使用允许重新播种的语言，如果硬件特别受限制，那么您可能也要考虑xorshift，因为它非常快速且仅使用4个字节的内存作为其状态。它也只有几行代码。


*请注意，顺序与反转的顺序并不完全相同。在此示例代码中，三个随机数用于要交换的每对像素。因此，每个三元组的顺序必须保持相同，以避免选择不同的像素对。例如：

[1、2、3]，[4、5、6]，[7、8、9]

必须反转为

[7、8、9]，[4、5、6]，[1、2、3]

，以便为x选择相同的x值，y值和方向反向运行时每个像素对。

#2 楼

您可以完全在OpenGL / WebGL片段着色器中完成此操作：

将希望出现的图像作为Texture / sampler2D附加。
附加当前时间和时间的制服您想要效果完成。

接下来，应用确定性伪随机噪声算法将像素移动给定距离和罗盘方向。像这样：

uniform sampler2D myTexture;
uniform float currentTime;
uniform float finishTime;

#define TWO_PI 6.283185307179586476925286766559

注意，上面的钳制在适当的时间停止了效果，并设置了最大持续时间（在此示例中为10秒）效果。

最后，查找您的纹理样本：

float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
float R = rand(thisPixel.xy);

var float timeLeft = clamp((finishTime - currentTime) * R, 0.0, 10000.0);

float direction = classic1dPerlinNoise( R + currentTime ) * TWO_PI;
float offsetX = thisPixel.x + sin(direction) * timeLeft / 500.0;
float offsetY = thisPixel.Y + cos(direction) * timeLeft / 500.0;
vec2 texCoord = vec2( offsetX, offsetY );

Voila！尽管像素可能不会彼此导航，但它们至少会游荡到适当的位置，每个像素在分配给效果的时间范围内到达其自己的不同时间，并且占用的内存和CPU时间很少。