Cartoon Animation gif: 2010

"Une Vie de Chat" a new animated feature film

This looks interesting. From France comes this new animated feature film "Une Vie de Chat" (currently in release in French cinemas) , directed by Jean-Loup Felicioli and Alain Gagnol.

The film's website is here: http://www.uneviedechat-lefilm.fr/ and the Facebook Page here: "Une Vie de Chat" on Facebook.

The trailer:

Synopsis of the film:

Un chat mène une double vie secrète : il passe ses journées avec Zoé, la fille d'un commissaire, mais la nuit il accompagne un voleur sur les toits de Paris. Alors que la mère de Zoé enquête sur les cambriolages nocturnes, un autre truand kidnappe la fillette...

A cat leads a secret double life: he spends his days with Zoe, the daughter of a police commissioner, but at night he accompanies a thief on the rooftops of Paris. While Zoe's mother investigates the burglaries at night, another criminal kidnaps the girl ...

And just in time for Christmas comes this handsome image posted on the film's Facebook page:

Animation of Christmases Past

This Christmas greeting for CBS Television (from 1966) was designed by R.O. Blechman , animated by Willis Pyle.

(I have always loved the elegant minimalism and great sensitivity of this piece ... I had it on Super-8mm from Blackhawk Films in the late 70's . I've been glad to notice that since I posted it to YouTube on Dec. 24, 2006 that it has received over 281,350 views to date. So a few other people appreciate it too I guess.)

More Blechman:

This is from Blechman's Christmas special for PBS, "Simple Gifts" ... opening sequence designed by Maurice Sendak , animated by Ed Smith.

I wish this beautiful Christmas special were available on DVD . I don't know why PBS doesn't air it annually . '

The bits of it available on YouTube are not the best presentations , but unfortunately all that is available at the moment .

Christmas 1914 -

No Room at the Inn -

Here's Richard Williams wonderful (though much too short ) animated version of Charles Dicken's "A Christmas Carol" ---

This is another film that should be available in a restored version on DVD , but is only available on the internet.

A cel from "A Christmas Carol" that I own. This was animated by Abe Levitow. Director Richard Williams graciously autographed it for me last time I saw him at the Disney Studio when he was there giving a lecture about animation.

Using a BOOLEAN Variable to Store a Button State

// button variables
int buttonw = 30;
int buttonh = 20;
int buttonx = 20;
int buttony = 50;

boolean buttonON = false;

void setup()
{
  size(300, 300);  
}

void draw()
{
  if (buttonON) {
    fill(180);    
  }
  else {
    fill(0); 
  }
  rect(buttonx, buttony, buttonw, buttonh);
}


void mouseReleased()
{
  if (insideRect(mouseX, mouseY, buttonx, buttony, buttonw, buttonh)) {

    // there are multiple ways to write this operation
    //1 
    buttonON = !buttonON;            

    //2
    //  buttonON = buttonON == false ? true : false; // 

    //3
    //    if (buttonON) {
    //      buttonON = false;
    //    } 
    //    else {
    //      buttonOON = true;
    //    }
    //
    //
  }    
}


// boolean function returns either true or false 
// if an x,y point is inside a rectanglular area
boolean insideRect(float px, float py, float rx, float ry, float rw, float rh) {
  return px >= rx && px <= rx+rw && py >= ry && py <= ry+rh;
}

Headless Productions

Headless Productions is a small independent animation studio founded by Adrian Garcia, Alfredo Torres and Victor Maldonado, based in Barcelona.

Show reel:

A teaser for their latest project "I'm A Monster"

This is a piece developed to give an idea of the mood and look of the film and the characters.

Word Lens iPod App

It's not open source, but this is a very interesting, useful, and innovative use of camera tracking technology.

Air Guitar with the Kinect

Air Guitar prototype with Kinect from Chris O'Shea on Vimeo.

via Chris O'Shea: http://www.chrisoshea.org/lab/air-guitar-prototype

Technical Details
Written in c++ using openFrameworks and openCV for image processing. Using the ofxKinect addon and the libfreenect driver on Mac.

How it works
First it thresholds the scene to find a person, then uses a histogram to get the most likely depth of a person in the scene. Then any pixels closer than the person to the camera are possible hands. It also uses contour extremity finding on the person blob to look for hands in situations where your hand is at the same depth as your body. It only works if you are facing the camera front on. Then it uses one hand as the neck of the guitar, drawing a virtual line from the neck through the person centroid to create the guitar line. The other hand is tracked to see if it passes through this line, strumming the guitar. The neck hand position controls the chord.

InsideRectangle Boolean Function

Here is an example of a function that returns a boolean, as opposed to a 'void' function. The insideRect() function returns true or false if a point is inside a rectangle.



void setup() {
  size(300, 300);
}


void draw() {

  background(120);

  int rectX = 30;
  int rectY = 40;
  int rectHeight = 50;
  int rectWidth = 50;

  if (insideRect(mouseX, mouseY, rectX, rectY, rectHeight, rectWidth)) {
    fill(255);
  }
  else {
    fill(120);
  }

  rect (rectX, rectY, rectHeight, rectWidth);
  
}

// boolean function returns either true or false
boolean insideRect(float px, float py, float rx, float ry, float rw, float rh) {
  return px >= rx && px <= rx+rw && py >= ry && py <= ry+rh;
}

