Monday, October 24, 2011

Quasicrystals as sums of waves in the plane

On the suggestion of a friend, I rendered this animation:

This quasicrystal is full of emergent patterns, but it can be described in a simple way. Imagine that every point in the plane is shaded according to the cosine of its y coordinate. The result would look like this:

Now we can rotate this image to get other waves, like these:

Each frame of the animation is a summation of such waves at evenly-spaced rotations. The animation occurs as each wave moves forward.

I recommend viewing it up close, and then from a few feet back. There are different patterns at each spatial scale.

The code

To render this animation I wrote a Haskell program, using the Repa array library. For my purposes, the advantages of Repa are:

  • Immutable arrays, supporting clean, expressive code
  • A fast implementation, including automatic parallelization
  • Easy output to image files, via repa-devil

Here is a simplified (but complete!) program, which renders a single still image.

import Data.Array.Repa ( Array, DIM2, DIM3, Z(..), (:.)(..) )
import qualified Data.Array.Repa as R
import qualified Data.Array.Repa.IO.DevIL as D

import Data.Word ( Word8 )
import Data.Fixed ( divMod' )

For clarity, we define a few type synonyms:

type R     = Float
type R2 = (R, R)
type Angle = R

We'll convert pixel indices to coordinates in the real plane, with origin at the image center. We have to decide how many pixels to draw, and how much of the plane to show.

pixels :: Int
pixels = 800
scale :: R
scale = 128

Repa's array indices are "snoc lists" of the form (Z :. x :. y). By contrast, our planar coordinates are conventional tuples.

point :: DIM2 -> R2
point = \(Z :. x :. y) -> (adj x, adj y) where
adj n = scale * ((2 * fromIntegral n / denom) - 1)
denom = fromIntegral pixels - 1

A single wave is a cosine depending on x and y coordinates in some proportion, determined by the wave's orientation angle.

wave :: Angle -> R2 -> R
wave th = f where
(cth, sth) = (cos th, sin th)
f (x,y) = (cos (cth*x + sth*y) + 1) / 2

To combine several functions, we sum their outputs, and wrap to produce a result between 0 and 1. As n increases, (wrap n) will rise to 1, fall back to 0, rise again, and so on. sequence converts a list of functions to a function returning a list, using the monad instance for ((->) r).

combine :: [R2 -> R] -> (R2 -> R)
combine xs = wrap . sum . sequence xs where
wrap n = case divMod' n 1 of
(k, v) | odd k -> 1-v
| otherwise -> v

To draw the quasicrystal, we combine waves at 7 angles evenly spaced between 0 and π.

angles :: Int -> [Angle]
angles n = take n $ enumFromThen 0 (pi / fromIntegral n)

quasicrystal :: DIM2 -> R
quasicrystal = combine (map wave (angles 7)) . point

We convert an array of floating-point values to an image in two steps. First, we map floats in [0,1] to bytes in [0,255]. Then we copy this to every color channel. The result is a 3-dimensional array, indexed by (row, column, channel). repa-devil takes such an array and outputs a PNG image file.

toImage :: Array DIM2 R -> Array DIM3 Word8
toImage arr = R.traverse arr8 (:. 4) chans where
arr8 = (floor . (*255) . min 1 . max 0) arr
chans _ (Z :. _ :. _ :. 3) = 255 -- alpha channel
chans a (Z :. x :. y :. _) = a (Z :. x :. y)

main :: IO ()
main = do
let arr = R.fromFunction (Z :. pixels :. pixels) quasicrystal
D.runIL $ D.writeImage "out.png" (toImage arr)

Running it

Repa's array operations automatically run in parallel. We just need to enable GHC's threaded runtime.

$ ghc -O2 -rtsopts -threaded quasicrystal.lhs
$ ./quasicrystal +RTS -N
$ xview out.png

And it looks like this:

Note that repa-devil silently refuses to overwrite an existing file, so you may need to rm out.png first.

On my 6-core machine, this parallel code ran in 3.72 seconds of wall-clock time, at a CPU utilization of 474%. The same code compiled without -threaded took 14.20 seconds, so the net efficiency of parallelization is 382%. This is a good result; what's better is how little work it required on my part. Cutting a mere 10 seconds from a single run is not a big deal. But it starts to matter when rendering many frames of animation, and trying out variations on the algorithm.

As a side note, switching from Float to Double increased the run time by about 30%. I suspect this is due to increased demand for memory bandwidth and cache space.

You can grab the Literate Haskell source and try it out on your own machine. This is my first Repa program ever, so I'd much appreciate feedback on improving the code.

Be sure to check out Michael Rule's work on animating quasicrystals.


  1. How can you be doing both

    > import qualified Data.Array.Repa as R


    > type R = Float

    at the same time? My Haskell is very rusty, but I can't see how that would work...

  2. Should be fine... "R" will refer to the type, since "R" by itself as a module qualifier makes no sense.

  3. Ported to HTML5 canvas:

  4. nice idea! reminds me of the old plasmas in the demoscene...
    ported to webgl via shadertoy - realtime in your browser!

  5. The resultant image isn't a true structure of a quasicrystal, is it? Doesn't the pattern repeat beyond the bounds of the image?

  6. It has 7-fold symmetry about the origin, so it can't be periodic.

  7. These patterns never truly repeat, try it for yourself. You can render as much of the crystal as you like, and drive yourself crazy looking for alignment, but all you'll ever find are local regions that approximately align.

  8. Also ported to WebGL via PhiloGL. Can toggle fullscreen :)

  9. Does not work on nvidia because you define "float v" twice, just rename it to some other value and it works fine.

  10. // paste this into for pictures!
    // this is a gpu/webgl version of
    // 'implementation' by @mmalex for
    // fixed up by colski
    #ifdef GL_ES
    precision highp float;
    uniform float time;
    uniform vec2 resolution;
    void main(void)
    vec2 p = gl_FragCoord.xy / resolution.xy;
    float t=time*5.0; // change this for more speed
    vec2 up=vec2(256.0,0.0); // change this for finer/coarser stripes
    const float c = 0.90096886790241, s = 0.43388373911755; // sin and cos of pi / 7
    const vec2 rx=vec2(c, s), ry=vec2(-s, c);
    float sum = 0.0;
    for (int i = 0; i < 7; ++i)
    sum += cos(dot(p,up)+t);
    up = vec2(dot(up,rx), dot(up,ry));
    float a1=(cos(sum+2.0)+1.0) * 0.5; // the important wrap around term. play with this for different effects
    gl_FragColor = vec4(a1,a1,a1,1.0);

  11. Ported to Processing:

  12. What about an R version?

    frame <- function(N,Scale,Sym,FS,time) {
    Upx=FS; Upy=0;
    for (i in 1:Sym) {


    for (i in 0:49) {

  13. I found some code on the HaskellWiki for writing PNGs. I used it here:

    To use my code you create a BMP, write to it (it's just a mutable array under the hood), and then write that to PNG when you're done. No need for 3rd party libraries that are hard to install as it's just pure Haskell.

    The code is BSD3 so feel free to use it if you like it.

  14. Nice !! Same logic can be applied for CG water reflection using multiple level of normal maps moving in different direction and velocities.

  15. Interactive, color mapped version implemented in Processing.

  16. Great work. Can's say that I care for the Haskell though. Here's some Matlab code to recreate the image at the end of your post (which, by the way, I think is rotated by 90 degrees):

    N=800; scale=1/2.5; angles=7; t=0;
    for i=2:angles
    set(gcf,'Units','pixels','Position',[0 0 N N]);
    set(gca,'Position',[0 0 1 1]);

    The 800x800 image takes 0.2 sec. on my old 2.4 GHz Intel Core 2 Duo MacBook Pro. The R version from @fermin above was helpful. However, it used repeated multiplication of rotation matrices by each other in order to get the sequence of rotated waves, which can lead to numeric issues. Here's a more general Matlab function that outputs an arbitrarily-sized movie (takes under 3 sec. for a 512x512 25-frame movie like the animated GIF above):

    function quasicrystal(N,scale,angles,frames)


    if ~isvector(N) || isempty(N) || ~isnumeric(N) || length(N) > 2
    error('First input must be one or two element numeric vector.');
    if N(1) < 1 || mod(N(1),1) || (length(N) > 2 && (N(2) < 1 || mod(N(2),1)))
    error('First input must be vector >= 1.');

    if ~isscalar(scale) || isempty(scale) || ~isnumeric(scale) || scale <0
    error('Second input must be positive scalar numeric value.');

    if ~isscalar(angles) || isempty(angles) || ~isnumeric(angles)
    error('Third input must be scalar numeric value.');
    if angles < 1 || mod(angles,1)
    error('Third input must be integer >= 1.');

    if nargin == 3
    if ~isscalar(frames) || isempty(frames) || ~isnumeric(frames)
    error('Fourth input must be scalar numeric value.');
    if frames < 1 || mod(frames,1)
    error('Fourth input must be integer >= 1.');

    if length(N) == 2 && N(1) ~= N(2)


    for t=2*pi/frames*(0:frames-1)
    for i=2:angles

  17. Here's an updated and improved version of my Matlab code that can output movies, animated GIFs, or PNGs in Cartesian or log-polar coordinates (inspired by Michael Rule) with the ability to adjust contrast and apply a colormap:

    There are also some example animated GIFs and AVIs. The code will be particularly useful to anyone working in R or numPy/sciPy.

    Also @madan's comment above about water reflection made me think of when I tried outputting in just polar coordinates, as opposed to log-polar. When the scale is 1, the resulting animation is a very pleasing circular ripple pattern. It's especially nice if you have a full color colormap.

    Cheers, -- Andy

  18. Joining in the choir of reimplementations, here it is in GLSL (WebGL):

    It lets you muck about with the code interactively, so that's neat :)

  19. Hi, you make mind blowing ideas and a spectacular article hereanimated video production

  20. Is there a java equivalent for this code? :(