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.


5 Responses to “ASCII/String Fun With JavaScript”


  1. 1 Rob McDougall 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. 2 Rob McDougall 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.

    Cheers,

    a|x

  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.

    a|x

  5. 5 Rob McDougall 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!

Leave a Reply




 

July 2008
M T W T F S S
« Jun   Aug »
 123456
78910111213
14151617181920
21222324252627
28293031  

Categories

Links

Blog Stats

  • 28,387 hits