Quote:
Originally Posted by Codetapper
|
Excellent link!
For those who have difficulties reading Javascript the overarching principle is the following:
1 - divide your screen in rectangular areas
2 - copy each area in a new screen, slightly shifted in a given direction
3 - in the new screen areas where no copied pixels are present, introduce random pixels
4 - display the new screen and swap old/new screen
5 - go to step 1
Code:
+---------------------+ +----------+----------+
| | | | |
| CHEEKY KITTY | | CHEEKY | KITTY |
| | | | |
| | +---> +---------------------+ +-+
| | | | | |
| WITTY BUNNY | | WITTY | BUNNY | |
| | | | | |
----------------------+ -----------+----------+ |
|
+------------------------------------------------------------+
| +----------+
| | +-+---------+ +-----------N+---------
| | ^ | | | | CHEEKY |O| |
| | | | | +-> | | |P| KITTY |
| +----------+ | | +----------+Q| |
+-> +----------+ +---------+ +---> ABCDEFGHIJKLM+--------- +-+
| | +---------+ | |RVWXYZ012345 |
| <-+ | | | | |WITTY |S| | |
| | | v | | |T| BUNNY | |
-----------+-+ | ----------+U----------+ |
----------+ |
|
+-------------------------------------------------------------+
| +----------+N---------+
| | CHEEKY |O |
| | |P KITTY |
| | |Q |
+-> ABCDEFGHIJKLM---------+ +----> Repeat! \(^o^)/
| RVWXYZ012345
|WITTY S |
| T BUNNY |
-----------U----------+
Note that splitting the screen in four will not produce a nice result , you probably need at least 9 areas (3x3) to obtain a pleasing result.
From this simple principle you can then add a lot of variations: copy only one of each pixel every time (alternating which are left/copied every frame), reuse the previous images in a second/third/fourth bitplane, vary the shifting directions over time, copy some bobs in the image from time to time and watch them deform, etc. the possible variations are infinite and I think there are still a lot of nice results yet to be seen.