Having Conversations With Javascript

Have you ever wanted wanted to animate inanimate objects? I think we all have. Well, that’s a lot of work. A cheat that you can employ, however, is relatively easy with javascript and or jquery. No, I’m not talking about jquery’s animate function, which moves an image across the screen a certain distance on an event. To be sure, that could be used additionally. Btw, that’s one of the ways that I played with to animate Chuckman flying (similar to what you see at the top of this blog).

Maybe I should define what I mean by animation? In this instance, I am talking about the illusion of a conversation taking place between two snails. To better understand, click here. The default conversation that displays at that link can be changed. Click here to see a different conversation, or click here for yet another.

If you examine the links, you should observe a pattern. First, you need the base url. In this case that’s lektrikpuke.com/additional-pages/snailsInTheRain.php. That needs to be followed by ?converse=. Then enter a command separated by a ^ from the parameter to be passed in. That’s pretty much it. Note: This script as yet is not bullet proof, meaning you can make it fail miserably. As this was just a fun project for me I may continue working on it, but no promises.

Commands that are currently present:

  • dImg – short for display image
  • dTxt – short for display text

Images available:

  • im1 – short for image one, which is the bubble that appears to issue forth from the left snail
  • im2 – short for image two, which is the bubble that appears to issue forth from the right snail
  • im3 – short for image three (the background image, calling this is a fun way to show the fragility of the script)

Format for use is command^parameter^command^parameter, etc., so dImg^im1^dTxt^Say something

In the above example we call the function dImg and pass it im1 (dImg(im1)) which overlays the bubble on the base image. We then call dTxt and pass it ‘Say something’ which prints ‘Say something’ over the bubble. Note: Don’t worry about the %20’s if you’re looking at the link. Percent 20 (and the likes) is just a web browser’s way of keeping spaces out of a url (link). Your link will work with spaces, and if you copy and paste it somewhere, you may find that %20’s mysteriously showed up on their own.

The script is commented, so if you want to see the inner workings, just look at the page source.

Things on my to do list include:

  • add a dynamically generated form for image/text addition
  • add character limit to conversation blurbs
  • add parsing and overriding of timing
  • add start/stop
  • maybe add navigation/image jumping

Have fun talking to yourself, I mean making the snails talk. =)

Note: It should be obvious that different functions could be written in the same way, allowing for instance, sound files to be played in conjunction with the images. Very interesting!

This entry was posted in jQuery and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter Captcha Here : *

Reload Image