Cartoon Animation gif: February 2011

Google Field Trip

Lego Artwork image by Sean Kenney

The BAVC Digital Pathways Open Source class is getting a guided tour of Google! We will be introduced to the various Open Source initiatives in the Mountain View campus, and see what they're up to. Make sure you have your permission slips in class by Wednesday, March 2nd. Without a permission slip, you won't be able to come.

We are meeting at BAVC Monday, March 7th at 11am and leaving in van that will hold us all. Please be on time. Depending on how long our tour goes, we may or may not have class when we get back to BAVC. We should return to San Francisco by 4pm.

See you all then!

If you have any questions about this field trip, feel free to contact myself, Moriah or Naomi.

Inspiration: Master Animators At Work - SYLVAIN CHOMET

In this excerpt from the BBC series "The Secret of Drawing" (2006) director Sylvain Chomet (The Triplets of Belleville and L'Illusionniste ) demonstrates his approach to drawing for animation. The work shown is an early test scene from "The Illusionist" (released 2010) .

The entire episode is available here: http://vimeo.com/12397782

Drawings from "The Illusionist"

Pencil Tests from "The Illusionist"

Open Source Animation Software

Some open source animation software solutions:

Pencil

Pencil is an animation/drawing software for Mac OS X, Windows, and Linux. It lets you create traditional hand-drawn animation (cartoon) using both bitmap and vector graphics.

Synfig

Synfig Studio is a free and open-source 2D animation software, designed as powerful industrial-strength solution for creating film-quality animation using a vector and bitmap artwork. It eliminates the need to create animation frame-by frame, allowing you to produce 2D animation of a higher quality with fewer people and resources. Synfig Studio is available for Windows, Linux and MacOS X.

Google WebFonts API

The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.

Benefits of the Google Font API include:

A choice of high quality open source fonts.
Works in most browsers.
Extremely easy to use.

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

To use one of the fonts, browse to the one you want to embed, and include this in your <head> tag. Note: This is including the PT Serif font face as an example, but you can include any font you want.

<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>

And this in your CSS to style all your <h1>'s:

h1 { font-family: 'PT Serif', arial, serif; }

3D HTML Elements with CSS

Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, just CSS.

h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Via http://markdotto.com/playground/3d-text/

Inspiration: Uli Meyer

Students: if you're not familiar with the work of Uli Meyer and his London animation studio "Uli Meyer Animation" you should definitely get to know his work.

In addition to his studio website , Uli has a couple of blogs where he posts his incredible pen & ink drawings :

http://ulimeyeranimation.blogspot.com/
http://umbackagain.blogspot.com/

A few samples of Uli's work below. Click on through to those links above to see more of his drawings.

An early show reel of Uli's work from approx. 1987 - 1993 . Commercials and feature films ("Who Framed Roger Rabbit" , "An American Tail 2: Fievel Goes West", "Fern Gully: The Last Rainforest") -

Amazing animation test done in the style of Ronald Searle, based on Searle's St. Trinian's girls :

Totally captured the Searle look in animation. Uli describes the process:

"On September 22nd I presented a 25sec animation test featuring a St. Trinian's schoolgirl to the creator of those classic British characters, Ronald Searle himself. Searle has had a few bad experiences when it comes to animation -his drawing style is extremely difficult to adapt and apart from a few short pieces of animation done by Ivor Woods in the 70s, he hasn't been impressed by any attempts. Nevertheless, I thought I'd give this a go and am delirious to report that he loved it! He even commented that it was the best he'd seen since Ivor: a truly wonderful compliment.

The original St. Trinian's cartoons are spot gags featuring the terrible killer schoolgirls and their teachers at the notorious, albeit fictional, boarding school. They commit murder, blackmail and extraordinary naughtiness against the backdrop of a supposedly more innocent era - 1945 to 1952.

There isn't a story. Searle's anarchic humor works as a single image -- not obviously lending itself to animation. Therefore, I picked one of the cartoons and added a little lead-up story.

Matt Jones and I boarded a sequence which was originally longer than 25 seconds and involved a massive crowd scene in the St. Trinian's dormitory. But I decided to keep it simple - it was meant to be a test after all. Based on the boards, I drew the layouts and posed the shots on 8s and 12s. The wonderful animation is by Sandro Cleuzo, who animated the first shot and Boris Hiestand, who animated the rest.

My job was to keep the whole project in the Searle universe. I drew the BGs onto frosted cel, each one five times to give the environments a slight boil. I then drew the character animation onto frosted cel with a mapping nib and black ink, trying to keep it as loose as possible whilst putting the characters on 'Searle' model. The animation is mostly on ones and I managed to get through 40-50 drawings per day. Helene Leroux, a very talented young French artist, traced the last shot. Loose lines further produced the 'boil' effect, which goes well with the Searle style.

The drawings were then scanned and composited by Michael Schlingmann in After Effects. Michael figured out a complex system of mixes to keep the multiple background drawings alive and in style with the lively lines of the animation drawings. We added a mix of existing music to the edit, hoping the composers won't mind since this is not a commercial project. The little film was great fun to put together - a welcome opportunity to remember those dusty 2D animation skills."

(click image to view it larger)

"One More Time" by Alexander Petrov

A recent film supervised by Alexander Petrov , "One More Time" . (all of these images are hand-painted with oil paint on glass, one frame at a time.)

Roughly translated (by Google) from a Russian language page I found with information about the film:

"The film "One more time!" - is a moving memory of the finest part of every person - a carefree childhood. The action takes place in Yaroslavl, 1930. The authors managed with great precision to convey the atmosphere of that time.

The film "One more time!" is the graduate work of young animators. Its authors - Alina Yahyaev, Ekaterina Ovchinnikova, Tatiana Okruzhnova - in one -and-a-half years have created a film under the guidance and in co-creation with the teacher, Alexander Petrov.

Alexander K. Petrov - a famous animator, film director and artist. Member of the Union of Cinematographers of Russia, member of the International Association of animators ASIFA, a member of the American Academy, an honorary member of the Russian Academy of Arts. Winner of two national awards (1990, 1995). He was awarded an Academy Award in 2000 for his film "The Old Man and the Sea." Alexander Petrov, creates its own unique films in the technique of oil painting on glass."

Here are some photos showing pre-production sketches and storyboards:

http://tiny.cc/qhmgj

More works by Alexander Petrov:

http://www.youtube.com/results?search_query=Alexander+Petrov+animation

-

Academy of Art - Current Online Traditional Animation Faculty

For my Academy of Art animation students I've been remiss in not officially noting that my friend and colleague Diana Coco-Russell has joined the Academy of Art University as the on-campus Associate Director of 2D Animation. In addition to her work on-campus at AAU , Diana also teaches for 2D Animation Online (ANM 610.OL Figurative Concepts and ANM 611.OL Visual Elements of Story ) .

Diana Coco-Russell
Associate Director 2D ANM (onsite) , Online Faculty
2D Animation, Drawing for Animation, Character Design

Diana Coco-Russell IMDB: http://www.imdb.com/name/nm1852703/

Currently teaches online: ANM 610.OL Figurative Concepts, ANM 611.OL Visual Elements of Story (also teaches ANM 364 Character Design & Drawing for Animation, and Drawing for Animation Workshop on campus )

Biography

Diana Coco-Russell has spent most of her artistic career in animation, with her longest run at Walt Disney Feature Animation as a clean-up animator. Beginning with Beauty and the Beast in 1992 and ending with Home on the Range in 2003 her credits appear on most films from that decade.

Known as Diana Coco in the industry, she began her career doing layout/story boards for Filmation on the Lone Ranger/Tarzan TV series, later moving into clean-up animation working on He-Man and Bravestarr. Having graduated from Art Center College of Design in Pasadena as an Illustration major, she found she preferred the camaraderie of the studio atmosphere to the life of a freelance illustrator. After Filmation folded she went back to UCLA and received a Master’s in Education. Teaching Biology and running the Yearbook class could not match the call of creativity found in feature animation and she returned to the entertainment industry by starting up with Disney Feature Animation in Burbank.

While at Disney she met Walt Stanchfield, who was conducting bi-monthly Gesture Drawing classes for the entire studio. Walt made a huge impact on Diana with his challenge to create and craft powerful drawings with life and simplicity. The call to draw the figure in poses so clear that they ‘spoke to the balcony’ was irresistible. She took Walt’s drawing philosophy ‘on the road’ teaching figure and gesture drawing classes at a variety of institutions including the local Hollywood animation union, Santa Monica City College and Laguna College of Art & Design. Diana continues to ‘coach’ drawing and animation in a variety of venues while pursuing her other interests - plein air painting, animal drawing and riding horses with her husband and friends.

You may view our other current online "2D"/Traditional Animation faculty at this link:

AAU current Online Traditional Animation Faculty

-David Nethery
Associate Director of 2D Animation Online
Academy of Art University

-

Guest Speaker: Joshua Nimoy

Note: Lecture Starts at 1:50.

Joshua Nimoy gives talk about his personal and professional works of design, code and art. He speaks about the evolution of programming and creative coding by giving a personal tour of his portfolio ranging from early work to his latest. Josh's work ranges from gallery exhibited media artworks, physical computing, web, and camera vision projects, to his custom-built animation pipelines and graphic animation filters for advertising and film.

Josh uses many languages, frameworks and toolkits including processing, OpenFrameworks, and his own frameworks written from scratch.

Embedding Processing code with Processing JS

Download the source code materials for this tutorial here.

In order to post code to the web, you will need two libraries: ProcessingJS and jQuery. Jquery is used simply to know when the page is loaded.

The tutorial video goes over the process of integrating processing code for use in ProcessingJS. But once you download the tutorial files, basically all that's left to do is replace the mySketch.pde.js with your Processing code, and you're good to go.

Note:
Keep in mind your sketch will not work if you any external libraries, including sound, video, midi, or 3D. At this point, ProcessingJS only supports visual code. If you paste in processing code that uses external libraries, it probably won't work. If that's the case, you probably will have to embed your processing sketch by going to File>Export in the Processing menu, and then uploading that whole folder to your website. This will rely on the java plugin.

Other Digital Pathways Class Blogs

Are you interested in other Digital Pathways programs? Did you know that every class has their own blog? If you need a break and a little bit of inspiration, or are you simply curious about what the other classes are up to in the program, check out the other Digital Pathways classes:

Audio A, and Audio B

Audio recording, production and mastering.
http://dpaudioa.blogspot.com
http://dpaudiob.blogspot.com

3D Gaming

3D software and game development.
http://dp3dgaming.blogspot.com

Fuddles by Frans Vischer

Animator Frans Vischer has written and illustrated a new book, "Fuddles" . He animated this charming trailer to promote the book.

And check out Frans' other book "Jimmy Dabble" -

http://www.jimmydabble.net/animation.html

Tahsin Özgür - Pencil Tests

I'm grateful to C. Siemens on the Don Bluth Animation Forum for directing my attention to this remarkable collection of pencil tests by animator Tahsin Özgür.

Here's a sampling:

"For a while my wife, Lale, had a company through which I did some of the best of my animation work. This "animated logo" was meant for that company, but by the time I was finished with the cleanup, she had already closed it down! The model is Lale, of course!"

Here is a short film prepared as part of an exhibition of animation at the Apel Gallery in Istanbul. The format is a "silent movie". Starting around the 00:35 mark it has an amusing "day in the life of an animator" sequence , in which you get a glimpse into Tahsin Özgür's animation work process (continuing my recent theme of posting videos of Master Animator's At Work) , with bits of his animation interspersed with scenes of him drawing at his animation table -