Painting App in Processing with Toggleable Menu

Here's some code to start creating a painting app in Processing. Hold down space to access a future "menu". You may code in a color picker, or other tools in this menu. Press 's' to save your image. It's a very simple framework, but it gives you a good base to start developing your own drawing applications.

Notice how we create a new PGraphics object to draw on, which makes it easy to add other elements to our app without affecting the pixels of the canvas.

// canvas object to draw on
PGraphics canvas; 

// menu toggle;
boolean menu = false; 

// background color
color bgcolor = color(190); 


void setup()
{
  size(500, 500);  
  // create new PGraphics that's the same size as our app
  canvas = createGraphics(width, height, P2D); 
}


void draw()
{
  background(bgcolor);
  // if mouse is pressed and the menu isn't on
  if (mousePressed && !menu) { 
    // start canvas drawing
    canvas.beginDraw(); 
    // draw a line from the mouse position
    canvas.line(mouseX, mouseY, pmouseX, pmouseY); 
    // end the canvas drawing
    canvas.endDraw(); 
  }

  // display the canvas object
  image(canvas, 0, 0); 

  // if menu is on, execute menu function
  if (menu) { 
    menu(); 
  }
}


void keyPressed() { 
  // if spacebar is pressed, toggle menu boolean 
  if (key == ' ') { 
    menu = true;
  }
  // if 's' key is pressed, save image to out.png
  if (key == 's') { 
    canvas.save("out.png");
  } 
}


void keyReleased() {
  // if spacebar is released, toggle menu boolean
  if (key == ' ') { 
    menu = false;
  } 
}


// menu function
void menu() { 
  fill(0);
  rect (20, 20, 50, 50);
  // draw menu here, and do menu functionality
}

Creating Interactive Apps / Musical Apps / Games with Processing

Here are some various resources for creating games or interactive applications with Processing.

The Processing Discourse is the first place to start your research. Here, people exchange ideas and techniques used in creating interactive apps with Processing. You can post your own questions to the forum, and more often than not get detailed, supportive responses:
http://processing.org/discourse/yabb/YaBB.cgi?board=Contribution_Responsive

Musical Apps

Musical applications are very similar to games, although (usually) there's no score, and it's more about playing with the app rather than trying to "win". Here are some examples of musical apps:

This is an example of a musical sequencer by Lukas Vojir. Individual objects are placed on the canvas that each have a sound property that plays when the playhead crosses them. From

I started with an idea of placing objects on a stage and having a ball bouncing from them - and playing different samples.. it was quite fun, but the sound output was random too much.. even too much for me.. so I brought it back to relatively “boring” from-left-to-right-going-playhead concept..

via: Lukas Vojir

Pulsate is an audio game by Andre Michelle. Click anywhere to create circles which play a certain tone when they collide with each other.

Tonewheels is another audio game by Andre Michelle. Wheels rotate and play sound when they interact with "note dots" placed on the screen.

Simple Games

Side-Scrolling games are a simple structure to base a project on, but there are many different side-scrolling approaches.

A simple "tracking" game.
http://openprocessing.org/visuals/?visualID=16238

A bunch of different games uploaded on OpenProcessing.org
http://openprocessing.org/tools/search.php?q=game

Games by NMcCoy. Most of his games include the source code for reference:

Snake Oil is a cross between Asteroids and the classic snake game.

Neutronium Verge is an interesting puzzle game.

Wave Spark is an interesting side-scrolling game. It’s a simple premise – use one button to control gravity in a hilly environment, and go as fast as you can.

Using Open Source Projects as Reference

Looking at software that's been made open source is an excellent way to learn about coding different aspects of interactive applications. Games are especially interesting because they are made to be played with and enjoyed, so they are programmed with the end user in mind. Musical Apps are similar, as they are meant to be played with as a musical instrument. There is are distinct overlaps between the two. There is a lot to learn from programming simple game or music concepts.

More Inspiration

Jumping Game:

Object Oriented Programming

An excellent, official tutorial on Object Oriented Programming on the processing.org website: http://processing.org/learning/objects/

Playing Sound with the Minim Library and OOP

Minim is an audio library included with Processing that allows you to play and analyze sound in your sketches.

Library reference: Minim Documentation
Free Sound: www.freesound.org

Download Source: KeySoundPlayer.zip

To add sound to your Processing sketch, you need to create a 'data' folder in your sketch location, and Processing will be able to access the files from that folder.

Mark Kausler's "It's The Cat" and "There Must Be Some Other Cat"

Recently when I attended the CTN Expo in Burbank I was really happy to run into my friend Mark Kausler who was selling original hand-inked cels from his brilliant film "It's the Cat" .

I had sworn off collecting any more animation artwork , but seeing Mark run his wonderful film "It's the Cat" there at his table (on a portable DVD player) and with those gorgeous hand-inked cels right there on the table I was overwhelmed and just had to have one.

This frame (from the title sequence) is the cel I purchased:

