CharToon Faces for the Web

CharToon Faces for the Web

Zsofi Ruttkay, Han Noot, Bèhr de Ruiter, Paul ten Hagen
CWI, Amsterdam, The Netherlands
{Zsofia.Ruttkay, Han.Noot,, Paul.ten.Hagen}


There is a growing interest in applying humanoid, expressive characters in computer systems to help the user. There is a big variety for such 'apprentices' in design (3d/2d, full body/partial character, human or not, more or less realistic, generic/personal) and in the role they play (representing the system or individual users e.g. in chatrooms). It has been proven that expressive (silent or talking) faces do increase the effectiveness of communication and make the system more appealing, especially for non-professional users.

Figure 1: CharToon faces designed especially for Web applications.

Non-realistic, 2d cartoon faces are not only sufficient for communicational tasks, but have certain advantages: they require limited resources and are aesthetically appealing. Such interfaces are beneficial for a majority of Web applications, because of several reasons: (1) large number of occasional users; (2) many multi-user systems where (past/potential/current) participants should be identified quickly; (3) huge information systems, usually lacking a qualitative user interface.

There has been several different approaches in the past years to provide avatars on the Web, with the common characteristics of slow download and/or extra plug-in needed, which have hindered the applicability of animated faces on the Web.

In order to overcome these drawbacks, we have developed CharToon, a system in Java, with which one can design faces and animations, and then play (ready-made or on-the-fly generated) animations, eventually also real-time on the Web by using only a standard browser. CharToon is dedicated for facial designs, but can be used to make other animations too.

The CharToon System

CharToon consists of 3 components, which exchange ascii data (scripts) with each other and possibly with other programs outside CharToon.
Face Editor is a 2 1/2d drawing program for defining the structure, the geometry, the colours and the potential changes (in shape, position, size and visibility) of the features of a face. With Face Editor one produces vector-based graphics extended with so-called movable control points.
Animation Editor is an interactive 'animation composing' program, to define the time-behaviour of animation parameters (coordinates of control points, scale,...) of a drawing, provided by Face Editor. Animations can be saved as a script (for later re-use), or a movie script can be generated.
Face Player actually generates the frames of an animation, on the basis of the animation parameter values in the movie script file provided by Animation Editor and the face description file provided by Face Editor. The generated frames, if needed, can be used as input to make traditional movie files too.

Figure 2: Snapshots from animations made by CharToon.

How to show a face on the Web?

Animated faces can be shown on Web pages by:
  • including the Face Player Applet on the page and
  • providing the face and animation data (small ascii files) for the applet.

Besides downloading ready-made animations to drive Face Player, data generated on the fly (by some application or the user) can be used also, making it possible e.g. to generate lip-synch for audio or exhibit emotional expressions on faces representing users.


An applet version of Face Player, as well as technical details about CharToon and demo movies and snapshots of design are available from the CharToon home page [1]. CharToon has been used to 'put' 2d emotional expressions on 3d faces of VRML avatars [2].

Ongoing work

  • Extending CharToon with mechanism to handle animations on a higher level.
  • Providing 'ready-to-use' feature and expression libraries for CharToon.
  • Support for lip-sync.


  1. CharToon Home Page(1999),
  2. Elians, A., Van Ballegooij, A. (2000) Avatars with expressions in VRML worlds,