Animations and Chipmunk Basic

PURPOSE:
This (hopefully) short web page shows how to create animations using Chipmunk Basic.

ANIMATIONS:
What is an animation? An animation is a set of still images which, when grouped together, give the illusion of change over time.

What is change? In this context, change is defined as a difference between the current picture and the next or previous picture. In animation this can refer to such things as someone walking along. Each frame is slightly different from the one before it. When all of the pictures are placed one after the other and moved through quickly, the illusion of movement in achieved. If you don't get it, then try the program out (provided below) and you will see what I mean.

METHODS:
There are many different methods to go about making animations. This example is how to create a GIF animation. You will need the following programs:

Let's look at these pieces of software.

CHIPMUNK BASIC:
This is the language we are using to create the pictures. For the sake of clarity we will call our PICT files FRAMES. As in picture frames. Think of them as the frames of a motion picture. Each frame will contain a slightly different picture and when they are all placed together inside of a file, we will have our animation. You can get the latest and greatest version of Chipmunk Basic at http://www.nicholson.com/rhn/ basic/

GRAPHIC CONVERTER:
This program is available from Standford University via the info-mac. Look under the graphics area for the latest version. This program is needed in order to convert all of the PICT files to a single GIF animation. More later on this.

GIFBUILDER:
This program is also available from Standford University via the info-mac. Again, look under the graphics area for the latest version. This program is needed in order to shrink the overall size of the GIF animation file.

WEB BROWSER:
You can use whatever web browser you want to do this. The only restriction is that it has to be able to handle GIF animations.

THE PROGRAM:
Producing the animation is very simple. You need three things: 1)A way to initialize the graphical interface, 2)A way to create the picture frames, and 3)A way to save the picture frames to the disk drive. Let's look at these parts.

INITIALIZE GRAPHICS:
This should be a subroutine which you just load into your editor each and every time you want to write an animation program. Mine looks like this:

rem
rem *****************************************************************
rem
sub initWindow( win_top, win_left, win_width, win_height )
rem rem Initialize the Windowing environment rem A program by Mark Manning rem This program is Freeware and may be used rem as much as you want. Just give me credit rem someplace for having helped you. :-) rem graphics 0 graphics window win_top, win_left, win_width, win_height rem rem I prefer to initialize the window to a certain color rem (black in this case). rem graphics color 0, 0, 0 graphics fillrect 0, 0, win_top+win_height, win_left+win_width, 1 rem rem I always set up my text font here too since I usually only use rem one font per program. rem graphics textsetup macfunction("GetFNum","times"),24,1 end sub rem rem ***************************************************************** rem

The above initializes the graphics window, brings it up so you can see it, and then fills the entire window with black. If you prefer white, green, orange, or whatever all you have to do is to change the line with the COLOR command in it. Experiment if you don't know what to put there. It's one of the things you have to do in order to learn anyway so you might as well start now. :-)

SAVING FRAMES:
We are now going to jump to the other end of the program - saving frames. We are doing this mainly because it is another subroutine and is fairly simple to do. Here is the routine:

rem
rem *****************************************************************
rem
sub saveFrame( frameNumber )
rem
rem	Save a frame of the animation
rem	A program by Mark Manning
rem	This program is Freeware and may be used
rem	as much as you want.  Just give me credit
rem	someplace for having helped you.  :-)
rem
	a$ = "put:your:directory:path:here:frame_"
	n$ = str$(frameNumber )
rem
rem	While the number is smaller than 1000 or above, place extra zeros
rem	in front of the string so Graphic Converter will see them in the
rem	proper order.  (IE: 0001, 0002, 0003, etc....)
rem
	while( len(n$) < 4 )
		n$ = "0" + n$
		wend
rem
rem	Now put the to together so we have a file name.
rem
	f$ = a$+n$
rem
rem	Now save the frame of animation.
rem
	call "savepicture",a$
	end sub
rem
rem *****************************************************************
rem

What this subroutine does is to put the directory path into the a$ variable and the number into the n$ variable. Then it checks to see if the string in the n$ variable is long enough so that all of the numbers will fit within the space provided. If the number is smaller than 1000, then extra zeros are placed onto the front of the string so it is long enough. This ensures that Graphic Converter correctly sees and places the frames into the GIF animation.

THE PROGRAM:
Ok, we are now ready to do an animation. Here is the main program from the Model Library Database (MLDB) program. All it does is to produce an effect like a spotlight which moves over the letters.

