Adventures in Animation
Skip to end of metadata
Go to start of metadata

Well, this week was tons of fun!  We had to make an animation using the Zelle graphics module, which presented lots of fun challenges.  

First, I had to think about a scene I wanted to create.  I had a friend who, in fourth grade, not only had his own web page, but made animations for it.  I was extremely jealous of his skills.  So, I decided to make my own version of one of those animations.  

Before I started, I took a page out of Stephanie's book, and created a file called basic shapes, which let me create function will all the controls for the shape objects.  The hard part was making a function for the polygon, since there could be infinite points, but with the help of Stephanie and the documentation, I eventually figured out that the Polygon function would take a list of points, and then wrote the function below to take advantage of that.  
As you can see, the function talks a list of touples representing the x and y, and then turns it into a list of Point objects, which it feeds into the Polygon object.

I then took my basic shapes and created the aggregate shapes in my scene.  My scene had four elements: the sky, the clouds, the ocean, and the ship.  The sky was very simple, just a light blue square.  The clouds were made of 20 white circles randomly placed within a certain range.  The ocean consisted of a large blue rectangle, and then overlapping blue circles to create the waves.  The boat was the most complex of these objects, consisting of two polygons (the hull and red flag) and seven rectangles (the two masts, four sails, and blue flag).  All the functions that initiate these objects have position and scale peramiter, except for the sky, because the sky is always in the same place, taking up the entire screen.  

Now, I had to make my objects move!  Using the handy dandy move function we had to write in lab, First wrote a function that moved the ship across the screen.  I have the function stop the ship's movement when it reaches the center of the screen.  Then, because the ship is lazy, everything else on the screen except the ship moves at the same rate that the ship was moving, perpetuating the illusion of motion.  The function that moves the clouds and the sea is different from the functions that move the ship in that instead the loop that moves the object multiple times being inside the function, the loops are outside.  This is because then I can loop through both the cloud and the sea movement functions, causing both to move at the same time.  The animation for the ocean only moved the circles that made the waves, and if one went off the screen at one end, it would be transported to the other end to begin the process again.  The next animation was a function that turned a happy white cloud into an angry storm cloud.
Operating under the assumption that the cloud started off white, the function then loops though the circles in the cloud and changes a color that is darker with ever loop.  After the cloud has reached the darkest level, a polygon in the shape of a lightning bolt flashes by being draw, being undrawn, and being drawn again.  The x and y peramiters in the function define where the lighting should be, the scale for what the scale is, and the list input is which cloud you want to darken.  The last animation function sinks the ship, and is pretty much the same in structure as the one that moves the ship, except that it moves in the y direction.  

I then compiled all the function into one function to control the entire animation, as seen below.  I also included a link to the animation where I put it up on a different website; it seems to run smoother there sometimes, if you want to see it.

For my extension, I created a series of smaller animations I tittles "illusions" as the plan was they were all supposed to create some sort of illusion, or just be interesting in their composition in general.  At the end of each scene a red dot appears in the upper left corner, signaling for you to click to continue to the next scene once you have recovered from how amazing the previous scene was.  Not, there was not sarcasm in that last sentence.  Also, except for the teleport scene, you can click to end the animation early and move onto the next if you find yourself dyeing of boredom.

The first scene consists of a rope burning.  Originally I meant to have my boat in the first animation catch on fire, but I had to scrap that idea.  I then used the leftover fire function to burn a rope.  It's based off the circle function we made in class, in that the flames move and clone randomly.  The flames move between 0 and 10 pixles each frame, so I have the rope turn to ash at a rate of 5 px per frame, as that is the average of the movement of the flames.
My next scene drew inspiration from the clouds of the previous scene, and how the move function made them appear to billow because only one circle moved at a time.  I took that a step farther, and had each individual circle move in it's own semi-random direction.  The resulting scene models cloud movement quite well.

In the next scene, a square appears to magically teleport across the screen.  The trick here is that there are actually two squares the entire time, but you cannot see one of them at certain points because it is hidden behind a white rectangle.  

The last scene creates the illusion of rotation.  It arrears that the arms of the clock are rotating, but really, they are being rapidly drawn and undrawn, and the Points of the ends with the arrows are changing each time that the object is being drawn.  Unfortunately, this creates a flashing effect, so don't watch this one if you don't like flashing lights.  

I learned a lot this week.  To summarize, I learned about the Zelle graphics, and how it works.  I learned about how useful it is to create functions have multiple peramiters in them that control an object, so you can create an object of a certain color in just one line of code, not two.  I also learned more about how we can use lists to our advantage, and how we can create codes to read just certain items in a list.  I also learned a few interesting ways to make interesting animations that bend the rules of what we can do with Zelle.