Poster presented at BCSWomen Lovelace Colloquium, 2018.
Abstract
It all began with drawings on walls. You don't have to be a cartoonist to have animation be a big part of your life. Art is everywhere - in our homes, education, work places and basically, everywhere there's a screen. It has come a long way since its birth and it is definitely going a long way from here. Animation is the process of making the illusion of motion using a fast display of images. "Creating animation is all about giving your imagination a picture on the screen."
From the Magic Lantern, which used moving parts of sheets, to hand drawn animations, which made up most of our childhood, to CGI, where animation has progressed, there is no stopping the growth of animation. Also, there's the transition from 2D animation to 3D animation that took place over the years.
What is Animation?
“To animate means to give life to.” It is an animator’s job to take an image and quite literally bring it to life by giving it character and movement. In a world where color, shape and movement define personality, the realms that could be created seemed infinite.
Mickey animated through the years
“Cartoon animation offers a medium of storytelling and visual entertainment which can bring pleasure and information to people of all ages everywhere in the world.” Walt Disney.
For many years, the growth of technology has encouraged the development in animation. From the phenakistoscope to the invention of current computer graphic animation, technology has allowed the animation industry to evolve and change the mannerisms of traditional animation.
Long before the invention of computers and graphic processing hardware, animators used hand drawings to create their animated characters. More recently, technology has facilitated a growth in this field, and with the combination of traditional techniques, the only limit to what one can achieve is the animator’s mind.
Early Animation
“Fantasy, if it’s really convincing, can’t become dated, for the simple reason that it represents a flight into a dimension that lies beyond the reach of time.” Walt Disney.
Animations bring an entire world of fantasy to your screen that no traditional film can compare to. The history of animation is simply rich and exquisite, from its simple beginnings to the digital revolution, from small, independent shorts to Disney-Pixar blockbusters. Let’s take a short trip back in time and look at the beginning that created a pathway for the entertainment we have today.
An early animator's desk
French artist Emile Cohl, often referred to “the father of animated cartoon”, created Fantasmagorie, which was the first ever animation. The hand drawn film presents a stick figure moving into morphing objects. Cohl drew each frame on a piece of paper and continued in sequence until he had 700 drawings.
This uses an idea called stop motion. Stop motion is an animation technique where an animator physically manipulates the movement of a character in an image or an object, little by little, so when photographed and put together, appears that the object or character moves on its own.
One area that uses this is Claymation, which uses dolls and are photographed with small increments in movement. An animation that uses Claymation is The Nightmare Before Christmas. Another one is flip-books, which use the idea more closely as you would see in the actual animation process. Multiple frames are hand drawn and put together to create the illusion of the character moving.
A phenakistoscope
Another breakthrough in animation history, was the phenakistoscope. Inventedin 1832, it came into use for animation only in the early 1900's. Each frame was arrayed onto a cardboard disc. Small apertures spaced evenly around the rim of the disc, the user would look though these slits and spin the device in front of the mirror. The user can then see a rapid succession of frames that appear to be moving.
The Growth of Traditional Animation
In 1924, the Fleischer brothers released a seven minute animated short that used Phonofilm to sync sound and animation footage. It was the first ever short to have a character with synced dialogue, as opposed to playing a phonogram while the cartoon runs. And this paved the way for the world to be introduced to the iconic character, Mickey Mouse, in the infamous 1928 Steamboat Willie.
Another widely used technique in the time was cel animation. Cel, short for celluloid, is a transparent sheet of paper onto which animators drew their frames on. After a storyboard was concocted, each frame was drawn onto about five to six levels of cel. After the painting and coloring of each cel, it was camera ready. This can be seen in the animation Snow White and the Seven Dwarfs.
Disney's magic multi-plane camera
Disney’s magic multi-plane camera was also part of this history. This device uses a series of glass planes with elements painted on them. A camera was placed above all the glass planes and was moved up and down by the camera carriage. Cartoons were more realistic and enjoyable, and it created a 3-dimensional viewing for the audience. You may have seen its use in many animated films like Bambi and Pinocchio.
Computer Animation
New film making techniques were making their way into the world by the 1960's and was well, making its way into the animation world as well. In 1961, Ivan Sutherland created a computer program called Sketchpad, which allowed the user to interact with the image on the screen, using a light pen.
Animating on SketchPad
Early animation computer graphics were vector graphics, where the computer sets the start and end points of the line, whereas the graphics now are raster graphics, where every pixel is accounted for.
Traditional techniques were the only means to animate before the advent of powerful computers. While some animators still practiced traditional techniques, there was a demand for time and cost saving methods.
Another milestone that computer animation saw was the development of Disney’s Computer Animated Production System, known as CAPS. This was a custom collection of software, scanners and networked stations that were developed with the purpose of computerizing the ink-and-paint and post-production processes of traditional animated films, to allow for greater efficiency. It was tested on the finale of The Little Mermaid and later used to color the entire film, The Rescuers Down Under.
Like in any industry, the use of computers have drastically changed the animation process and people feared losing their jobs because technology brought about new techniques that could be implemented. In 1988, Kroyer Films released Technological Threat, which showcases an office clerk who fears getting replaced by a robot, but in the end, fights back. This film showed that there was little need to fear.
Till today, traditional animation is used in combination with computer animation. Both have their purpose as well as their own pros and cons. And no matter how advanced technology gets, you can’t replace a person’s imagination.
Why Change?
Computer animation is essentially a digital successor to the art of stop motion. So why change anything?
Frame from Roger Rabbit
Well, computers brought a drastic change in the animation playing field, practically turning art into a science. Traditional animation lacked technicality and had large amounts of tedious repetition. Computer software, on the other hand, using math and science, made the animation process faster, easier and more efficient.
And while traditional animations tend to have lower costs attached, computer animation can warrant consistency in quality and accuracy, and also rid the tedious task of having to draw each frame from scratch. Moreover, a greater realism and much more detailed graphics can be applied because of this consistency.
3D Animation
The first major advance in 3D computer graphics was achieved in the University of Utah by Ed Catmull, the “hidden-surface” algorithm. In order to create a 3D object on screen, the computer must determine which surfaces are actually behind the object from the viewer’s perspective and on rendering, must be hidden. He used this algorithm and created a short animation of opening and closing his hand.
3D models of animated characters
Catmull went on to develop a Computer Graphics Lab at NYIT. Later, he became one of the first members of the Pixar division. If there was a company that put a human face on animation technology, that company would be Pixar Animation Studios.
While the first use of 3D imagery was in Futureworld, and one of the first feature movie to make use of 3D CGI was Disney’s Tron, the first fully computer animation feature film was Toy Story, a Disney-Pixar film. It was revolutionary not only because of the fact it was the first computer animated feature, it set up the bar for the workflow that has been adapted for new technology.
Animation Software Over The Years
The animation industry has an infinite amount of styles and demands in both, the 2D and 3D industry. If you have a deep understanding of animation principle and a love for technology, then each software will just be a different tool for achieving what you need to. Most animators will be challenged to learn whatever software their studio chooses.
A few of the software that were used in the late 1900s, in early computer animation were Autodesk Inc., Wavefront, Softimage, CelAction, etc. These were the most popular ones of the time, and given the time and effort, they were easy to use.
Computer animation software, today, is cheap or even free and available online. With software like Flipbook, Flash, Maya, Blender, etc., anyone can easily learn to animate. There are tons of online material and tutorials available and soon enough, even little kids can learn to use these or simpler programs.
Throughout the decades, there have been attempts to minimize the work involved with animation and with the introduction of computer animation, this is what has been achieved.
Further Progression
New developments in computer animation technology are reported each year in the annual SIGGRAPH event.
Team Disney building, California
But when you talk about progression in the animation and computer graphics industry, the first thing that comes to mind is Virtual Reality and Augmented Reality. These two are a current area of interest in the technology world and is bound to make animation history.
Virtual Reality is already making its way into the gaming and entertainment industry as well as training sectors and educational fields, and is already a success. Augmented reality, still climbing on the way to the top, can already be seen in games like Pokémon Go, which has millions of players worldwide.
At the event: BCSWomen Lovelace Colloquium 2018, University of Sheffield
Learning Graphics programming with OpenGL, C++. You can find the project by clicking the Github icon. ->
Concept
A Mystic Rose is a beautiful, geometric image created by joined together points that are equally spaced along the circumference of a circle.
By selecting the number of points in your rose, you can determine the degree of rotation of each point/line. (360 deg / number of points)
The number of lines to be drawn to complete the rose can be calculated by the following formula:
Number of points * (Number of points - 1) / 2
Development and Code
Trigonometry to code; identifying points on the circle
By randomizing the number of points and the radius of the circle, I achieved a numerous random mystic roses animation. Using the math libraries, I picked a random positive point between the center and 50 units from the edge of the application window (margin).
Following the above trigonometric expressions, other points along the circle circumference were noted and stored. To avoid further complications of having the number of lines being counted and drawn accordingly, I used GL_LINE_STRIP attribute instead of a GL_LINE, to have a continous line drawn until the shape closed.
My first JavaScript assignment/game. You can find the project by clicking the Github icon. ->
Game Overview
iTimeOut is a cross-breed game of Hangman and Time Bomb (goes by many names). It is a single-player word game where you have approximately a minute to guess five randomly chosen words. First time players are recommended to watch the intro, but an option to skip intro is provided. You can alternatively skip the intro if you want.
The game will present the dashes, like in Hangman, and ask a (security) question, like ‘What is your favourite fruit?’ And that is your hint to start guessing (the mum’s favourite) fruit (read backstory on website), by clicking on the alphabet buttons on the screen, while the timer runs. If you guess the full word, the next question will present itself, for you to guess.
Scoring is word-based. If you get one word in the time limit, you get 10 points, two is 20, and so on. If you get all five words right in time, you have bonus points added to your score, based on your timer div.
The Backstory
Serah Loo has just failed her midterms and what’s worse is, her grades are going to be sent to her mum. This will be the last straw and most likely, the end to her phone usage, a.k.a. her social life, once and for all. Help Serah Loo answer her way through the security questions to delete the email from her mum’s account before the time runs out. If you don’t, well, bad things will happen.
Design and Development
Website
Home page of overall website
The website created was basic as this was not the primary focus of the task. A simple purple-blue theme that crossed over into multi-colors into certain parts of the website. The character walking across did catch the attention (and did get annoying over time).
Login page
The website required a simple registration and login setup, that used localStorage (refer to section below). Login was required to play the game. Validation was run on the input fields (listed below).
Login :-
Incorrect password
User does not exist
Blank input fields
Registration :-
Blank input fields
Invalid email format
User already exists
Rankings page
A rankings system was a key requirement for the game, and although you could potentially have an endless number of places and have all data stored and displayed, I chose to highlight just the top ten players, which is, again, stored on localStorage.
Game
iTimeOut game start screen
There are multiple ways to get to the game screen, by clicking any of the first three buttons in the screenshot above.
Play Intro takes you through the intro (there is an option to skip), goes through the How to Play, and finally gets to the game.
How to Play goes through the instructions and takes you to the game.
Play Game directly takes you to the game.
Note: The screenshot taken is from the newer version of the game that can be played online. The High Scores button will show you the top ten players.
iTimeOut game screen visual
You have about a minute to guess all five answers. The moving bar at the top that serves as the timer is approximated to a minute. The score is incremented by ten for every guessed answer. There is a bonus score that is added, based on the remaining time, if the player wins.
localstorage The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. For this assignment, localStorage is used to store basic data. This includes user details on registration, active user session, game data and user rankings (an array of length ten).
Evaluation
iTimeOut: Original project and current game
Being new to JavaScript, the game works well and was a great starting point to have. There are a few quirks to work out, like the on-screen keyboard in the game, use of keys and maybe, moving through the questions automatically.
4 Years Later
I decided to put the game up on this site. With this in mind, I had to make it compatible so it was playable on the web. Looking over my code, it was illegible. Even with numerous comments, some of the functions and logic were a bit weird, and some of the code could be made obsolete.
I started working on not only moving the game onto Blogger, but also improving the code with the knowledge and skills I now have. It turned out great. I did have to make a few adjustments for it to work on the phone (but eventually, I just settled with making the user rotate their screen). I may have to move some things around for phone players, but the laptop/desktop version works great.
House Of The Night Children
-
*KristenRebello / 3 pages*
Short story (an idea for a novel I'm writing) that follows Kara, a normal
teenage girl, who explores the supernatural world, that...
Celebrating 1 Year!
-
[image: Snow]
A year ago today, “A Job Seeker’s Guide” was conceived. With over *500*
page visitors, *80* enrollments and a *4.8* course rating, the frui...