This was prepared for an exhibition at the Apel gallery in Istanbul in 2001.

More pencil tests by Tahsin Özgür here:

http://vimeo.com/user3233558/videos

Tahsin Özgür's blog

-

"L'Illusionniste" an animated film by Sylvain Chomet

Last year I made several posts about Sylvain Chomet's new animated feature , The Illlusionist ("L'Illusionniste") .
Time to mention it again.

Now that the film has received an Academy Award nomination as "Best Animated Feature Film" and is in a somewhat wider release pattern I wanted to post the release schedule from Sony Classics. Here is where the film is currently playing or will be opening soon:

http://www.sonyclassics.com/theillusionist/dates.html

If the film is playing in your city or close-by I highly recommend you see this sumptuously animated film. Especially if classical hand-drawn animation is something you are passionate about then you owe it to yourself to see and support this beautiful, poignant film on the big screen.

Here is the North American Trailer -

(I suggest that you switch the video settings to HD , watch full-screen).

Here is some artwork from the film:

Production Drawings & Backgrounds from The Illusionist

Pencil Tests from The Illusionist

Excellent review of the film by Mark Mayerson:

"The Illusionist" a review by Mark Mayerson

Roger Ebert's review:

"The Illusionist" reviewed by Roger Ebert

--------

The North American (Sony Classics) website for the film:
http://www.sonyclassics.com/theillusionist/

The French (Pathé) website for the film :

http://www.lillusionniste-lefilm.com/#/home

Sylvain Chomet at the animation table -

Processing for Android Devices

If you are interested in porting your Processing projects to Android devices, it's a very simple process. You'll need to first install the Android-Processing Library, and then set Processing to Android Mode. If you have an Android device and try this out, post about your progress. We may touch on this in class, but until then, feel free to browse this reference.

Here's some more information from the Processing WIKI:

The primary goal of this project is to make it foolishly easy to create Android apps using the Processing API. Once you have Processing on your machine (and the Android developer tools), you can simply write a line of code, hit 'Run' (or Ctrl-R), and have your sketch show up in the emulator as a working Android app. Select 'Present' (or use Ctrl-Shift-R) to have it run on an Android device that you have plugged into your machine.

Doing Processing development for Android promises the same streamlined, sketchbook-like production flow that Processing does on desktop. To create Android apps, you simply set Processing to “Android mode.” (Right now, you have to point to Google’s SDK, but that happens only once and may be removed in future versions.) Hit run, and your sketch launches in the Emulator. Plug in an Android device via USB, and it’ll run on your device. Soon, you should have one-click-export of apps in the way that you do Processing desktop apps.

link: http://wiki.processing.org/w/Android

Other Ways to List Files with PHP

