<p>You could do this entirely within an OpenGL/WebGL fragment shader:</p>

<p>Attach the image you wish to emerge as a texture/sampler2D.
Attach uniforms for the current time, as well as the time you want the effect to finish.</p>

<pre><code>uniform sampler2D myTexture;
uniform float currentTime;
uniform float finishTime;

#define TWO_PI 6.283185307179586476925286766559
</code></pre>

<p>Next, apply a deterministic pseudo-random noise algorithm for displacing pixels a given distance and compass direction. Something like:</p>

<pre><code>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 );
</code></pre>

<p>Note, the above <em>clamp</em> stops the effect at the appropriate time, as well as sets a maximum (10 sec, in this example) duration of the effect.</p>

<p>Finally, look up your texture sample:</p>

<pre><code>gl_FragColor = gl_Color * texture2D(myTexture, texCoord);
</code></pre>

<p>Voila! While the pixels may not navigate around each other, they'll at least wander into place, each arriving at it's own distinct time within the timeframe allotted to the effect, and using very little memory and CPU time.</p>

CC BY-SA 3.0
2017-05-16T06:47:01.240Z
My first attempt to [run this on shadertoy.com](https://www.shadertoy.com/view/lslBRH) is missing a few pieces. If you know the site, could you please have a look?
handle
CC BY-SA 3.0
2017-05-16T19:23:17.657Z
Yes, this wasn't intended to be a complete program. I was just trying to explain my method. In looking at it again, I think I'll need to revise it. I don't have time right now, but I'll try to get an example up & running soon.
Jack
CC BY-SA 3.0
2017-05-16T19:42:33.397Z
Yes, of course. I'm just not able to fill in the gaps on my own without spending too much time with WebGL/Shadertoy, but I thought I'd give it a bit of a try. However, while I'm curious to see how this works and to get a glimpse at the result, it's not ultimately the approach I am looking for, since it requires complex graphics hardware and is way beyond a "simple" algorithm.
handle
CC BY-SA 3.0
2017-05-17T03:50:35.177Z
Actually, almost everybody has the hardware needed to view WebGL.
http://caniuse.com/#feat=webgl
Jack
CC BY-SA 3.0
2017-05-15T19:07:39.017Z
2017-05-15T20:07:57.437Z
2017-05-15T20:07:57.437Z
Jack
<h1>A very simple low memory approach</h1>

<p>If you really want to use as little memory as possible, it can be done with not much more memory than that required to store a single image (the first frame) provided it is acceptable to do some preprocessing in advance.</p>

<p>If you copy the following jumbled image, <a href="https://jsfiddle.net/rxaacpp1/" rel="nofollow noreferrer">this jsfiddle</a> will take it as input:</p>

<p><a href="https://i.sstatic.net/Qx7Ao.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Qx7Ao.png" alt="Blurred image showing a jumble of pixels"></a></p>

<p>It will then move the pixels around one step at a time so they drift into place to give the original image again:</p>

<p><a href="https://i.sstatic.net/NnZON.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/NnZON.png" alt="Original image of clear text"></a></p>

<p>This does not require any memory for tracking particles. The algorithm is very simple:</p>

<ul>
<li>Pick a pixel at random</li>
<li>Swap it with one of its 4 neighbours</li>
<li>Repeat a million times</li>
</ul>

<p>No additional memory is required as no particles are being used. We're simply swapping pixels at random, with no destination locations in mind. The key is in choosing that apparently jumbled initial image to have the pixels in exactly the right places such that applying a million random swaps will happen to leave all the pixels in exactly the right places to give the desired text.</p>

<h1>Setting up the initial jumbled image</h1>

<p>To do that, <a href="https://jsfiddle.net/2f9a3jcm/" rel="nofollow noreferrer">this preparatory jsfiddle</a> takes an image as input and outputs a jumbled image that is precisely arranged to work as input for the main jsfiddle.</p>

<p>This one takes more memory, but is still a very simple algorithm:</p>

<ul>
<li>Generate a large number of random numbers and store them</li>
<li>Using these numbers in reverse order* (using the last first):

<ul>
<li>Pick a pixel at random</li>
<li>Swap it with one of its 4 neighbours</li>
<li>Repeat a million times</li>
</ul></li>
</ul>

<p>This is exactly the opposite of what the main jsfiddle will do, so the jumbling will be completely reversed, restoring the original image. You can paste in a colour image, or if you want just text with only black and white pixels that will work too. The example image shown above is between these two extremes, as it has greyscale pixels for the antialiasing, which wander around alongside the black and white pixels.</p>

<p>A million pixel swaps works for fairly small images. For larger sizes this won't jumble them enough to completely obscure the original image, so you would need to adjust the number of swaps.</p>

<h1>Languages without reseeding</h1>

<p>Note that this only works because the pseudorandom number generator is reseeded at the start of both algorithms, to ensure that they are both working with exactly the same list of "random" numbers. Most languages will allow you to reseed the random number generator, making this an easy approach. JavaScript does not, so the jsfiddles include an implementation of <a href="https://en.wikipedia.org/wiki/Xorshift" rel="nofollow noreferrer">xorshift</a> to allow reseeding.</p>

<p>Even with a language that does allow reseeding, if the hardware is particularly limited then you may want to consider xorshift as it is very fast and uses only 4 bytes of memory for its state. It's also only a few lines of code.</p>

<hr>

<p>*Note that the order isn't quite the same as just reversed. In this example code, three random numbers are used for each pair of pixels to be swapped. So the order of each triple must be kept the same to avoid choosing different pairs of pixels. For example:</p>

<p>[1, 2, 3], [4, 5, 6], [7, 8, 9]</p>

<p>must be reversed to</p>

<p>[7, 8, 9], [4, 5, 6], [1, 2, 3]</p>

<p>in order that the same x value, y value and direction be chosen for each pixel pair when running in reverse.</p>

CC BY-SA 3.0
2017-05-18T00:30:02.877Z
If this site gets [stack snippets](https://computergraphics.meta.stackexchange.com/questions/26/do-we-want-stack-snippets) at some point, I'll replace the jsfiddles with stack snippets so it can all be viewed from the answer post.
trichoplax is on Codidact now
CC BY-SA 3.0
2017-05-18T05:36:22.980Z
Thanks for this nice demo of your initial idea. I'll post a capture of the animation tomorrow for you to integrate into your post. I think this might be called a (pseudo) random-random walk? This might be extended with more directionality at the cost of additional state memory for each pixel (3 bits). But the effect is close enough to the original's presumed particle effect. I'll try to find out if there are any RNGs/LSFR whose state can be set without iteration (for the reverse operation) and then implement this on a microcontroller. Thanks again.
handle
CC BY-SA 3.0
2017-05-18T22:34:47.567Z
I have to admit, this is the better answer. +1
Jack
CC BY-SA 3.0
2017-05-22T12:11:42.673Z
@Jackalope thank you! My approach is less sophisticated and I can't imagine why the memory would need to be so restricted, but assuming that it is, this was the simplest I could think of.
trichoplax is on Codidact now
CC BY-SA 3.0
2017-05-18T00:24:27.203Z
2017-05-21T11:16:04.630Z
2017-05-21T11:16:04.630Z
trichoplax is on Codidact now
<p><a href="https://youtu.be/7oSH-aZKyU8?t=72" rel="nofollow noreferrer">This YouTube video</a> of a flip-dot display (physical b/w pixels) shows the reverse of an effect that might be called dissolve or dispersion, i.e. a text emerges from noise by pixels moving in to form letters. Here's a short cropped clip showing just the "crystallization" (wouldn't that be an appropriate name?):</p>

<p><img src="https://i.sstatic.net/9BXg0.gif" alt="animated gif extract from youtu.be/7oSH-aZKyU8 copyright BREAKFAST NY">(source: <a href="https://youtu.be/7oSH-aZKyU8" rel="nofollow noreferrer">BREAKFAST NY</a>)</p>

<p>Looking for more info on this or similar effects I found <a href="https://www.macprovideo.com/hub/after-effects/after-effects-text-that-blows-away-like-sand" rel="nofollow noreferrer">After Effects: Text That Blows Away Like Sand</a> which has a <em>Shatter</em> effect, apparently a 3D <a href="https://en.wikipedia.org/wiki/Particle_system" rel="nofollow noreferrer">particle system</a> with physics simulation.</p>

<p>For a particle system, I can imagine that "dissolving" every pixel (of a character) randomly wouldn't be too hard. Reversing the effect as shown in the video could be done using a precalculated sequence or even just animated sprites for each letter. Or, each pixel in the noise gets chosen to gravitate towards a letter (seems more complicated, may require clustering).</p>

<p>Then I found an implementation and live demo:</p>

<ul>
<li><p><em>Particles text effects</em></p>

<p>Uses particles with a seek behavior to make up a word.
The word is loaded into memory so that each particle can figure out their own position they need to seek.
Inspired by Daniel Shiffman's arrival explantion from The Nature of Code. (natureofcode.com)</p>

<p><a href="https://www.openprocessing.org/sketch/377231" rel="nofollow noreferrer">https://www.openprocessing.org/sketch/377231</a></p>

<p>The reference resolves to</p>

<ul>
<li><a href="http://natureofcode.com/book/chapter-4-particle-systems" rel="nofollow noreferrer">http://natureofcode.com/book/chapter-4-particle-systems</a></li>
<li><a href="http://natureofcode.com/book/chapter-6-autonomous-agents/" rel="nofollow noreferrer">http://natureofcode.com/book/chapter-6-autonomous-agents/</a> (6.4 Arriving Behavior)</li>
</ul></li>
</ul>

<p>I think the effect is very similar, so I think they used a particle system.</p>

<p><strong>Q: Is there an approach that does not require particles (i.e. less memory-expensive)?</strong></p>

<hr/>

<p>Just for comparison, here's an attempt at creating a "normal" animated noise dissolve (<a href="https://math.stackexchange.com/questions/2280900/pseudorandom-binary-mask-for-animated-dissolve-effect">random dither</a>), <a href="https://computergraphics.stackexchange.com/questions/5104/pixel-dispersion-dissolving-algorithms#comment7504_5104">as suggested in a comment</a>, but I think it's obvious that the pixels in the original <em>do</em> move and it's not just a binary blending effect:</p>

<p><img src="https://i.sstatic.net/gy8az.gif" alt="Imgur"></p>

<p>It requires at least one random value for each pixel: on which frame of the animation to become active.</p>

<p><hr/>
This is what <a href="https://computergraphics.stackexchange.com/a/5124/">trichoplax's solution</a> looks like (pseudorandomly swapping 10,000 neighboring pixels in each of 100 frames, and then reversing it using the same pseudorandom number sequence, just reversed):</p>

<p><img src="https://i.sstatic.net/iYoQz.gif" alt="Imgur"></p>

CC BY-SA 3.0
2017-05-14T15:24:37.013Z
Are you looking for a memory-efficient way of producing this exact effect (particles moving into their required positions), or are you looking for similar effects that don't look quite the same but are easier/more memory-efficient to implement? For example. fading in the final text whilst simultaneously fading out animated white noise would have a similar feel, but wouldn't really look like moving particles, so we need to know precisely what you require in order to be able to answer.
trichoplax is on Codidact now
CC BY-SA 3.0
2017-05-14T15:45:34.570Z
The random dots dissolving into text doesn't look to me like the dots move at all. It looks like random noise which is then blended with the letters using the "noise dissolve" blend mode or transition.
user1118321
CC BY-SA 3.0
2017-05-14T15:53:46.297Z
@trichoplax Same effect with "moving" binary pixels
handle
CC BY-SA 3.0
2017-05-14T15:53:51.970Z
@user118321 I think I understand what you mean: Wouldn't that require non-random noise blend masks (to blend _all_ pixels within a few transition frames)? That would require full frame animated masks (and the respective memory).
handle
CC BY-SA 3.0
2017-05-14T16:42:19.243Z
If you require individual pixels to be visibly following paths, would you be interested in solutions that save memory by using a limited number of distinct path patterns, so that some pixels are following the same path as each other, just offset by the distance between their final destinations?
trichoplax is on Codidact now
CC BY-SA 3.0
2017-05-14T18:17:49.537Z
Might work if the pixels come from the same letters, but if e.g. all set top-left pixels move in synch I suspect it will be noticable. Another question is whether it would work with proportional fonts.
handle
CC BY-SA 3.0
2017-05-15T19:01:37.580Z
@trichoplax If I understand correctly, that sounds good indeed - but it'll take some time for me to try. Thanks for now, I'll report back!
handle
CC BY-SA 3.0
2017-05-15T19:12:50.243Z
@trichoplax Thanks, I'd like to get back to you once more questions come up.
handle
CC BY-SA 4.0
2020-11-20T08:53:17.250Z
Related effect: [Diffusion Clock](https://www.technoblogy.com/show?3AAM) - "Every minute the display disappears randomly, a dot at a time, to a blank display, and then the new time appears a dot at a time, making it look as if the time diffuses between the two displays."
handle
<image-processing><animation><filtering><particles>
Pixel dispersion (dissolving) algorithms
handle
# Pixel dispersion (dissolving) algorithms

(Asked by: username_0 on 2017-05-14)

[This YouTube video](https://youtu.be/7oSH-aZKyU8?t=72) of a flip-dot display (physical b/w pixels) shows the reverse of an effect that might be called dissolve or dispersion, i.e. a text emerges from noise by pixels moving in to form letters. Here's a short cropped clip showing just the "crystallization" (wouldn't that be an appropriate name?):

![animated gif extract from youtu.be/7oSH-aZKyU8 copyright BREAKFAST NY](https://i.sstatic.net/9BXg0.gif)(source: [BREAKFAST NY](https://youtu.be/7oSH-aZKyU8))

Looking for more info on this or similar effects I found [After Effects: Text That Blows Away Like Sand](https://www.macprovideo.com/hub/after-effects/after-effects-text-that-blows-away-like-sand) which has a *Shatter* effect, apparently a 3D [particle system](https://en.wikipedia.org/wiki/Particle_system) with physics simulation.

For a particle system, I can imagine that "dissolving" every pixel (of a character) randomly wouldn't be too hard. Reversing the effect as shown in the video could be done using a precalculated sequence or even just animated sprites for each letter. Or, each pixel in the noise gets chosen to gravitate towards a letter (seems more complicated, may require clustering).

Then I found an implementation and live demo:

* *Particles text effects*

  Uses particles with a seek behavior to make up a word.
  The word is loaded into memory so that each particle can figure out their own position they need to seek.
  Inspired by Daniel Shiffman's arrival explantion from The Nature of Code. (natureofcode.com)

  <https://www.openprocessing.org/sketch/377231>

  The reference resolves to

  + <http://natureofcode.com/book/chapter-4-particle-systems>
  + <http://natureofcode.com/book/chapter-6-autonomous-agents/> (6.4 Arriving Behavior)

I think the effect is very similar, so I think they used a particle system.

**Q: Is there an approach that does not require particles (i.e. less memory-expensive)?**

---

Just for comparison, here's an attempt at creating a "normal" animated noise dissolve ([random dither](https://math.stackexchange.com/questions/2280900/pseudorandom-binary-mask-for-animated-dissolve-effect)), [as suggested in a comment](https://computergraphics.stackexchange.com/questions/5104/pixel-dispersion-dissolving-algorithms#comment7504_5104), but I think it's obvious that the pixels in the original *do* move and it's not just a binary blending effect:

![Imgur](https://i.sstatic.net/gy8az.gif)

It requires at least one random value for each pixel: on which frame of the animation to become active.

---

This is what [username_1's solution](https://computergraphics.stackexchange.com/a/5124/) looks like (pseudorandomly swapping 10,000 neighboring pixels in each of 100 frames, and then reversing it using the same pseudorandom number sequence, just reversed):

![Imgur](https://i.sstatic.net/iYoQz.gif)

**Tags:** image-processing, animation, filtering, particles

> **Comments:**
> **username_1**: Are you looking for a memory-efficient way of producing this exact effect (particles moving into their required positions), or are you looking for similar effects that don't look quite the same but are easier/more memory-efficient to implement? For example. fading in the final text whilst simultaneously fading out animated white noise would have a similar feel, but wouldn't really look like moving particles, so we need to know precisely what you require in order to be able to answer.  
> **username_2**: The random dots dissolving into text doesn't look to me like the dots move at all. It looks like random noise which is then blended with the letters using the "noise dissolve" blend mode or transition.  
> **username_0**: @username_1 Same effect with "moving" binary pixels  
> **username_0**: @user118321 I think I understand what you mean: Wouldn't that require non-random noise blend masks (to blend _all_ pixels within a few transition frames)? That would require full frame animated masks (and the respective memory).  
> **username_1**: If you require individual pixels to be visibly following paths, would you be interested in solutions that save memory by using a limited number of distinct path patterns, so that some pixels are following the same path as each other, just offset by the distance between their final destinations?  
> **username_0**: Might work if the pixels come from the same letters, but if e.g. all set top-left pixels move in synch I suspect it will be noticable. Another question is whether it would work with proportional fonts.  
> **username_0**: @username_1 If I understand correctly, that sounds good indeed - but it'll take some time for me to try. Thanks for now, I'll report back!  
> **username_0**: @username_1 Thanks, I'd like to get back to you once more questions come up.  
> **username_0**: Related effect: [Diffusion Clock](https://www.technoblogy.com/show?3AAM) - "Every minute the display disappears randomly, a dot at a time, to a blank display, and then the new time appears a dot at a time, making it look as if the time diffuses between the two displays."  

---

## 2 answers

### Answer by username_1 on 2017-05-18. Score: 4 | Accepted answer

# A very simple low memory approach

If you really want to use as little memory as possible, it can be done with not much more memory than that required to store a single image (the first frame) provided it is acceptable to do some preprocessing in advance.

If you copy the following jumbled image, [this jsfiddle](https://jsfiddle.net/rxaacpp1/) will take it as input:

[![Blurred image showing a jumble of pixels](https://i.sstatic.net/Qx7Ao.png)](https://i.sstatic.net/Qx7Ao.png)

It will then move the pixels around one step at a time so they drift into place to give the original image again:

[![Original image of clear text](https://i.sstatic.net/NnZON.png)](https://i.sstatic.net/NnZON.png)

This does not require any memory for tracking particles. The algorithm is very simple:

* Pick a pixel at random
* Swap it with one of its 4 neighbours
* Repeat a million times

No additional memory is required as no particles are being used. We're simply swapping pixels at random, with no destination locations in mind. The key is in choosing that apparently jumbled initial image to have the pixels in exactly the right places such that applying a million random swaps will happen to leave all the pixels in exactly the right places to give the desired text.

# Setting up the initial jumbled image

To do that, [this preparatory jsfiddle](https://jsfiddle.net/2f9a3jcm/) takes an image as input and outputs a jumbled image that is precisely arranged to work as input for the main jsfiddle.

This one takes more memory, but is still a very simple algorithm:

* Generate a large number of random numbers and store them
* Using these numbers in reverse order\* (using the last first):
  + Pick a pixel at random
  + Swap it with one of its 4 neighbours
  + Repeat a million times

This is exactly the opposite of what the main jsfiddle will do, so the jumbling will be completely reversed, restoring the original image. You can paste in a colour image, or if you want just text with only black and white pixels that will work too. The example image shown above is between these two extremes, as it has greyscale pixels for the antialiasing, which wander around alongside the black and white pixels.

A million pixel swaps works for fairly small images. For larger sizes this won't jumble them enough to completely obscure the original image, so you would need to adjust the number of swaps.

# Languages without reseeding

Note that this only works because the pseudorandom number generator is reseeded at the start of both algorithms, to ensure that they are both working with exactly the same list of "random" numbers. Most languages will allow you to reseed the random number generator, making this an easy approach. JavaScript does not, so the jsfiddles include an implementation of [xorshift](https://en.wikipedia.org/wiki/Xorshift) to allow reseeding.

Even with a language that does allow reseeding, if the hardware is particularly limited then you may want to consider xorshift as it is very fast and uses only 4 bytes of memory for its state. It's also only a few lines of code.

---

\*Note that the order isn't quite the same as just reversed. In this example code, three random numbers are used for each pair of pixels to be swapped. So the order of each triple must be kept the same to avoid choosing different pairs of pixels. For example:

[1, 2, 3], [4, 5, 6], [7, 8, 9]

must be reversed to

[7, 8, 9], [4, 5, 6], [1, 2, 3]

in order that the same x value, y value and direction be chosen for each pixel pair when running in reverse.

> **Comments:**
> **username_1**: If this site gets [stack snippets](https://computergraphics.meta.stackexchange.com/questions/26/do-we-want-stack-snippets) at some point, I'll replace the jsfiddles with stack snippets so it can all be viewed from the answer post.  
> **username_0**: Thanks for this nice demo of your initial idea. I'll post a capture of the animation tomorrow for you to integrate into your post. I think this might be called a (pseudo) random-random walk? This might be extended with more directionality at the cost of additional state memory for each pixel (3 bits). But the effect is close enough to the original's presumed particle effect. I'll try to find out if there are any RNGs/LSFR whose state can be set without iteration (for the reverse operation) and then implement this on a microcontroller. Thanks again.  
> **username_3**: I have to admit, this is the better answer. +1  
> **username_1**: @Jackalope thank you! My approach is less sophisticated and I can't imagine why the memory would need to be so restricted, but assuming that it is, this was the simplest I could think of.  

---

### Answer by username_3 on 2017-05-15. Score: 2

You could do this entirely within an OpenGL/WebGL fragment shader:

Attach the image you wish to emerge as a texture/sampler2D.
Attach uniforms for the current time, as well as the time you want the effect to finish.

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

#define TWO_PI 6.283185307179586476925286766559

```

Next, apply a deterministic pseudo-random noise algorithm for displacing pixels a given distance and compass direction. Something like:

```
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 );

```

Note, the above *clamp* stops the effect at the appropriate time, as well as sets a maximum (10 sec, in this example) duration of the effect.

Finally, look up your texture sample:

```
gl_FragColor = gl_Color * texture2D(myTexture, texCoord);

```

Voila! While the pixels may not navigate around each other, they'll at least wander into place, each arriving at it's own distinct time within the timeframe allotted to the effect, and using very little memory and CPU time.

> **Comments:**
> **username_0**: My first attempt to [run this on shadertoy.com](https://www.shadertoy.com/view/lslBRH) is missing a few pieces. If you know the site, could you please have a look?  
> **username_3**: Yes, this wasn't intended to be a complete program. I was just trying to explain my method. In looking at it again, I think I'll need to revise it. I don't have time right now, but I'll try to get an example up & running soon.  
> **username_0**: Yes, of course. I'm just not able to fill in the gaps on my own without spending too much time with WebGL/Shadertoy, but I thought I'd give it a bit of a try. However, while I'm curious to see how this works and to get a glimpse at the result, it's not ultimately the approach I am looking for, since it requires complex graphics hardware and is way beyond a "simple" algorithm.  
> **username_3**: Actually, almost everybody has the hardware needed to view WebGL. http://caniuse.com/#feat=webgl  

---

