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;

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’.

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.


7 Responses to “ASCII/String Fun With JavaScript”

  1. July 22, 2008 at 9:32 pm

    goddd I *hate* director with a passion! perhaps that’s cos I left my Director coursework to the last minute and spend 48hrs staring at it… :/

  2. July 22, 2008 at 9:35 pm

    Actually that looks very useful. Never much used Text in VDMX before (is there even a Text function?)

    Only one teeeeny problem I can see is if your strings are different lengths. Just using the ASCII wipe it went a bit funny. as soon as the second string (shorter) was revealed, it jumped to center itself…

    Just thought you’d like to know!

  3. 3 toneburst
    July 23, 2008 at 8:22 am

    Hi Rob,

    cheers for the feedback. I’ve actually uploaded a few different revisions of the QTZ. Sounds like you’ve got one of the earlier ones. The latest one should fix the bug you noticed. Like most text effects, you need to use a monospaced font for it to really work, which I wasn’t doing in some of the earlier versions. I’ve also set the alignment to left now, so the text shouldn’t jump around.



  4. 4 toneburst
    July 23, 2008 at 8:26 am

    Re. Director:

    I didn’t think anyone used it nowadays. Macromedia pretty-much stopped developing it years ago, and I suspect Adobe have ditched it entirely. Which is a shame, in some ways: Lingo is still quite powerful, and there are still some things you can do in Director that Flash can’t handle. It still has a special place in my heart as my introduction to programming, though, and I learnt a lot from my hours spent working on annoying interfaces.


  5. August 3, 2008 at 3:47 pm

    I’m doing some processing right now, which is my great introduction to programming. The back of the book has a great little crib sheet for converting what you’ve learnt in Processing to Java, Lingo and Actionscript. very handy!

  6. January 11, 2009 at 4:15 am

    This is one of the cooler ideas I have come across and I wish I had taken note of it sooner.

    • 7 toneburst
      January 12, 2009 at 9:40 am

      If you’re up for a JavaScript challenge, why not try extending this into 3 dimensions? I’ve thought about making a 3D grid of characters, that way, you could have words and phrases moving around in 3 dimensions…

      I guess you’d have a string output for each layer on the z-plane…

      Lots of possibilities, but sadly not something I’ll get time to work on myself for the moment…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


July 2008
« Jun   Aug »


Blog Stats

  • 482,130 hits

%d bloggers like this: