B/S based 2DSketch system

Tao Peng Communication University of China,

Beijing, China wspt1986@cuc.edu.cn

Minyong Shi Communication University of China

Beijing, China myshi@cuc.edu.cn

Abstract—Computers are so important tools used in classroom. Yet most of them provide static slides in the project mode, which are not attractive to children, especially to the younger ones. This paper presents a 2D freehand sketching system. Unlike the traditional 2D animation tools, which are created by experts, it helps novices create a wide range of animations quickly. 2D coordinate input for generating strokes on a user-share like 2D canvas, which makes it possible that novice can sketch freehand in 2D space and make animations with no limitation. The system is based on B/S, which is possible for participants make animations together, especially for classroom teaching. A novel optimization points resampling enabled participants to transfer data much effectively. It also supports translation, rotation, scale and other important motions of sketching animation. The track based method made creating animations as easy as drawing. Teachers with this system could design and created their own animation quickly, and will have a good interaction with students.

Keywords-2DSketching; stroke; animation; informal user interface

I. INTRODUCTION In the 1970s, computer-aided has entered the classroom,

which brought great benefits to teachers and students. A number of tools have been widely used, such as Microsoft’s PowerPoint, Apple Keynote. These are considered to be the biggest innovation in the field of education. Most of them provide static slides in the project mode. Yet, teachers say that some students could not get the knowledge efficiently because of it. More and more researchers find the reason is that students could not get response from teacher, and think questions passively in the static mode. Further more, static slides in the project mode could not find way to attract to children, especially to the younger ones. So, if a teacher could make use of animation in the classroom, the situation will be better. First of all, animation can express rich, vivid and attractive contents event it is simple. Secondly, animation can make students participant in the classroom actively, teachers will have a good interaction with students.

In addition to teaching, animation has also been widely used in the field of prototyping, conceptual design, entertainment, communication and so on. Modern 2D animation tools are usually hard to learn to novice. The whole process must be done by a group of well-trained craftsmen who are familiar with the complicated software and have a lot of experience on computer animation work. Research into “easy” animation has produced many new tools and techniques in recent years. Some support specific tasks, such as studio-quality production [1, 2], classroom examples or exercises [3, 12]. Others have less specific tasks in mind [4, 5, 6, 7]. Unfortunately, no tool is fast enough for sketching ideas,

simple enough for novices, and powerful enough to handle a wide variety of tasks. Borrowing ideas from informal interfaces [9, 10] and demonstration based animation systems [11], we have developed an informal, 2Dsketch animation system. The system is based on browser and server mode that relies on local area network while still supporting a lot of participants work together. It is an easy learning tool for a freshman who has not much experience in making animation. 2DSketch animations are often rough, but they are quit useful in informal situations and as prototypes of formal animations.

II. RELATED WORK Scholars in the field of cognitive science, psychology and

education have made a lot of study on how animation can help users learn and understand and how to use animation effectively. Rieber in Brown University described a case of what animation can help with movement and trajectory learning and related concept. Tversky and others in the paper “Can it be facility” explained why some animations can not help communication effectively, and illustrated the importance of replay. These findings indicated that what kind of animation would be popular, many places are worthy of study and references.

Many researchers have tried to develop a useful sketch animation tools for years. The first sketch animation tools Baecker’s Genesys system. In recent years, the use of freehand drawing to generate 2D animation has become popular. Richard C. Davis and James A. Landy have did the research in the field of animation tools on the need of potential users. They proposed the most important of several operations on animation sketch and implemented a prototype system that can support their most important of several requirements proposed, but they ignored the simultaneous action. In addition, there are some more complex systems, such as TicTacToon, multi-level sketching tool presented by Fabian Di Fiore etc. Although these systems are helpful for animators to produce more complex and vivid animations, they are not easy to use for people who have little experience in making animations. In the field of education, there are some valuable systems, such as the system for mechanical education by Davis and mathematical formula system by LaViola. But these 2D animation system are all limited to specific areas. Freehand is also used in making 3D model and 3D animation. Teddy system presented by Igarashi etc. is able to generate 3D model by 2D strokes, and then they proposed the concept of space frame animation to generate 3D animation. It is a good choice to fictional characters, because it is not based on motion capture data. In contrast, Matthew Thorne by M. Thorne etc. is more suitable for controlling the character’s animation. Although the sketch has been widely

