Algorithm for the generation of a sequence for an animation effect

Question

Preface

I'm implementing a jQuery plugin which provides text fading effects [demo]. The effects are obtained via character replacements based on sequences of characters indexes.

For example, having this text (11 chars x 9 lines = 99 chars):

var text = 
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"

this sequence leads to a left-to-right top-to-bottom fading effect [fiddle]:

var sequence =      
  [ 0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10 ,
   11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 ,
   22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32 ,
   33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43 ,
   44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54 ,
   55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65 ,
   66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76 ,
   77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87 ,
   88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98 ]

It's easy to generate this sequence:

var textToSequence = function(text) {
  for (var s = [], i = 0; i < text.length; i++) s.push(i)
  return s
}
var sequence = textToSequence(text)

The problem

I want to add a clockwise from-out-towards-in 45° twisted spiral effect (no, it's not the name of an extreme dive type :P ). This is the correct sequence for the text above:

var sequence =
  [ 0,                  10,                 98,              88,
    11, 1,              9, 21,              87, 97,          89, 77,
    22, 12, 2,          8, 20, 32,          76, 86, 96,      90, 78, 66,
    33, 23, 13, 3,      7, 19, 31, 43,      65, 75, 85, 95,  91, 79, 67, 55,
    44, 34, 24, 14, 4,  6, 18, 30, 42, 54,  64, 74, 84, 94,  92, 80, 68, 56,
    45, 35, 25, 15, 5,  17, 29, 41, 53,     63, 73, 83, 93,  81, 69, 57,
    46, 36, 26, 16,     28, 40, 52,         62, 72, 82,      70, 58,
    47, 37, 27,         39, 51,             61, 71,          59,
    48,                 38,                 50,              60,
    49 ]

You can see the generated animation here [fiddle].

Now: I can't figure out any algorithm for generating the sequence above. Any suggestions?

Bonus points (and a lot of respect!) if you can suggest algorithms for its variations:

clockwise from-in-towards-out
counter-clockwise from-out-towards-in
counter-clockwise from-in-towards-out

Your js fiddles were not working because it refused to execute your external files, but I fixed it with http://rawgit.com/: use https://rawgit.com/mdesantis/jquery.textfade/master/lib/jquery.textfade.js for your external source. — arthur.sw, May 22 '14 at 15:07
I'm unsure why the last index (99) is not included? Can you explain? — Bergi, May 22 '14 at 15:23
The last index actually _is_ 98: if you run `text.length` you will obtain 99, not 100. The text I wrote is a bit misleading: it is 9 lines x 11 chars = 99, not 10 lines x 10 chars = 100, as you might think at first sight — mdesantis, May 22 '14 at 15:27
Ooops, I mistook it for a 10x10 square. The included linebreaks complicate this… — Bergi, May 22 '14 at 15:30
OK, though I think that the `98` (and the other indices for the 11. column) should not appear at all then? Why would you fade-in the linebreaks? See my solution below, it just jumps over them (and correctly starts with the 4 corners) — Bergi, May 22 '14 at 17:26
This should be very similar to [this question](http://stackoverflow.com/questions/398299/looping-in-a-spiral/18663455#18663455) here. Do check out the algorithms there. — Arun R, May 22 '14 at 18:02

arthur.sw · Answer 1 · 2014-05-23T09:08:02.940

Here is what you want.

I fill a diamond, with four corners.

Each for loop draws a 45° line of n items, n being the number of turn we made.

To make things simple, I made a convert function which converts the (x, y) position of the current item into an index.

I only add indices if there were not previously added (to handle the last cases when the corners overlap).

I guess you can easily get your bonus points now.

// add item if not present in the array
function pushIfNotPresent(array, item)
{
    if (array.indexOf(item)==-1)
        array.push(item);
}

// convert x y position to index
function convert(x, y, width)
{
    return y*width+x;
}


$(document).ready(function() {
    var text = 
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"

    var sequence2 = [];

    var width = 10;
    var height = 9;

    var n=0;

    while(sequence2.length<text.length)
    {
        // top left corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            console.log(i);
            pushIfNotPresent(sequence2, convert(i, n-i, width+1)); 
        }
        // top right corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(width-1-n+i, i, width+1)); 
        }
        // bottom right corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(width-1-i, height-1-n+i, width+1)); 
        }
        // bottom left corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(n-i, height-1-i, width+1)); 
        }

        n++;
    }

    // real spiral
    width = 10;
    var sequence3 = [];
    var angle = 0.0;
    var center = (width-1)/2.0;
    var radius = (width+3)/2.0;
    var i=0;
    while(sequence3.length<text.length && i<10000)
    {
        angle += 2.0*3.1416*1.0/360;
        radius -= 0.001;
        pushIfNotPresent(sequence3, convert(center+radius*Math.cos(angle), center+radius*Math.sin(angle), width+1)); 
        i++;
    }

    $('#test01i').textFadeIn( { 'text': text, 'milliseconds': 50, 'sequence': sequence2 })
    $('#test01o').textFadeOut({ 'text': text, 'milliseconds': 50, 'sequence': sequence2 })
})

Note that I added a real spiral effect using cos and sin functions in only one for loop (try sequence 3)...

Sorry, I forgot to update my jsFiddle link. Now I updated both the link and the code on stackoverflow. — arthur.sw, May 23 '14 at 09:10

Bergi · Answer 2 · 2014-05-27T10:57:35.927

This is a little crazy approach, but works well:

function makeSequence(width, height, linebreak, startinside, clockwise) {
    function square(n) {
        if (n==0) return [];
        if (n==1) return [[0,0]];
        var x, y, seq = [];
        // one round along the edges
        for (x=0, y=0; y<n ; y++) seq.push([x, y]);
        for (x++, y--; x<n ; x++) seq.push([x, y]);
        for (x--, y--; y>=0; y--) seq.push([x, y]);
        for (x--, y++; x>=1; x--) seq.push([x, y]);
        var inside = square(n-2).map(function(p) { p[0]++; p[1]++; return p; })
        return startinside
          ? clockwise
            ? inside.concat(seq.reverse())
            : inside.concat(seq)
          : clockwise
            ? seq.reverse().concat(inside)
            : seq.concat(inside);
    }
    var tl = (height-1)/2;
    return square(width+height).map(function(p) { // rotate it
        var x=p[0], y=p[1];
        return [x/2+y/2-tl, y/2-x/2+tl];
    }).filter(function(p) { // whole numbers
        return p[0] % 1 == 0 && p[1] % 1 == 0;
    }).filter(function(p) { // inside the rectangle
        return p[0]>=0 && p[0]<width && p[1]>=0 && p[1]<height;
    }).map(function(p) { // as sequence numbers instead of coordinates
        return (width+linebreak)*p[1]+p[0];
    });
}

(updated demo - if you compare the sequences, you even can see some small bugs in yours regarding the linebreaks)

Algorithm for the generation of a sequence for an animation effect

Preface

The problem

2 Answers2