Date: Thu, 30 Nov 2000 10:59:26 -0800 (PST) From: Hannah C. Tang To: cse142-section-bf@cs.washington.edu Subject: [Section BF] What is animation? Feel free to delete this email if you've got a good grasp already of how to implement animation for HW 5b. But make sure you check out the cute forward at the bottom of message before you delete this! =) ------ Have you ever picked up one of those small "flip books" before? Each successive page of the flip book has the same image as the previous page, except slightly changed. By flipping through the pages quickly, you get the illusion that the image is continuously changing and the illusion of motion. This is animation. By taking many similar images, each differing from the previous one *slightly* and showing them in rapid succession, animation creates the illusion of motion. To create an animation, you need two things. First, you need the multiple images (each differing from the previous image slightly). Second, you need some kind of periodic timer which indicates when the next image should be displayed. In a flip book, each image is a page, and the timer event is when your thumb flips past a page and moves on to the next. Moving on to GP142: to implement animation of an object, you will need the same two things. The periodic timer is provided by the GP142_await_event() function. (See Technical Note 1 at bottom of this message). After a certain length of time has elapsed (approximately a tenth of a second), GP142_await_event() will return the #define'd constant GP142_PERIODIC. This is your cue to "flip the page." That is, after each periodic event, you should update/change the current image slightly. Here's where the first component of animation comes in -- the images. After each periodic event, you'll want to >clear away the previous image< and redraw everything. Don't forget to clear the previous image! What you will end up with is a series of images, each slightly different from the one before, and shown in rapid succession. This is what I defined as animation above. To use a concrete example, if you wanted to animate the falling of a ball, after each periodic event, you would decrease the y position of that ball. Each time the ball was drawn on the screen, then, it would have a slightly lower position. Since the position is decremented and the ball redrawn every tenth of a second, you are given the illusion of a falling ball. I hope this clarifies things. There will be an brief program handed out in section today illustrating the use of GP142_PERIODIC in creating animation effects. (It will be posted on the section webpage by this evening as well). Please bring any remaining questions you have regarding animations to section today. Lastly, I included at the bottom of this email a forward I recieved, illustrating the concept of animation in ASCII art. For those of you reading your email via dante and pine, it should work properly. It probably will not work as well in other mailreaders (ie -- MS Outlook). Hannah Technical Note 1: GP142_await_event() actually does several things. It "listens" for user input/events in the form of mouse clicks or keyboard presses. If either of these two events happen, then it will return (ie -- return control to its caller, your main event loop [See Technical Note 2]). Additionally, it will return information about the type of event which occured (mouse, or key press) and more specific information about the event (the mouse's x/y coordinates, or which char was pressed). However, if no event has happened within a certain period of time (approximately a tenth of a second), then GP142_await_event will signal a second type of event, the periodic event. Technical Note 2: GP142_await_event actually returns on a key/mouse *release*. This is why your program appears to freeze when you hold down a key -- GP142_await_event() hasn't returned control to you. ------ Start scrolling down with the arrow key, and AS SOON AS it says "** Start Hitting Spacebar Now **", start hitting the spacebar slowly o ___ /|\ /___\_______ __/_\___/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ** Start Hitting Spacebar Now ** o ___ /|\ /___\_______ ___/_\__/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___ |=/___\_______ ______/>/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o |=___ /|/___\_______ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o /|\ //_\\_______ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o _/|\ /_/_\_______ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___/|\ /___/_\_____ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___ /|\ /___\/_\____ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___ /|\ /___\_/_\___ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___ /|\ /___\__/_\__ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___ /|\ /___\____/_\ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___ |= /___\______| ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ___ o /___\__ |= ________/____|_ ---_> | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o ___ |= /___\______> ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o /= ___ _> /___\___--- ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - o /= / ___ /___\_______ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - __o / \ ___ /___\_____ ________/____|_ -- | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ____o ___ \ /___\_______ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - __ ___ \o /___\_______ \ ________/____|_ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ___ \ /___\_______ \o ________/____|_ \ | | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ___ /___\_______ \ ________/____|_ \ | |o | |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ___ /___\_______ ________/____|_ \| | | | |o |~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ___ /___\_______ ________/____|_ | \| | ' |..' |~~~~~~~~~~~~~~~~~~~/o'~~~~~~ - ___ /___\_______ ________/____|_ . . | . '. ' | '.\/..'. |~~~~~~~~~~~~~~~~~~~~/,~~~~~~ /o - ___ /___\_______ ________/____|_ | . . | ..'.'. |~~~~~~~~~~~~~~~~~~~~;,;~~~~~ _o__/' - ___ /___\_______ ________/____|_ | | . . |~~~~~~~~~~~~~~~~~~~~~;~~~~~~ o__// '' - // ___ /___\_______ ________/____|_ | | |~~~~~~~~~~~~~~o~~~~~~~~~~~~~ |\__ - \ ___ /___\_______ ________/____|_ | | o |~~~~~~~~~~~~~/|\~~~~~~~~~~~~ / \ - ___ /___\_______ ________/____|_ | | o/ |~~~~~~~~~~~~~/|~~~~~~~~~~~~~ / \ - ___ /___\_______ ________/____|_ | , Bye! | o/ |~~~~~~~~~~~~~/|~~~~~~~~~~~~~ / \ - * you can use the ( - ) button to do it in reverse *