As we touched on with this blog post, we were listing files with he DirectoryIterator object, which gives us an SPLFileObject. This method is excellent for situations when you want to know the details of every file in the folder. However, if you're looking to grab specific files or extensions and don't care too much about the details of each file, it's much more efficient to use the glob() function or scandir(), which return a list of files as an array.

// list just text files
foreach (glob("./myfolder/*.txt") as $filename) {
    echo "$filename size " . filesize($filename) . "<br />";
}

If you want to exclude files, you could use scandir() and array_diff()

// exclude dot files and .DS_Store
$excludes = array('.', '..', '.DS_Store');
$files = array_diff(scandir('./files/img'), array('.', '..'));
foreach($files as $filename) {
    echo "$filename size " . filesize($filename) . "<br />";
}

Now, if you wanted to include only certain extensions, you could do:

$files = scandir('./images/');
$allow_extensions = array('jpg', 'png', 'gif');
foreach($files as $filename) {
    $file_parts = pathinfo($filename);
    if (in_array($file_parts['extension'], $allow_extensions)) {
       echo "$filename size " . filesize($filename) . "<br />";
    }
}

Sin & Cos: The Programmer's Pals

Sin/Cos image from Wikipedia

In this article discusss several game programming techniques, all revolving around a central theme: the sine and cosine functions. The article will explain sine, cosine, vectors, atan2, and some useful special effects such as how to make homing missiles and how bitmap rotation works. It starts with the very basics, but covers some more advanced programming techniques.

This article comes with twelve real-life coded examples coded in C. Even though we haven't been programming in C, Processing is very C-Like, so a lot of the concepts should be a similar application. Regardless if you can apply it to your work, it is still a very interesting read.

This article will expose you to a lot of interesting techniques that can be used in any type of graphics programming.

Via Helixsoft.nl

Inspiration: Master Animators at Work - GLEN KEANE

