|
|
|
|
|
|
|
|
|
ARRAY ENTRIES PATTERN RECOMBINATIONS TO PRODUCE STRING TICKERS AND MORE
|
|
Managing Arrays, and allowing thus to manipulate Strings too for these functions, upon finding an incoming String, will apply the javascript method split to it, you can find here routines that will extract patterns from the array.
These patterns will then be rearranged in a few ways that the functions will return and that may be used to produce progressive text effects - though not exclusively text oriented effects.
|
|
May 2005 |
|
{ @ }
|
|
|
|
THE ZIP PATH SCRIPT
|
|
Overview
|
A David La Chapelle painting
|
«A trifle consoles us because a trifle upsets us (... ... ...)
Anyone who wants to know the full extent of man's vanity has only to consider the causes and effects of love. The cause is je ne sais quoi (Corneille)[I don't know why - my note]. And its effects are terrifying. This indefinable something, so trifling that we cannot recognize it, upsets the whole earth, princes, armies, the entire world.»
[Blaise Pascal] |
The purpose of the zipPath function is to rearrange an array entries so that the first half and the second half of the array are handled as independent halves (split in the middle by the javascript method Math.floor) and can be reversed upon request.
What is returned then is not the array with the reversed halves though, but an array whose each entry is an array of two entries.
Of these latter, the first (index zero) is the first entry of the array and the second one (index 1) is the last one for the first two entries array, then for the second two entries array the first (index zero) is the second entry of the array and the second one (index 1) is the one before last one for the first two entries array: the test form will allow you to see all the possible combinations and will help you to understand this better.
This apparently strange returned structure (an array whose each entry is an array of two entries) is useful in case you want to produce what I'd call a zip scanning of the input array by both edges, in whatever order they may have been reversed. This allows, for instance, to produce converging or diverging simultaneous extractions of the entries.
Text effects may be achieved via this.
I am not inclined to produce scripts for mere textual effects, but here textual effects just appear as being an handy usage: none the less, it is still possible that you may want to rearrange an array that way with other purposes in mind, and have the returned "zipped map" as a practical way to have it already extracted in an order you may need to produce double edged scannings.
By the way, other scripts here that deal with text effects are:
The arguments of the zipPath script are arranged as follows:
- array: an array. If a string, the function will split it by itself char by char.
If you want a string to be split not by char but after other separators, you'll have to pass it as already split, example:
"hi. I said hi. Hi". split("");
which splits by a dot.
- noReverse1st: by default, the first half of the array is reversed. If you do not want it to be reversed, pass this as number 1.
- reverse2nd: by default, the second half of the array is not reversed. If you want it to be reversed, pass this as number 1.
Here is your zipPath function codex:
 A Jean Michel Basquiat painting |
lines (with comments and blank lines):
 A Henri Matisse painting |
In order to use then the returned array, you'd have to use a custom function of your own conception for your own tickers that recursively scans the returned array and prints its values in the way you find convenient: these functions return arrays, it is the most flexible output for then you can decide at a second stage how to manipulate them.
For instance, for the trivial example below (a "double zip ticker" that gradually prints leftward and rightward simultaneously, starting from the middle because zipPath returns the input array as two halves) the following custom snippet script has been applied:
You can produce your own tests now, though the function default behaviour, as far as text effects are concerned, seems the most sensible one and the most likely to be actually implemented:
An alternative snippet of code is called the splitReverse.
It takes as arguments:
- An input array.
- A second argument called exceedIfOdd: if passed as 1, it will split the input array (for the purposes soon to be seen) via Math.ceil(), otherwise will use as default Math.floor().
The function will return a linear array from the input one, but this time with the two halves both reversed, so for instance if the input array is:
[0,1,2,3,4,5,6,7,8]
It will return as an array the following:
[3,2,1,0,8,7,6,5,4]
It's a simple snippet after all and so I deem it need not much further discussion. Here is its code:
THE BOUNCING SLICE SCRIPT
|
|
Overview
|
This function will allow you to perform effects such as a section of a text string being highlighted and appear as moving forward or backward or bouncing.
As for the previous codes, this function will return a path, namely an array with all the coordinates to perform the effect. You will later on need a custom snippet in order to make actual use of the generated path.
Its arguments are as follows:
- array: an input array. If a string,it will be automatically split char by char. If you need a different type of split, you'd have to pass the string as already split accordingly to your exigencies.
- sliceLength: the amount of chars that must be highlighted at each iteration, for instance within a string like "Hallo World" you may want the slice be of one char only,or of a set of say 3 consecutive chars.
If this parameter exceeds by mistake the length of the array (or string), the actually input array will be considered as the slice, thus yielding no apparent effect.
A slice equal to zero would be set to 1 char automatically. A slice length inferior to zero would be treated as the same number as positive.
- progression: you'd need to pass this argument,otherwise its default is the slice length itself. Arguably you may want to pass it as number 1, that is: proceed moving the slice on one char after one char.
If you pass it as an higher number, it will move the slice jumping on by the passed amount of chars.
- rejoinLast: if the trailing elements of the array would be inferior to accommodate the progression, you may choose to append them to the last valid produced entry. To do so just pass this argument as whatever, even zero.
If you don't choose to pass it at all (default), a text ticker may simply appear a bit slower at the end.
Feel free to test it in the next test form.
The function returns an array whose each entry is an array of three entries only.
These will be as follows:
- [0] the text before the current slice position (none at the beginning for the slice has still to start moving on), as an array (of chars if the input was text).
- [1]: the slice of the currently involved entries of the input array, as an array (of chars if the input was text).
- [2] the text after the current slice position (none at the end for the slice has finished moving on), as an array (of chars if the input was text).
An example of invocation:
var foo=
bouncingSlice(
"hallo world I said hallo to all the world", 20, 1, 1
);
Now foo stores an array like the one just described.
Here is your codex:
 A Paul Signac painting |
lines (with comments and blank lines):
 A Tom Wesselmann painting |
The custom code snippet that I used to produce the example in the test form, inclusive of all namely html of the layer, applied css style sheets, and the actual javascripts, looks like this and if you know a little bit of scripting, it won't be exceedingly difficult either to grasp or to lend to other usages. Only thing it uses innerHTML that for reason explained elsewhere the W3C deprecated, very sadly.
Finally, here is your test form, as simple as it may appear (note: on Netscape it may appear slightly blinking, due to the slower rendering engine of that browser if compared to Internet Explorer. On Opera, at least from version 7.51 which is the one I currently have, it works just as smoothly as it does on Explorer):
A David La Chapelle manifesto
|
Hallo World I said Hallo to the whole of the World, did you hear me?!
 A Timothy Tyler painting |
|
|