(this photo doesn't do it justice ... )

The film "It's the Cat" is not currently available for purchase online, but if you purchase an original cel they will include a bonus DVD of the film.

One of these handsome cels would make a great Christmas gift for any cartoon fan. And these are likely the last of their kind since hardly anyone does hand-inked cels anymore . AND purchasing one of these unique , one-of-a-kind pieces of animation art will help fund the completion of Mark's second cat film , "There Must be Another Cat" , which is finished through rough animation, but still needs to have the inking, painting , and photography finished. Mark's producer, Greg Ford, is chipping away at the task little by little , but by purchasing a cel you'll have a hand in making sure that "There Must Be Another Cat" is completed sooner .

http://itsthecat.com/Gallery-FilmArt.htm

(and then we'll have more cels to collect in addition to another great cartoon to watch ! Yay ! See how this works ? )

I was really happy that Mark gave me a sneak preview of "There Must Be Another Cat" at the CTN Expo . He had the pencil test on a DVD and was very kind to let me see the pencil test. It's another great example of pure cartoon joy brought to life by a great animator.

What you may not know is that the pencil test from the original "It's the Cat" film is posted on Mark's website.

Check it out:

It's The Cat - Pencil Test

Announcing: "Walk Cycle Depot" blog

With a deep bow of acknowledgment to Jamaal Bradley's wonderful Pencil Test Depot , I have started a sub-section of Academy of Art Animation Notes devoted to collecting various Walk Cycles, called "Walk Cycle Depot".

I'll be posting walk cycles animated by pros and by students.

Here's an example of what you'll find there:

Max walk cycle from Cat's Don't Dance:

(I'm trying to post all Walk Cycles as Quicktime movies so it's possible to step through them frame-by-frame. The embedded Quicktimes tend to load and play better in the CHROME browser or FIREFOX browser. If the playback is too choppy download them to your computer to view directly in Quicktime Player for better playback quality)

I'll try to update it frequently. Check out the Walk Cycle Depot.

More Kinect Hacking

Some very amusing Kinect hacks from Robert Hodgin. When people first started hacking with the Microsoft Kinect, the projects were very technical in nature. These videos show some very cool creative possibilities.

The difference in the Kinect sensor apart from a normal camera is that it captures z-information, allowing you to use the scene in three dimensions. This allows you to affect each three dimensional point in space.

Body Dysmorphic Disorder from flight404 on Vimeo.

Fat Cat from flight404 on Vimeo.

These were coded with the open source framework Cinder. Cinder is a visual framework written in C++ and can be used for creating visual apps of all types.

Dueling Kinects from flight404 on Vimeo.

Two Kinects running at the same time. Each depthmap is compared and the closer value is kept. Allows for the creation of mutant hybrids, arms coming out of stomachs, etc.

"Jumping Through Hoops: The Animation Job Coach" by Tony White

At the recent CTN Expo in Burbank (great event , by the way) I was pleased to finally meet animator/author/teacher Tony White face to face.

Among other interesting projects that Tony has in the works he has recently completed and released yet another book titled "Jumping Through Hoops: The Animation Job Coach".

The book is a much needed guide for all those who want to get a first job in the animation industry. It is also a valuable asset for all those who want to stay there once they have that all-important first job. I read it cover-to- cover on my return flight home , and I highly recommend it to all students. This is a very practical guide to preparing yourself for the modern animation industry and seeking a job once your animation training is completed.

(*Note: I will say that if I had a small quibble with the book it is to point out that the book needed more careful proofreading before publishing as there are a number of typographical errors, but these in no way detract from the overall value of the wisdom contained in the covers of this book . Just something that should be fixed in the second printing of the book. Get the book. )

Hacked Roomba Uses MS Kinect to See The World, React to Gestural Input (video)

KinectBot’s software is hacked together just as much as its hardware. Robbel used simultaneous localization and mapping (SLAM) code from OpenSLAM.org (specifically GMapping) as well as some visualization packets from Mobile Robot Programming Toolkit (MRPT). He added his own interaction, human detection, and gesture code so that KinectBot could follow signed commands. As all of this is pretty much open (MRPT is GNU GPL, GMapping is Creative Commons, and Robbel’s own code isn’t anything MIT needs to keep proprietary) there’s a chance the software package will be available at some point for you to download.

The future of 3D vision hacking is bright!

Sensing when the mouse is inside a rectangle with Processing

int buttonSize = 100;

void setup()
{
  size(300, 300);
}

void draw()
{
  button(0, 0, buttonSize, buttonSize);  // top left
  button(width - buttonSize, 0, buttonSize, buttonSize);  // top right  
  button(0, height - buttonSize, buttonSize, buttonSize);  // top right      
  button(width - buttonSize, height - buttonSize, buttonSize, buttonSize);  // top right
}

void button( int x, int y, int w, int h )
{
  // if mouse is inside rectangle
  if ( mouseX >= x  &&  mouseX <= x+w &&
       mouseY >= y  &&  mouseY <= y+h) { 
         
    if (mousePressed) {              
      fill(255, 0, 0);   // the color if the mouse is pressed and over the button
    }
    else {
      fill(255, 255, 0); // the color if the mouse is over the button
    }
    
  } 
  else {
    fill(0, 0, 255);     // the color if the mouse is not over the button
  }
  
  rect(x, y, w, h);
}

How to Install a Library in Processing, using OpenCV as an Example

Libraries are extremely useful as they are developed for a specialized purpose, letting you solve more complex problems. OpenCV is an extensive open source computer vision library that allows you to track faces, objects, and other things seen by a camera. It focuses mainly towards real-time image processing. It allows you to all sorts of things that require camera tracking -- Such as tracking a faces, bodies, or movements.

To install OpenCV, you need to install the library. Follow these steps to install a library for Processing.

1. Download, unzip, and move the OpenCV Processing Library from here.

2. Option-click the Processing app in your Applications folder and click Show Package Contents

3. Browse to Contents/MacOS/Resources/Java/libraries/ and drop the OpenCV folder into it.

4. Re-Open Processing and try this really cool real-time motion-blender code from Andy Best.:

/**
    Title: Processing Tutorials: Getting started with Video Processing via OpenCV
    Author: Andy Best
    Author URL: http://www.andybest.net/
    Requires: 
        Processing http://processing.org
        OpenCV http://opencv.willowgarage.com/wiki/
        Processing Library http://ubaa.net/shared/processing/opencv/
 */

import hypermedia.video.*;        //  Imports the OpenCV library
OpenCV opencv;                    //  Creates a new OpenCV Object
PImage trailsImg;                 //  Image to hold the trails
int hCycle;                       //  A variable to hold the hue of the image tint
 
void setup()
{
 
  size( 320, 240 );
 
  opencv = new OpenCV( this );    //  Initialises the OpenCV object
  opencv.capture( 320, 240 );     //  Opens a video capture stream
  trailsImg = new PImage( 320, 240 );  //  Initialises trailsImg
  hCycle = 0;                     //  Initialise hCycle
}
 
void draw()
{
 
  opencv.read();                  //  Grabs a frame from the camera
  PImage camImage;                //  Creates an image and
  camImage = opencv.image();      //  stores the unprocessed camera frame in it
 
  opencv.absDiff();               //  Calculates the absolute difference
  opencv.convert( OpenCV.GRAY );  //  Converts the difference image to greyscale
  opencv.blur( OpenCV.BLUR, 3 );  //  I like to blur before taking the difference image to reduce camera noise
  opencv.threshold( 20 );
 
  trailsImg.blend( opencv.image(), 0, 0, 320, 240, 0, 0, 320, 240, SCREEN );  //  Blends the movement image with the trails image
 
  colorMode(HSB);                 //  Changes the colour mode to HSB so that we can change the hue
  tint(color(hCycle, 255, 255));  //  Sets the tint so that the hue is equal to hcycle and the saturation and brightness are at 100%
  image( trailsImg, 0, 0 );       //  Display the blended difference image
  noTint();                       //  Turns tint off
  colorMode(RGB);                 //  Changes the colour mode back to the default
 
  blend( camImage, 0, 0, 320, 240, 0, 0, 320, 240, SCREEN );  //  Blends the original image with the trails image
 
  opencv.copy( trailsImg );       //  Copies trailsImg into OpenCV buffer so we can put some effects on it
  opencv.blur( OpenCV.BLUR, 4 );  //  Blurs the trails image
  opencv.brightness( -20 );       //  Sets the brightness of the trails image to -20 so it will fade out
  trailsImg = opencv.image();     //  Puts the modified image from the buffer back into trailsImg
 
  opencv.remember();              //  Remembers the current frame
 
  hCycle++;                       //  Increments the hCycle variable by 1 so that the hue changes each frame
  if (hCycle > 255) hCycle = 0;   //  If hCycle is greater than 255 (the maximum value for a hue) then make it equal to 0
}

Video

Processing OpenCV Tutorial Video #1- Psychedelic Blur! from Andy Best on Vimeo.

Introduction to GIT

Git is a free and open source, distributed revision control system, also commonly referred to as a version control system, designed to handle everything from small to very large projects with speed and efficiency. When developing code, A revision control system is useful in code because it acts as a method to share your code updates with a group, and keep track of your changes. It's a history of all your code work, and allows you to non-destructively edit your project without breaking it.

Version Control? Why do I need to use it>

Some of the best reasons:

It provides one method for an entire team to use; everybody operates under the same rules.
Changes are orderly vs. chaotic, saving development time
The ability to track changes promotes accountability, allowing you to contact the specific person who made an update.
A list of exact changes made can be viewed, making it easier to advise users of the information on how it has changed from version to version.
It gives you the ability to UNDO your changes!

Git's homepage: http://git-scm.com/. Git itself is an open source project that has been active for several years and is written mostly in C.

If you are new to coding, using GIT might feel like it's making your learning process more complex. But as you get used to using the command line and GIT, your code skill will become much stronger. Using a revision control system when coding allows you to jump into other open source projects with ease, and allows you to communicate the changes you're making to the group.

In order to use Git, you'll need to use the Terminal (on OSX). You can open the terminal by navigating to /Applications/Utilities/Terminal.

When setting up Git on a computer for the first time, here's some helpful commands to remember.

This is how you create a new Git project. Replace 'myproject' with your project name. 'mkdir' means you're creating a new directory, and 'cd' means you're moving to that directory. Typing 'git init .' means you're initializing a Git repository in the current directory.

mkdir myproject
cd myproject
git init .

Set up your name and email:

git config --global user.name "Your Name Comes Here"
git config --global user.email you@yourdomain.example.com

Use colors in Git:

git config --global color.diff auto
git config --global color.status auto
git config --global color.branch auto

Add your files:

git add .

View your project status:

git status

Commit your changes:

git commit -m "A message about what I changed"

View your commit log:

git log

A helpful Git tutorial

Learning how to use Git properly takes a lot of patience, as it's like learning another language in addition to the language of your code. It is a VERY powerful tool. If you're stuck -- ask questions! It will begin to make much more sense as you become familiar and use it consistently. We'll be using it to share code and projects in our class.

Reporters and Data

Most journalists [possess] daily computer skills that include Internet searches, word processing, and maybe some basic calculations in Excel, none of which enables journalists to truly mine large collections of data. Meanwhile, the amount of raw data available to journalists has mushroomed. At the federal level, the Obama administration’s “open government” initiative has given rise to new sources like Data.gov, a website devoted to the aggregation and easy dissemination of national data sets. State and local governments have followed suit, making much of the data they collect available online. More elusive tranches of data have been pried loose by nonprofit organizations courtesy of the Freedom of Information Act; an inquisitive journalist can download them in minutes. “I’m constantly amazed and surprised about what’s out there,” said Thomas Hargrove, a national correspondent for Scripps-Howard News Service who often leads data-based research projects for the chain’s fourteen newspapers and nine television stations.

via Serious Fun with Numbers

Programming is useful in all fields, even journalism. Very interesting article on data visualization, programming, and reporting. A reporter who knows how to disseminate large datasets into a database might be able to understand and derive more useful information than one who can't. That is, if the data is legitimate. There is potential for a dataset to be skewed in one way or another, and it's the reporters responsibility to fact-check just as they would any other reference or source.

Shape Revolver Function

A "Shape Revolver" function written in Processing. This function revolves a shape around a center point with a specified number and circle radius.

/**
 * Shape Revolver
 * @author Gabriel Dunne
 * @description Revolves a repeating shape around a vertex
 * @param int _x        the X position
 * @param int _y        the Y position 
 * @param int sides     the number of sides
 * @param float radius  the radius
 */
void shapeRevolver(int _x, int _y, int sides, float radius) {
  for ( int i = 0; i < 360; i += (360 / sides) ) {
    float x = _x + sin(radians(i)) * radius;
    float y = _y + cos(radians(i)) * radius;
    pushMatrix();
    translate(x, y);
    rotate(atan2(y - _y, x - _x));
    // draw your shape here
    rect(0,0,20,20);
    //
    popMatrix();
  }  
}

Polygon Function

// polygon function

void setup() {
  size(600, 600);
  smooth();
}

void draw() {
  background(0);
  noStroke();
  fill(255);
  
  polygon(100, 100, 5, 40);  
  polygon(200, 100, 6, 40);  
  polygon(300, 100, 7, 40);    
  polygon(100, 300, 7, 40);      
  polygon(200, 300, 3, 40);        
  polygon(300, 300, 8, 40);          
}

void polygon(int _x, int _y, int sides, float radius) {
 
  if (sides <= 0)
    sides = 1;
  
  beginShape();
  for ( int i = 0; i < 360; i += (360 / sides) ) {
    float x = _x + sin(radians(i)) * radius;
    float y = _y + cos(radians(i)) * radius;
    vertex(x, y);
//    ellipse(x, y, 2, 2);
  }
  endShape();
}

Array Trails

A bit of code to create trails with the mouse using Arrays

int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
float size[] = new float[num];

void setup() {
  size(400, 400);
  strokeWeight(10);
  smooth();
}

void draw() { 
  background(0); 
  fill(255);
  noStroke();
  
  int which = frameCount % num;
  mx[which] = mouseX;
  my[which] = mouseY;
  size[which] = abs(mouseX-pmouseX) + abs(mouseY-pmouseY);

  for (int i = 0; i < num; i++) {
    int index = (which+1 + i) % num;
    ellipse(mx[index], my[index], size[index], size[index]);
  }
}

Eye Tracking with atan2()

Here's an example from processing.org that uses atan2() to point an object at the cursor. See if you can change the color of your eye and scale with the Eye constructor.

Eye e1, e2, e3, e4, e5;

void setup() 
{
  size(200, 200);
  smooth();
  noStroke();
  e1 = new Eye( 50,  16,  80);
  e2 = new Eye( 64,  85,  40);  
  e3 = new Eye( 90, 200, 120);
  e4 = new Eye(150,  44,  40); 
  e5 = new Eye(175, 120,  80);
}

void draw() 
{
  background(102);
  
  e1.update(mouseX, mouseY);
  e2.update(mouseX, mouseY);
  e3.update(mouseX, mouseY);
  e4.update(mouseX, mouseY);
  e5.update(mouseX, mouseY);

  e1.display();
  e2.display();
  e3.display();
  e4.display();
  e5.display();
}

class Eye 
{
  int ex, ey;
  int size;
  float angle = 0.0;
  
  Eye(int x, int y, int s) {
    ex = x;
    ey = y;
    size = s;
 }

  void update(int mx, int my) {
    angle = atan2(my-ey, mx-ex);
  }
  
  void display() {
    pushMatrix();
    translate(ex, ey);
    fill(255);
    ellipse(0, 0, size, size);
    rotate(angle);
    fill(153);
    ellipse(size/4, 0, size/2, size/2);
    popMatrix();
  }
}

Notice that there are 5 'Eye' variables: e1, e2, e3, e4, e5, which are all instanced from the Eye object. We haven't yet learned how to build our own objects, so don't worry about the syntax for now, just see what you can create by experimenting.

Characters made with Code

We've been coding our own expressive characters with code. Here are some examples of that you can use for reference in your own projects.

Processing Monsters

http://www.rmx.cz/monsters/

From the author:

These monsters are result of my effort to learn Processing and encourage others
to do so by showing the source code. Also, at the end, my plan is to do a short music reactive video using these monsters (UPDATE: The video will happen (sooner or later), I've just been really busy last couple of months). So if you feel like you can make one too and be part of it, rules are simple: Strictly black and white + mouse reactive.

Love Bytes

http://universaleverything.com/#/UE205

Generative creatures created as an identity design for the LoveBytes 2007 Digital Art Festival in the UK

From the project:

Universal Everything's Matt Pyke applied generative principals to create a 'touchable' identity, definiting simple parameters within which the design could mutate: colour, hairtype, weight, 'sex', etc. Programmed Karsten Schmidt built a Processing application that generated more than 20,000 characters as Photoshop Files, which were digitally printed to make 20,000 different postcards.

Generative Patterns

Generative book covers for faberfinds.co.uk - an on-demand print service for classic out-of-print books:

Each book cover is unique and generated from parameters in software.

Some other interactive characters created with code

Flying Spaghetti Monster
Bunch of Eyes
Monster 03 (BLAAH)
Organs without Body
Petes Monster v1
Face Excerces
Drawing Chairs with Parameters

Other Programmatic Design

Vectorpark is not created in Processing, it's created in Flash (ActionScript) but the same code principals apply and are very inspiring: http://vectorpark.com/

Other creative code references

http://openprocessing.org
Open Processing is a website that allows you to log in and upload/share the source code for your visual projects. There are a lot of random, expressive ideas people have made from which you can glean for your own projects.

http://workshop.evolutionzone.com/
Workshop.evolutionzone is an aggregate of processing related content. There's some very interesting projects, tutorials, and techniques you can peruse through.

Any other websites you've found that are useful for designing characters with code? Post them in the comments!

Inspiration: Toby Shelton's blog

I haven't really been keeping up with posting a lot of links this semester. Lots of good stuff out there on the web, but I've been preoccupied with other things. Sorry for the lull in posting.

Just in case you haven't discovered it for yourself yet I want to point everyone towards Toby Shelton's relatively new blog "Stuff I Did (when I wasn't doing other Stuff)"

Check out the great examples of storyboards and model sheets on Shelton's blog:

(amazing selection of How To Train Your Dragon storyboards)

Drawing tips on things like hands (can never have enough of these reference sheets) -

Model sheets:

(click any image to enlarge)

The above images are just a small sampling to whet your appetite. Go check out Toby Shelton's blog . Add to your bookmarks. Check back often.

Face Functions

void setup() {
  size(400, 400); 
  smooth();
  strokeWeight(6);
}

void draw() {
  background(120);
  face( width/2, height/2, 160 );
}

void face( float x, float y, float size ) {
  fill(255);
  stroke(0);
  ellipse(x, y, size, size);
  eye( x - 50,  y, 20 );
  eye( x + 50,  y, 60 );
  for (int i = 0; i < 18; i+=2) {
    hair( x + i*3 - 30, y - 50, 50, i * 0.8 );
  }
} 

void hair(float x, float y, float len, float craziness )
{
   stroke(198, 90, 6);
   beginShape();
   vertex(x, y);
   vertex(x + craziness, y - len);
   endShape();  
}

void eye(float x, float y, float eyeball_size) {
  fill(255, 245, 180);
  ellipse(x, y, eyeball_size, eyeball_size);
  fill(0);
  ellipse(x, y, 4, 4);
}

Loops and Introduction to Functions

Today we are going over loops and a brief introduction to functional programming.

Loops are the main way of iterating over code. There are various types of loops, but the most complex (and possibly the most useful) is the 'for' loop construct.

for ( int i = 0; i < 10; i++) {
   // do something with variable 'i'
}

Embedded for loops allow us to iterate over two dimensions of information

for (int x = 0; x < 10; x++) {
   for (int y = 0; y < 10; y++) {
      // do something with x and y
   } 
}

For more examples, see:http://www.processing.org/learning/basics/iteration.html http://www.processing.org/learning/basics/embeddediteration.htmlIn Processing, we are used to calling functions, such as line(), size(), draw(). We will start experimenting with writing our own functions today. Design a character (on paper) that will respond to the mouse clicking and movement. The simplest place to start will be the eyes. Plan on having the eyes respond to the mouseX and mouseY, and maybe have the character blink when you click the mouse button. Be sure to use variables in your character design, and we will explore how to parametrize our character function on Wednesday. Character template:

void setup() {
   size(640, 480);
}

void draw() {
   background(255);
   myCharacter(); // draw your character
}

void myCharacter() {
   // draw character here
}

The Thief & the Cobler - Layout tests and Pencil tests

Rare behind-the-scenes look at raw pencil tests and camera layout tests.

Pencil tests of Zig-Zag (and early version of Zig-Zag pencil test at the end by Art Babbitt) --

Same set of scenes in finished form:

NOCTURNA [English] Part 1 of 8

Part 1 of 8 . See it while you can.

Open Source Philosophy

Revolution OS

An Open Source Philosophy:
- Work with and within the open source community
- Use existing open source code whenever possible
- Give others encouragement and credit when they offer help
- Be open to helping others and to being helped

Some interesting open source projects:
Ubuntu
Processing
Cinder
OpenFrameworks
SuperCollider
ChucK
PHP
Python
Ruby
Mozilla
Webkit
OpenOffice
Apache
Android for Developers

Websites:
wordpress
opensource.org
GPL

Version Control Tools and Project Hosting:
github.com
code.google.com
sourceforge.net

Assignments for next Monday. Pick one:
- Research an open source project to briefly present to the class. What makes the project special? How long has the project been around? What languages are used in the project?
- Research an inspiring project/program/game/artwork that was created with open source software and/or philosophies.

Variables, Data types, Operators, and Value Assignments

Today we learned about different data-types and variables in Processing.

Data Types

The following data types each represent unique ways of storing data in your programs.

Integer
Float
String
Char
Boolean
Color

Debugging / Output

// print information to the console
println("Text printed to the console");

Processing Exercises and Websites

learningprocessing.com
openprocessing.org

Exercises
1. Get current color from an image under mouse, and assign it to a variable that you can use.

2. Find an abstract image or piece of art that you find interesting. Re-create the image in code with shapes, lines, and color.

Introduction to Processing

Our first day in Open Source entailed a brief introduction to the Processing language and IDE (Integrated Development Environment). We learned how to set the scale of our app, the coordinate system, commenting, and basic shape functions.

You can download Processing yourself from processing.org. Remember you can type Command-R to run your app instead of clicking 'run' with the mouse.

Setting the App Size

// this will set our application to be 
// 600 pixels wide by 400 pixels high
size(600, 400);

Commenting Code
Any content within comment will not be read when you compile your code.

// This is an inline comment.

/*
    This is a block comment.
*/

Basic Shapes
Shapes take multiple parameters. Check out the Processing reference for more information.

// x, y
point(23, 34)

// x, y, width, height, start, stop
arc(45, 35, 50, 50, 0, PI/2);

// x, y, width, height
ellipse(56, 46, 55, 55);

// x1, y1, x2, y1
line(30, 20, 85, 20);

// x1, y1, x2, y2, x3, y3, x4, y4
quad(38, 31, 86, 20, 69, 63, 30, 76);

// x, y, width, height
rect(30, 20, 55, 55);

// x1, y1, x2, y2, x3, y3
triangle(30, 75, 58, 20, 86, 75);

Grayscale Colors, Strokes, and Fills

background(0); // sets the background to black
stroke(255); // sets the stroke to white
strokeWidth(10); // sets the stroke width to 10
fill(128); // sets the fill to a medium gray

... and More
We briefly touched on Variables and Data Types, which we will be studying in depth during the next class.

Welcome to Open Source!

The BAVC Digital Pathways Open Source class focuses on building a strong grasp of open source programming in order to create interactive visual applications. Participants will build upon their knowledge to code projects from scratch in ways that address open technologies and approaches. Students will create their own personal apps, as well as code in a group context, starting with the Processing framework. Within this class, students will learn techniques that are applicable to all computer programming, giving them the confidence to explore other languages easily on a multitude of platforms.

Class Details:
Instructor: Gabriel Dunne
Teaching Asst: Joel Buchheim-Moore
Time: M/W 4:30-7:30
Location: Blue Room (BAVC)
Student Survey Link: http://www.surveymonkey.com/s/9V2L35B

Sister blog - CHARACTER DESIGN NOTES

Another of our AAU Online instructors, the fabulous Jennifer Gwynne Oliver, has started up a blog for her Character Design & Drawing for Animation classes (ANM 364 and ANM 633).

Jennifer has already posted some great examples and will be updating it every few days, so bookmark it and check back often:

Academy of Art CHARACTER DESIGN NOTES blog

Hello World

>> BAVC Open Source Blog
>> First Post:
>> Hello World!

"The Monkey and the Elephant" by Boris Maras

The Monkey and the Elephant by Boris Maras, Sheridan College 2010.

He animated this in 2 months.

From Boris Maras's blog:

"Keeping my film rough was a big decision. Amanda and I were both considering cleaning up and colouring our films, but we would have had to rush the animation so much and we really wanted to learn as much as we could about animation. Keeping them this way, I think we learned a lot about our limits and we have a way better idea for how approach a short film now.
The idea for my film was pretty different up until February, the characters were pretty much the same but the situation they were in was different. It was risky because I had to throw away the animation I had already done and around 25-30 layouts, but I think I made the right decision for what I want to pursue.

I started animating around the middle of February and animated up until our deadline of April 19th. It was the craziest 2 months of my life but I'm really happy with the amount that I learned during the process of making my film and hope I can make another one soon."

"Slim Pickings, Fat Chances" by David de Rooij and Jelle Brunt

(cross-posting this from my other blog "Animation Grad Films" which showcases animated shorts made by students at various art schools around the world)

Slim Pickings Fat Chances is a student film by David de Rooij and Jelle Brunt from the Willem de Kooning Academy in the Netherlands.

Official film website: SlimPickings.nl
Filmmaker website: Jelle Brunt
Filmmaker website: David de Rooij

2010 Annecy shorts from the Gobelins School

http://www.gobelins.fr/galerie/animation/

Another great crop of student films from the Gobelins School in Paris , made for the 2010 Annecy Animation Festival . All are 1:00 minute or less . Shows that you can do a lot in one minute !

I love the fact that besides the solid animation and design work that these films put a great deal of emphasis on the cinematography . These films are built on a solid foundation of classical animation, but with a modern sensibility in terms of the camera work.

British Animated Ads of the 80's

YouTube has a number of animated commercials by Richard Williams, Oscar Grillo, Richard Purdum, Eric Goldberg, and other luminaries of the British animation scene.

Also check out Garret Gilchrist's The Thief Archive channel on YouTube for more British commercials from the 70's and 80's.

Klacto Animation (Oscar Grillo and Ted Rockley) "Sinatra 20 Golden Greats" advert -

Klacto Animation (Oscar Grillo and Ted Rockley) "Heinz Baked Beans Lighthouse" ad.
Designed and directed by Oscar Grillo, Animated by Eric Goldberg, Backgrounds by Neil Cambell Ross.

Pizazz Pictures (Eric Goldberg) "Rolos" animated by Eric Goldberg -

Richard Willliams Animation . "Jovan Sex Appeal" ad , animated by Richard Williams, BGs by Rebecca Mills.

Richard Williams Animation. "Listerine" ad , animated (I think) by Russell Hall -

Richard Williams Animation . "Limara Perfume" ad. Not sure who animated. Maybe Eric Goldberg? -

Passion Pictures . "Cadbury Creme Eggs" advert. Animated by Chuck Gammage. -

Richard Purdum Animation . "Tate Gallery Liverpool - Modern Art" . Animated by Richard Purdum -

Kaj Pindal : Laugh Lines

Laugh Lines is a film portrait of animator Kaj Pindal. He is seen at work creating zany cartoon characters, teaching students of animation, and at home enjoying another of his creations--a full-size streetcar that tours his backyard. The laughter in Pindal's life is evident in this delightful film biography.

Palm Springs International ShortFest signal film by MAKE

Via CartoonBrew.

Minneapolis-based studio MAKE created this animated signal film for the forthcoming Palm Springs International ShortFest. Beautiful design and animation , with a well-crafted story told with very economical cutting in under a minute. (students take note) ---

Credits:

MAKE Producer:
Danny Robashkin

Director/Lead Animator:
Andrew Chesworth

Animation Production Team:
Justin Weber
Aaron Quist
Alec Mueller
Jordan Hill
Ben Bury
Niklas Norman
Joe Kim

Voices:
John Olive
Elise Langer
Nicholas Mrozinski

Music:
Steve Horner - Horner Music

-------

Here's another piece by MAKE. A very timely PSA . And again , great animation and design all the way around , aside from the very timely message:

Sylvain Chomet interview

Sylvain Chomet, director of Belleville Rendez-Vous and now The Illusionist. Photograph: Paul Cooper

Sylvain Chomet talks about his new film "The Illusionist" -

http://www.guardian.co.uk/film/2010/jun/10/sylvain-chomet-belleville-rendezvous-illusionist

The biggest problem [in making the film] was finding the animators. Like the music-hall acts in the film, animators had become convinced by Hollywood that their time had passed.

"A lot of animators, basically people who can draw, got scared by these wankers from Disney saying that 2D animation is dead, that it was only going to be 3D and Pixar from now on. It is just typical shit by people in ties who don't know what they are talking about. Are they saying that Aardman is dead, too, then? I mean how stupid are these people? Saying 2D is dead is like saying that a car race is the future of the Tour de France."

"We had trouble because the fantastic animators we found had got really stressed because they thought after our film there was not going to be any 2D any more. Some were driving buses or retraining. People really had been made to believe that the end had come. The truth is that animation is always mixing things up: pen and paper, stop motion, puppets, 3D. Suddenly this bizarre competition has been created. What it is, one more time, is this American reflex to kill off the competition, to say that you can only do it one way and destroy everything else that went before. The whole society is like that. They destroy what they have to build something new. They end up with no roots to draw on, nothing to compare their work with to see if it is good or not. American culture is in real danger of starving itself to death. You just have to see what Hollywood is producing to see how narrow it is getting."

Sandro Cleuzo's blog

The brilliant animator Sandro Cleuzo has a great animation blog which you should definitely bookmark and check frequently.

Sandro is generously sharing his collection of Milt Kahl drawings , with a weekly "Milt Kahl Day" on his blog.

Some samples (click images to view larger) -

*as Sandro says about the above drawing:

"This particular drawing is just full of great things to study. Composition, staging, silhouette, design, appeal, you name it, it's there."

(And we could say that about almost any Milt Kahl drawing)

Wow, be sure to click on this Wart pose sheet from 'The Sword in the Stone' to view it larger. This is the stuff to print out and study . Put it on the walls around your drawing board to inspire you.

There is so much great stuff over on Sandro's blog. Check it out.

Storyboarding by Sherm Cohen

The ever-resourceful Sherm Cohen is posting a series on Storyboarding:

Check out Sherm's other videos:

Storyboarding Commentary Series

While you're at it buy Sherm's full DVD on "Learn How to Storyboard." (click link)