These have been shared on a lot of blogs , but for completeness sake in this series I'm re-posting them here.

A great lecture (in three parts) by Glen Keane on his approach to animating a scene. You can learn so much by just "looking over the shoulder" of these great animators as they animate.

Inspiration: Master Animators at Work - ERIC GOLDBERG

Master animator Eric Goldberg demonstrates how to animate.

A couple of Eric Goldberg animated commercials :

Here's a link to a presentation that Eric gave at the Academy of Art University's annual Fall Animation Festival in 2008 -

Industry On-Campus Videos - ERIC GOLDBERG

*NOTE: Sorry, I can't embed the video here. You'll have to go to the AAU Videos web page and scroll down through the list of videos to find "Eric Goldberg". Click on Eric's name to launch the video.

Inspiration: Master Animators at Work - JOANNA QUINN

Master Animators at work. It's always interesting and educational to see how an animator approaches animating their scenes.

First up, the amazing Joanna Quinn .

More Joanna Quinn on YouTube :
http://www.youtube.com/results?search_query=Joanna%20Quinn&search=tag

Rediscovering WWII's female 'computers'

Computer, at that point, was a job title, not a machine. Long before the sisters were businesswomen, community activists, mothers or grandmothers, they were recruited by the U.S. military to do ballistics research. They worked six days a week, sometimes pulling double or triple shifts, along with dozens of other women.

The weapons trajectories they calculated were passed out to soldiers in the field and bombardiers in the air. Some of their colleagues went on to program the earliest of general-purpose computers, the ENIAC.

Listing Files or Directories with PHP

How to list files with PHP using the DirectoryIterator class.

<?php
 // the folder to list
 $images = 'images/';
 // directory iterator
 foreach (new DirectoryIterator($images) as $fileInfo) {
   if($fileInfo->isDot()) continue;          
   // echo the image out and the filename
   ?>
   <img src="<?php echo $images . $fileInfo->getFilename();?>" />
   <br />
   <?php echo $fileInfo->getFilename(); ?>
 <?php          
 }
 ?>

Put this code in a .php file on your web server as a starting point for listing files. It will list any files and folders that aren't "Dot" files -- which are "." and "..", which relate to the current directory and the parent directory, respectively.

Javascript Sound Effect Generator Library

JSFX is a javascript library (with frontend) for sound effect generation, and needs WAV support from browser to work. For short clips it can generate the audio in 30ms in a good browser. Might be fast enough to do runtime generation of effects.

Pretty awesome programming! Check out the source on Github.

Paralaxing Error Pages on Github

Check out these fun errors pages on Github. The server code 404 means that the page does not exist, and the code 500 means that the server had an error. See what happens when you move your mouse over the image after visiting the links! The technique used to move the images in such a way is called Parallaxing, where images that are intended to appear further from the viewer move less than the images that are intended to appear closer. A fun exercise would be to see if you can pick apart the source and replace the images with your own.

jsFiddle Real Time web-testing suite

jsFiddle is a dynamic example of a web-based javascript editing environment. It allows you to run and test small snippets of code, and the site itself is quite a unique engineering feat. See if you find it useful!

From the developers:

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. We aim to support all actively developed frameworks - it helps with testing compatibility.

The "Team" Javascript/HTML creative use

This company has a very creative way of using JavaScript and HTML for their "About" page.

http://www.technologywithpassion.com/about-us/team/

Google Art Project

http://www.googleartproject.com

Facial Expressions Tutorial by Tracy J. Butler

Comics artist Tracy J. Butler ("Lackadaisy") has posted a great tutorial on Facial Expressions:

NOTES ON EXPRESSIONS - Click Here -

Here are a couple of samples from the tutorial, including some things NOT to do :

(oh, yes, let us all banish the chronic "C-Mouth" , "Smarm Brow" (aka "'tude" ) and "Flounderface Disorder" , all bad habits.)

(while there also check out her tutorials on "How to Paint in Photoshop" , "How to Draw" .)

(click images to see larger)

Pencil

Synfig

Audio A, and Audio B

3D Gaming

Blog Archive