2012 International Conference on Computer Science and Electronics Engineering

978-0-7695-4647-6/12 $26.00 © 2012 IEEE

DOI 10.1109/ICCSEE.2012.22

265

used in 3D system, there are still lots of difficulties and few movements are supported.

III. SYSTEM DESCRIPTION The B/S based 2D freehand sketch system is for drawing

non-precise 2D sketching and producing sketching style animation. It uses 2D coordinates input for generating projective strokes on a user-shared canvas. The system is based on B/S, which is possible for participants make animations together, especially for classroom teaching. Teachers with this system could design and created their own animation quickly, and will have a good interaction with students.

Our system is bound to set canvas in 2D space which is a kind of controllable canvas on which strokes can be drawn freely, and lines will be projected onto the canvas, thus the information of lines can be stored in canvas. Different from the traditional canvas, we put the canvas onto the browser for more participants. Web browser being as a client, and we put the core function of the system into the server. So anyone who has a browser, he can communicate with each other.

Figure 1. System structure

The advantage of this model is that participant can operate anywhere without having to install any special software, as long as there is a computer with Internet access can use, zero client maintenance, expansion of the system is very easy. On the server, we have designed a lightweight server, this kind of

server is simple, low equipment requirements and can be packaged in one file. This means that we can put the server onto many platforms. After test proved that the server can be running on the iphone cell phone. In this system, the server’s responsibility is relatively simple, the first is client access management, the second follows any client who transmits data and broadcasts the data to others. As a client, we put the canvas in the browser, the user’s interaction and animation production are carried out on the canvas. In the process of transmission, the data is based on two-dimensional coordinates of points as the basic element, a stroke as a transmission unit. In order to improve transmission efficiency, before the line in the server, it is resampled for reducing the amount of data being transmitted. So the server broadcasts the strokes are those have been resampled. For this reason, when a client receives a resampled stroke from the server, it will fit the stroke (figure 1).

A. Resampling The algorithm for resampling is based on a feature point

algorithm to extract less control points as possible, and the stroke must also be fitted as closed to the original input curve. Based on this demand, and by [12] in the revelation, we designed the following algorithm.

The first step is do introduce a C value to represent the cost of adding a feature point. C determines the approximation of the resampling characteristics line and the input line. If C is greater, the error is greater, the fewer of the number of resampling points. When C is equal to zero, the resampling algorithm will take all the points on the input line. The number C is given by programmer, or by users to adjust. Figure 2 shows the resampling results when different C values.

Figure 2. Resampling feature points

In figure2, green curve is user input, the original line has total of 201 vertices, the red line is the fitting line after resampling. From picture (a), C is too small, 17 resampling points, the fitting line is closed to the original line. C number is big in picture (b), 9 resampling points, and in (c) we get the maximum number of C, only 6 points. And then combine the distance error value D and C to determine how to resample feature points.

We call the combination value is E( i , j ), it stands for optimism resample program from ith point to jth point in the

266

input line. D is the distance error, it represents the distance error from all the points in the input line to resampling line. The error can be specified for square of the distance that all error points to the input line. C stands for the cost of adding a feature point. Suppose to insert a point k between ith point and jth point, using the formula to determine the location of the insertion and the value of E( i , j ).

E( i , j ) = min{ E( i , k ) + E( k , j ), D( i , j ) + C}, i < k < j

(1)

