TP-1

Programming Education Based on

Computer Graphics Computer Graphics AnimationAnimation

Yoshiaki Shindo, Hiroshi Yoshiaki Shindo, Hiroshi MatsudaMatsuda

Nippon Institute of Nippon Institute of Technology,Technology,JapanJapan

TP-2

Programming CourseProgramming Course

Elementary Programming Education

Event Driven Programming Education

Software Design Education

EP Course

ED Course

SD Course

TP-3Computer RoomComputer Room

Nippon Institute of Technology

Constructed by Japan Information Processing Service Co. Ltd.

Teacher’s CockpitStudent’s Workstation

TP-4

WinTK-1 EP Course

WinTK-2 WinTK-3

Graphics Program Training KitGraphics Program Training Kit

ED Course ED Course

TP-5

EP Course1. Understanding the Control Structure.2.Understanding the Procedure Call.3. Understanding the basic Data Structure.

ED Course1. Event-Driven Event-Driven Programming.Programming.22. . File AccessFile Access Programming. Programming.3.3. Image DataImage Data Processing. Processing.4.4.User Interface by using the Mouse User Interface by using the Mouse Operation.Operation.

Technical ItemsTechnical Items

TP-6

1. Motion of Geometric Animation or Photo Image scrolling may stimulate student’s stimulate student’s Interests and Creative SenseInterests and Creative Sense..

2 Students want to learn ….. How to program in Window Environment. ( Not in the Old-Fashioned Console mode. ) How to interface with Window system. About Relationship between Actual Application Software and their own programs.

3. Students want to feel Visually the Result of program execution.

Interests and Attractiveness

TP-7

GUI Window FrameworkWindow Paint Event

Handler

Mouse Event Handler

GMain( ) /* Entry Point*/{

Coding Area.

}Key Event Handler

Timer Event Handler

WinTK GUI-WinTK GUI-FrameworksFrameworks

Frameworks provide the Simple Coding Style just like a Console mode.

TP-8Program Reading Program Reading PracticePractice

1. . Read Read the C language source codes the C language source codes of theof the Training Kit Programs. Training Kit Programs.

2. . Re-write Re-write them according to the them according to the instructioninstruction by the teacher.( by the teacher.( Program Re-write PracticeProgram Re-write Practice ))

3. Write the . Write the Final Work ProgramFinal Work Program in in GUIGUI environment on the basis of the environment on the basis of the frameworks frameworks WinTK provides.WinTK provides.

TP-9

Program Re-write PracticeProgram Re-write Practice

•At first students read the source code carefully .

•Teacher shows the Visual Subject on the instruction screen by CG animation.

•Students have to work hard to modify or extend their program after repeated trial and error.

Teacher’s Instruction ScreenTeacher’s Instruction Screen

Student’s ScreenStudent’s Screen

TP-10

Practice1

Practice2

Program Re-write Practice

Example of

WinTK-1

Practice1

Practice2

WinTK-3

TP-11

Examples of the Final Work

TP-12

WinTK-4

SD Course

ContentsContents

3D Computer Graphics Animation Kit.3D Computer Graphics Animation Kit.OpenGLOpenGL Frameworks. Frameworks.Extended Graphics Library.Extended Graphics Library.Interactive modeling tool for 3D-shaped objectsInteractive modeling tool for 3D-shaped objects3D-shaped Virtual Animal Library 3D-shaped Virtual Animal Library Training Kit programs( 21 Programs ).Training Kit programs( 21 Programs ).

Aim of a lessonAim of a lesson

Software Design of Concurrent programmingSoftware Design of Concurrent programmingStructure of program modules.Structure of program modules.Design of user interface items.( menu,etc) Design of user interface items.( menu,etc)

Dragon Adventure

TP-13

OpenGL Frameworks

Extended CG Library PiasGL4 ( 258 API

Functions)

Interactive Modeling ToolPiasArtsit2000

Training Kit Programs Window Handler Mouse/Key Handler Timer Handler

Virtual Animal Library ( 30s )

WinTK-4 WinTK-4 ComponentsComponents

SD Course

WinTK Frameworks

Written by 3D-Script Language

TP-14

Camera Work Walking through.

Body Action

Dragon and Castle

Concurrent All Process

Practice Practice

Practice

Practice ofPractice of Concurrent Concurrent ProcessesProcesses

TP-15

Make a Motion Capture Tool by interactive user interface.

Practice of User Interface Practice of User Interface DesignDesign

SD Course

Apply a Motion Capture Data to the animation of Dragon’s Body Action.

Motion Capture File

Making of Motion Capture Making of Motion Capture ToolTool

TP-16

Examples of the Final Work

SD Course

TP-17 Ratio of understanding level of Repeat Block Repeat Block by usingby using whilewhile and and

forfor

A questionnaire survey of about 800 students.( in the past 5 years )

12

34

5

1999

1998

1997

1996

1995

0%

5%

10%

15%

20%

25%

30%

35%

40%

Ratio

UnderstandingLevel

Year1

23

4

5

1999

1998

1997

1996

1995

0%

5%

10%

15%

20%

25%

30%

35%

40%

Ratio

UnderstandingLevel

Year

Before the Practice

After the Practice

Well Well

TP-18 Ratio of understanding level of Conditional Block Conditional Block by usingby using if if and and

else else

A questionnaire survey of about 800 students.( in the past 5 years )

Before the Practice

After the Practice

12

34

5

1999

1998

1997

1996

1995

0%

5%

10%

15%

20%

25%

30%

35%

40%

Ratio

UnderstandingLevel

Year1

23

45

1999

1998

1997

1996

1995

0%

5%

10%

15%

20%

25%

30%

35%

40%

Ratio

UnderstandingLevel

Year

Well Well

TP-19 Ratio of understanding level of Procedure Call Procedure Call by usingby using function function andand return return

A questionnaire survey of about 800 students.( in the past 5 years )

Before the Practice

After the Practice

12

34

5

1999

1998

1997

1996

1995

0%

10%

20%

30%

40%

50%

60%

Ratio

UnderstandingLevel

Year1

23

45

1999

1998

1997

1996

1995

0%

10%

20%

30%

40%

50%

60%

Ratio

UnderstandingLevel

Year

Well Well

TP-20 Ratio of Questionnaire after this Practice

Impression of　Practice

1999

1998

1997

1996

1995

0

10

20

30

40

50

60

Ratio

Confidence ofProgramming

Year

Confidence of Programming

Well

StrictHard

Normal

Easy

1999

1998

1997

1996

1995

0

10

20

30

40

50

60

Ratio

Impression ofPractice

Year

TP-21Graduation Work of Animation Story Cyber Theater

“Thumbelina”

TP-22

ConclusionsConclusions•Most of students (85%) want to study by using Graphics Based Window Programming.

•Visual Subject by CG animation certainly stimulates the student’s Interests and Creative Sense.

• Although a questionnaire analysis would not be objectively, Our survey of Past 5 years shows that this practice ( Animation Programming ) facilitates the student’s learning and understanding.