rem
rem *****************************************************************
rem
rem	A program by Mark Manning
rem	This program is Freeware and may be used
rem	as much as you want.  Just give me credit
rem	someplace for having helped you.  :-)
rem
	win_top = 100
	win_left = 100
	win_width = 600
	win_height = 100
	win_right = win_left + win_width
	win_bottom = win_top + win_height
	initWindow( win_top, win_left, win_width, win_height )

	theFrame = 0
	string1$ = "          The  Model  Library           "
	string2$ = "           Database  Program            "

	for i = 1 to len(string1$)
		graphics color 0,0,0
		graphics fillrect 0,0,win_right, win_bottom,1
		graphics moveto 5,30
	
		theFlag = 0
		for j = 1 to len(string1$)
			curclr = 100-abs(i-j)*10
			if curclr < 0 then curclr = 0
			graphics color curclr,0,0
			if mid$(string1$,j,1) <> " " then
				theFlag = 1
				endif
		
			if mid$(string1$,j,1) <> " " or theFlag > 0 then
				graphics drawtext mid$(string1$,j,1)
				endif
		
			next j

		theFlag = 0
		graphics moveto 5,60
		for j = 1 to len(string2$)
			curclr = 100-abs(i-j)*10
			if curclr < 0 then curclr = 0
			graphics color curclr,0,0
			if mid$(string2$,j,1) <> " " then
				theFlag = 1
				endif
		
			if mid$(string2$,j,1) <> " " or theFlag > 0 then
				graphics drawtext mid$(string2$,j,1)
				endif

			next j

		theFrame = theFrame + 1
		saveFrame( theFrame )
		next i

	end
rem
rem *****************************************************************
rem

The above program should generate somewhere around thirty or so frames. The program is fairly straight forwards. It brings up a graphics window and begins to print text across it. As it prints the text though, it changes the color from black to red and back to black. Each time it does this, it changes the position of where the bright red and black areas are. This makes it look like there is a flashlight or spotlight moving across the characters. The program should run without any problems - but if you DO have problems, then follow the error messages. Chipmunk Basic has some very good error messages and you shouldn't have any problems debugging any problems which have been introduced in the code. If you still have problems - I suggest getting a book on Basic. But I do not suggest contacting me. Mainly because I am very busy here at work and at home and really do not have the time to look over code. Especially since it is usually a "I didn't do anything to the code - it just doesn't work" which eventually turns into "Oh! I see, I shouldn't have put X in there!" Muddle through. Basic is not a hard language to use and debug. If nothing else, turn on the tracer and step through the program.

Ok, let's say everything went well. You set a$ to a proper path, the program ran fine, and you now have somewhere around thirty files in a directory which are all called "frame_####". Now what? Now you turn to Graphic Converter. You load up this program and then type Command-M (%-M). This will bring up the conversion screen. On the left hand side you pick PICT as the type of file. On the right you should have GIF selected. Move to the same directory in both windows. Click on the OPTIONS button on the right hand side. Select the appropriate check boxes on this new screen (ie: Create Movie, GIF type of 89a, etc...). Whatever you do - do NOT select transparency or optimize. The program doesn't give you any way to properly set these so you don't want to work with them right now.

Now select the list of PICT files (the frame_0001 thru frame_####). Then click on the convert button. This will make Graphic Converter convert all of the individual PICT files to a single GIF file called frame_0001.GIF. Don't ask me why it doesn't ask you for what you want to save it as - it just does this. Once done - get out of this program.

Now bring up GIFBuilder. Open up the new file you just created (ie: frame_0001.GIF). Go to the options menu in GIFBuilder. Select the frame optimization option. Change the frame delay to be 5/100. Set the transparency to black. Then resave the file. GIFBuilder should go through and optimize the file. After it is all through, you will need to reload the file in order to see the savings in space you now have. Do so if you want and then get out of GIFBuilder.

Congratualtions! You've just made your first GIF animation. Load the file up in your web browser and watch it run! :-) So now what all do you need to do in order to make newer or more animations? Hire me! ;-) Just joking! All you have to do is to rewrite the main program (the last one presented). You change this program so that it generates whatever it is you want it to generate. Then you just go back through the steps again to make another GIF animation.

TRANSPARENCY:
It should be noted that most GIF animations use WHITE (100, 100, 100) as the default color to use to do the transparency stuff. It is sort of a standard - but you do not have to use it. Sometimes, you need white in your GIF animation. So using white would be out. In that case, see if you can use black (0, 0, 0), grey (128, 128, 128), or one of the primary colors like red( 100, 0, 0), green (0, 100, 0), or blue (0, 0, 100). It makes life easier. :-)

Have fun! You can reach me at Mark Manning. But please - I'm not a consultant. There are many news groups for basic out there as well as quite a few lists where you could get a lot of help. Use them first and me last. But if you just want to say hi or you want to tell me how great it is to now understand how to do animations - well hey! My ego could always use a bit of stroking! :-) Have fun!