If the minimum value is E(i , k)+E(k , j), then in the line that from ith point to jth point, the minimum error trade off program will go through the k point. Or the best way is to connect ith and jth point, without adding anyother point. In fact, i always zero, starting from the second point, one by on, E(0, 1), E(0 , 2), E(0 , 3)… the results are stored in the ERROR table. The algorithm will enable the computation from O(N!) down to O(N3). The process is as follows:

1. Define an N×N dimensional array of pointers NOTES[n][n]. Each element in the array points to the ERROR struct. ERROR is used to store the weigh value E ( i, j).

2. Build up table N× N, using the following recursive function: GetError.

a. if Pi equals to Pj, then returns zero. else search for NOTES table.

b. if NOTE[i][j] dose exist, and then returns the value. or defines a new KNOT.

c. E( i , j ) = min{ E( i , k ) + E( k , j ), D( i , j ) + C }, i < k < j.

d. Form k = i to j, use function GetError to compute E( i , k )+ E( k , j ). If E ( i, j) > E( i , k )+ E( k , j ), E( i , j ) = E( i , k )+E( k , j ), then record E( i , j ) and k which is in NOTES[i][j], at last, return E( i , j ).

3. Build up ERROR table with step 2, from i = 1 to n GetError( E( 0 , i ) ).

4. Get E( 0 , n ) from table ERROR. And use function SetQueue to decide feature point and add to queue.

B. Fitting The purpose of this step is to have the resampling line

smooth, in order to approximate the original curves. In the system, we use the Catmull-Rom Splins. Catmull-Room Splins are very easy to calculate but also very powerful. Splines are a mathematical means of representing a curve, by specifying a series of points at intervals along the curve and defining a function that allows additional points within an interval to be calculated.

To calculate a point on the curve, two points on either side of the desired point are required, as shown in the figure 3. The point is specified by a value t that signifies the portion of the

distance between the two nearest control points.

Figure 3. Use Catmull-Room Spline to caculate a point on the curve

Given the control points P0, P1, P2, and P3, and the value t, the location of the point can be calculated as (assuming uniform spacing of control points):

[ 0 2 0 0 ] [P0]

[ -1 0 1 0 ] [P1]

Q(t) = 0.5 * (1, t, t2 ,t3) * [ 2 -5 4 -1 ] * [P2] (2)

[ -1 3 -3 1 ] [P3]

IV. WEB-BASED ANIMATION Key frames animation is familiar with other animation

software. In the 2D animation system, we adopt a method for generating animation that the motion path should be drawn first, and make objects attach themselves to the point of path, and then, by setting key frames to calculate the middle position of each frame where objects should be on the path (figure 4).

Figure 4. Construct animation

In seeking a way to make animation more accessible to novices, we have taken inspiration from previous work in informal sketching tools [7, 11, 15]. The great insight of these systems is that much of the complexity of conventional design tools comes from their focus on precise details. When these details can be ignored or deferred, design tool interfaces can be much simpler.

We keep focus on the problem of analyzing the content of each animation. Every animation tool provides a set of operations for specifying animation, and the complexity of a tool is determined by the number of operations and how the interface supports each one. Following the tradition of informal tools [9, 10], we wanted our interface to match users’ habit as closely as possible. We defined the following

267

animation operations. Translate, rotate and scale, they are the most common and simple operations. Set time, we can specify the speed and acceleration of a motion, rather than moving it at a constant speed. Add a motion on top of another, so that the new motion is relative to the old motion’s reference frame. Animate a line over time, as if traced by a pen. Physically simulate, move objects as in “real life.” Interpolate, Define the start and end states of a change and animate the transition between the two. Move Forward/Back, change the stacking order of objects, so objects that were covered up are now uncovered. Orient to path, translate an object while pointing it in the direction it is moving.

V. EXPERIMENTAL RESULTS B/S based 2DSketch is implemented in objective C and C.

The implementation makes heavy use of the IOS interface toolkit and we modified to use the WebSocket API. B/S based 2DSketch totals 67 classes with 28,000 lines of code, plus 7 classes with 3,900 lines of code added to API. Our system can create model on a iPad, iPhone or computer at interactive rates, user can draw objects and set object. User can also change the sketched style of stroke by selecting different stroke files.

