Archive for July 22nd, 2008

22
Jul
08

ASCII/String Fun With JavaScript

Prompted by a request to investigate animated text effects for VDMX, I decided to dust off a few little techniques from my mispent early 20s as a Director/Lingo enthusiast. Notice the word ‘enthusiast’; I never got particularly good at it, though I narrowly-missed getting a job as a fulltime Lingo coder, back when CDRom was still a novel idea.

I digress though: what we have here is a collection of basic string and ASCII effects, wrapped up in a simple demo QTZ. I’m not going to say too much about about how they work, because the code in each JavaScript module is pretty well-commented. It’s pretty simple stuff really, but might look nice combined with some animation.

Here’s some sample code. This is for a simple scroller, that moves the text along to the left, wrapping characters back to the end of the string when they fall ‘off the beginning’ (as it were).

/*
Shifts string left according to Offset value and
wraps characters.
With thanks to Memo
*/

function (__string outputString) main (__string inputString, __number Offset)
{
	// Initialise vars
	var result = new Object();
	var outString = "";

	if(!_testMode) {
		// Get length of input string
		var chars = inputString.length;
		// Get step size so that Offset values from 0 > 1 cycle through
		// all characters in string once
		var step = Offset * chars;
		step = (step == chars) ? 0 : step;

		// Loop through string
		for (i = 0; i < chars; i++) {
			// Variable for index to read from inputString
			var charIndex = i + step;
			// Wrap string index
			charIndex = (charIndex > chars) ? charIndex - chars : charIndex;
			// Accumulate outString by reading from inputString at charIndex
			outString += inputString.charAt(charIndex);
		}
	}

	// Set output string
	result.outputString = outString;
	// Output
	return result;
}

Note:
Only the FX in the second half of the list use both input strings.
The Mix Range control only works for the String Randomise Range and 2-String Wipe Range effects.

QTZ tb JS-ASCII Demo 1.0.3 ‘in the widget’.

EDIT:
New version uploaded. There are lots more things that could be done with this basic technique, but I’m going to leave it for the moment, so I can concentrate on other things. This final (for now) version (1.0.3) fixes a bug with the previous upload, and adds structure output ports to all the JS patches, which could be piped into an Iterator, if you wanted to individually animate the characters.