We recruited 8 participants through a poster that called for people who are “interested in creating animation but have never done so.” Of these, one were discarded from our analysis because they could not complete the tasks in the time available. Of the remaining 7, four were men, and three were women. Nearly half were students, and the others worked as teachers.

In the experiment, one young boy drew a fish and let it move, Figure 5 shows the process of setting path for the fish.

Figure 5. Result picture

When asked what they liked or disliked about 2DSketch system, two participants said they liked using the pen, four commented that it was simple or easy to learn. However, two participants commented that 2DSketch system needed more tools for creating and editing precise graphics as in PowerPoint. When asked what they liked or disliked about PowerPoint, three participants said they liked PowerPoint’s similarity to tools they were familiar with, and four said they

liked the presence of precise graphical tools. On the other hand, four disliked the fact that PowerPoint felt complicated or “static”, two said it was time-consuming or tedious, and one said it was inflexible or too structured.

VI. CONCLUSIONS We have presented B/S based 2DSketch system, which is

an informal animation sketching system for novice animators. Our efforts to reduce the complexity of animation tools while supporting a wide range of tasks. The system is based on browser and server mode that relies on local area network while still supporting a lot of participants work together. And it allows tasks to be accomplished quickly and with little learning. This paper makes the following contributions:

The implementation of a novel tool, B/S based 2DSketch system, which helps novices quickly create 2D animations.

An optimization technique for resampling points in order to transfer data between clients and server more fast, simple, and effectively.

A laboratory experiment showing the benefits of B/S 2DSketch system over a formal animation tool for novices, including a reduced learning time and easy to use, and students and teacher can make animations together.

REFERENCES [1] Di Fiore, F. and Van Reeth, F. A Muti-Level Sketching Tool for ‘Pencil-

and-Paper’ Animation. In Proc. 2002 AAAI Spring Symposium on Sketch Understanding (2002), 32-36.

[2] Popovi . J., et al. Motion Sketching for Control of Rigid-body Simulations. ACM Trans. Graph. 22, 4 (2003), 1304-1054.

[3] Alvarado, C. and Davis, R. Resolving Ambiguities to Create a Natural Sketch Based Interface. In Proc. IJCAI '01, 1365-71.

[4] LaViola, J.J., and Zeleznik, R.C. MathPad²:A System for the Creation and Exploration of Mathematical Sketches. In Proc. SIGGRAPH '04, ACM Press (2004), 432-440.

[5] Moscovich, T., Animation Sketching: An Approach to Accessible Animation, Unpublished Master’s Thesis, C. S. Department, Brown University, 2001.

[6] Rogers, B. Living Ink: Implementation of a Prototype Sketching Language for Real Time Authoring of Animated Line Drawings. In Proc. Eurographics 2006 Workshop on Sketch-based Interfaces and Modeling (2006), 115-122.

[7] Takahashi, S., et al. A New Static Depiction and Input Technique for 2D Animation. In Proc. 2005 IEEE Symposium on Visual Languages & Human-Centric Computing, 296-98.

[8] Thorne, M., et al. Motion Doodles: An Interface for Sketching Character Motion. In Proc. SIGGRAPH '04, 424-431.

[9] Gross, M.D.and Do, E.Y. Ambiguous intentions: a paper-like interface for creative design. In Proc. UIST '96, 193-192.

[10] Landy, J.A. and Myers, B.A. Sketching Interfaces: Toward More Human Interface Design. IEEE Computer 34, 3 (2001), 56-64.

[11] Baecker, R. Picture-Driven Animation. In Proc. AFIPS Spring Joint Computer Conference, 34 (1969), 273-288.

[12] Michael Plass and Maureen Stone, Curve-Fitting with Piecewise Parametric Cubics[A], in Proc. SIGGRAPH 83[C], Detroit, July 25-29, 1983, pp. 229-236.

268