Designing Animations and Games - A Creative Introduction to Programming

About flying Elephants, Dogs, Cats and Ideas!

Introduction. 1

Didactical Framework. 1

Scratch. 2

About this lesson example. 3

Educational Objectives. 3

Target group. 3

A Creative Introduction to Programming with Scratch. 4

Introduction to the programming environment 4

Loops, Making of Animations/ Films. 5

Algorithms and reacting to events: Decisions. 7

Interactivity: Reacting to user-input 7

Methods and Broadcasts. 9

Variables. 10

Possible continuation of the lessons: 12

References. 12

 

Introduction

 

How should programming be introduced? This question is raised in the context of software development as a central issue of computer science classes in schools over and over again. But not only schools, also universities struggle in preparing students a smooth way to get into the field of computer science. Often these introduction courses and topics are found to the cause for computer science being seen as hard, mechanistic or even uninteresting or discouraging (cp. Bergin, 2005, Curzon, 1998, Mamone, 1992, Rich et al., 2004, Tharp, 1981, Feldgen, 2003 and others).

But this doesn’t necessarily need to be that way: The chance to develop software using a programming language can nicely demonstrate that computer systems can be shaped.

For the realization of this lesson example that is motivating and encouraging for the students and at the same time allows to learn about computer science close to the subject, the “criteria for creative computer science lessons” where regarded and applied (cp. Romeike 2007b).

Didactical Framework

Criteria for creative computer science lessons

Reflecting the big potential of computer science lessons to foster creativity (cp. Romeike 2007a), which in return can have positive effects on students’ motivation and task achievement, criteria have been developed that should be regarded for creative computer science lessons (Romeike 2007b). They reflect and combine general pedagogical principles that are essential and beneficial for creative practices in CS education.  In addition they consider typical tasks and principles that are common in CS:

 

Requirements for the subject:

 

Requirements for tasks:

 

Student oriented requirements:

Allowing of

 

Requirements for the teaching environment:

 

More didactical principles:

Discovery learning, experimental learning, Learning by Design, Constructionism (cp. Papert 1980)

 

Suggestions for the lessons:

Scratch

The visual programming (mini) language Scratch was originally designed for young students to develop 21st century skills. It allows creating animations, games and other programs by “clicking together” programming constructs represented as building blocks. Nevertheless, due to its intuitive appearance and usability it is used in computer club houses, high schools and even in introductory programming college courses. We chose Scratch because it emphasizes practical learning of fundamental CS concepts and at the same time supports the idea of fostering creativity in CS classes. Mini languages are said to provide an insight into programming and teach algorithmic thinking for general computer science in an intuitive, simple but powerful way. Thus Scratch meets the needs for the intended purpose.

 

About this lesson example

Published lesson teaching units can have different goals:

 

This lesson examples aims for the last three points: About programming plenty of publications have been published and the reader is probably more then familiar with the concepts of programming.

I would like to show a way how applying the criteria for creative computer science lessons the students are introduced to programming in an exploratory and discovery way with lots of joy about the subject – Computer Science is fun! This is how this lesson example was perceived by the students when it was approved and evaluated in an 11th class of a German high-school (with about 16 year old students).

Educational Objectives,:

 

o       basic understanding of programming

o       Algorithms:

o       Basic concepts of programming

o       Input and output of data

o       Arithmetic operations and comparison operators

o       Representation of algorithms as Scratch blocks

o       Object, message, attributes, methods

o       Reading and analyzing programs

o       Modifying and extending of programs

o       Designing, implementing and testing of programs

o       Idea generation and problem management

Target group:

The primary target of the developers of Scratch was basically aiming for children. Nevertheless, Scratch due to its intuitive approach is used in high-school and even in introductory programming courses in colleges. Not only because of this, also because of the openness of the tasks and time this teaching example can be used as well in secondary I as well as secondary II.     Last but not least a lesson example can only provide ideas which need to be adapted to the particular learning group and situation.

A Creative Introduction to Programming with Scratch

In the following first an outline of every lesson will be presented. Afterward the experiences are described and student results presented.

 

Introduction to the programming environment, fundamental functions and the Scratch Help-Files

1.                                  Doing the introduction-tutorial together with the students:
Using and moving of Objects.
Blocks: Move, play drum, say, think and background
Limiting categories  to Motion, Control, Looks, Sound

1.                                  Presenting an example for an animation film
Assignment: Design a short animation film. Use blocks from the above mentioned categories.

2.                                  Presenting students’ films, students explain used blocks and strategies

 

 

Remaining time for beginning this new lecture: 1 hour (45 minutes). The students just finished a lecture about databases and wrote an examination about it.

 

The mood of the class gets noticeable better as we are now getting to the “core” of computer science: Starting to develop programs ourselves.

With the step-by-step introduction the students got familiar with the fundamentals of Scratch. Necessary functions and the help system were explored, explained and discussed and sprites were illustrated with their attributes in a class diagram.

The first programming concept “sequence” was introduced and a short animation film shown.

Assignment for the class: Design a short animation film. After 20 minutes every student or group of students managed to finish their first short film.

I demonstrated how the movie can be put online, which some students did right away with their lesson results

 

A couple of days later I astonished notice students of another (advanced!) CS class of the school playing with a Scratch game online. One of my students had quickly designed a game in Scratch and showed it around! As a result he was now asked by the other teachers to explain Scratch and his game in the other course – other courses are switching to Scratch!

 

Loops, Making of Animations/ Films

1.                                  Objects

2.                                  Sequences with blocks, loops

3.                                  Storyboard

4.                                  Making an animation film

5.                                  Upload of the films to the Scratch-Website

6.                                  Algorithms and their characteristics

Textfeld: SPRITE
x-Position
y-Position
direction
size
actualCostume
script 1
script 2
…

On the blackboard:

Objects (Sprites) have attributes and methods (presentation of the class diagram on the blackboard).

Common attributes are: x, y, direction, actualCostume, size in percent (possibly rotation type what is to be changed in the IDE)

Methods are put made in the script area by putting together blocks.

The arrangement of several blocks after another is called a sequence.

Sometimes a block or a sequence shall be executed several times: Therefore loops can be used (Demonstration of loops).

 

Assignment of the day: Design and implement a longer animated film.

As an example the film ”Polarbear School“ is shown to the students.

Together with the students the following findings are discussed:

  • Several sprites are used.
  • Actions are arranged by using pauses (“wait”)

 

For the design of a movie it is helpful to write the actions of the actors (sprites) in a storyboard:

A storyboard is a visual representation of the content and the proceedings of a movie. It serves as a draft for the implementation of a movie. All actions are displayed in a timeline.

 

Together now the storyboard for the example film is gathered at the blackboard. Afterwards the students get the following assignment:

 

Design and realize an animation film to a topic of your choice.

First think about which sprites shall be used in the film and which action shall take place.

Once you are done use the “share” button to put your movie online.

Use your own ideas for the film, e.g. a scence of your favourite movie, your school day or a visit in the zoo. But you also can use other topics.

 

In the last 20 minutes the term algorithm and its characteristics are introduced. The students shall investigate if their animated film is an algorithm or not.

 

 

 

 

 

After presenting their results from last week the students now really want to continue working with Scratch. But before we repeated fundamental concepts (a few students were absent before): Sprites as objects with their attributes and the programming concept sequence. Then the new concept loop (which already has been used by a few students) is introduced.

Now the task is to create an animated movie. As a foundation for doing so storyboards were introduced. Storyboards are an outline of the film where sprites and their actions are represented on a timeline. It was motivating to the students to show an example project (Polarbear School) which demonstrated different possibilities to use sprites and backgrounds.

Finally we repeated how the students can register to the Scratch website and upload projects. Now the students really wanted to get started.

 

Because the students needed more time for experimentation and getting to know the programming environment this lesson took 3 hours (3x 45 min). Students who did not manage to finish their movie wanted to finish it at home. In the following week the results would be presented.

 

Within the last 30 minutes the topic “algorithms” should have been brought up. This did not happen due to the aforementioned reason. The students instead got the assignment for homework to read a working sheet about what are algorithms. Also they were asked to evaluate their project and decide if it is an algorithm.

 

Algorithms and reacting to events: Decisions

 

1.                                  Presentation of the animation films of the students by using the uploaded versions at the Scratch-Website

2.                                  Discussing characteristics of algorithms and evaluating these at (students) animation film
Finding: A film is not an algorithm because an algorithm solves a class of problems.
Other characteristics of algorithms are satisfied.

3.                                  Introduction of the block “if”
Painting of a sprite “ball”. Writing a script that lets it fly over the stage and bounce on the edges: Forever-Loop, Decision is done with “if touching edge” and the block (then) “if on edge, bounce”.
Note: Here a double inquiry about “if on edge” happens. The block used can be applied even without the decision-block. But for gaining understanding of the concept decision this way works better.
At the beginning the direction is set by chance.

4.                                  Assignment: Include more balls or other flying objects that also bounce from each other.

 

Interactivity: Reacting to user-input

Mini-Project: Animate your name in a way that the letters react to the mouse pointer.

Question: Who has discovered ways yet for how it is possible to interact with a Scratch program? Which ways exist for input and output of data?

à Presentation of findings by several students (and can be expected that several students already tried out various blocks and can well answer to the questions)

 

Input:

  • When x key pressed do – reacting to input: within a script or as start of a script
  • When mouse down – reacting to input: within a script
  • When SpriteX clicked – reacting to input: start of a script
  • x and y values of the mouse

 

Output:

  • Display of the sprites on screen
  • Say
  • Think
  • Sound

 

Now several examples of animated names are presented.

The students get the following assignment:

Animate your name(s) in a way that the letters react to

a)     the keypress of a letter and

b)     mouse clicks

 

Homework: Find five examples for actions in everyday life that can be solved with an algorithm (e.g. adding 2 numbers). Find also five examples that can not be described by an algorithm (e.g. writing of a job application letter).

 

 

Some students by now have installed Scratch at their home computers.

While the students at the beginning were still hesitating to present their animation films, soon they started to enjoy showing what they have done. Even more film should have been shown then there was time for.

The creation of the jumping balls worked well – all students did this task well. Who was faster implemented three or more balls. In parallel the projects were uploaded to the Scratch Website.

 

  

 

The students did well in gathering the possibilities of interactions offered by Scratch. The blocks then were presented and described by the students.

The presentation of the name animations as well led to interesting ideas and inspirations to all. Even if most of the students did well in animating their name, some of the animations did not use the interactive possibilities – again these were just films. With those students again was talked about how they can make objects react to events.

For the animation of the balls 20-30 minutes were sufficient. Animating the names (45 min) could have been a bit longer. But the tight schedule had also had an advantage: The students still were very interested in the new ideas and concepts and participated very well in the mini-projects. Furthermore they really started to get creative; in the animations and in the algorithms.

 

   

 

 

 

The content of the following lesson are handed to the students as work sheets. They have now almost 3 hours (3 x 45min) to explore, understand and implement the presented concepts with the demonstrated examples and own programs.

 


Methods and Broadcasts

Download: Work sheet | Example


Variables

 

Download: Work sheet | Example

 

This time I started the lesson with an oral examination about algorithms, control structures and the homework. Now the class really wanted to continue working with Scratch. Before doing so the results of last week were presented by the students. After each program the programmer received a short applause. Good ideas have been presented and rewarded. Finally we talked about the plans for the day and the following week: 2 work sheets with new concepts, explanations and tasks as well as a game project. With receiving the hand outs the students started right away.

Using broadcasts was not problematic at all. If someone had questions generally the students were helping each other themselves or used the help system. A few students even have used variables and broadcasts in their projects before. The dance groups were created in various ways. Partly the dance group was implemented in an interactive way, so that through a mouse click broadcasts were sent triggering actions. Partly the methods were triggered from the “trainer”. This way there are no interactions possible. With these students I talked about the program and how they could make interactions possible (but what they did not have to do). But this made sure that they understood the principle of algorithms (not always the same actions).

Also applying variables was not problematic at all. Most of the students started at the end of the third lesson today already with their own game project.

When the lesson was over I noticed another effect of engaging the students in independent creative project work in the lesson: When I finished the last of the three lesson hours and it was ringing for the break the students did not run – as often – quickly outside. Just as if nothing had happened they stayed and finished realizing the ideas they were working on. Then slowly one by one was leaving the room. The interest seems to be raised and to be consistent.

 

Project:

Until here fundamental concepts of programming were taught. Now the students shall apply their knowledge in a small project:

 

Assignment:

Create a game in Scratch by making use of all learned concepts (various objects, broadcasts, loops, decisions, variables, ...).

 

For inspiration think about games like Mario Brothers, Pong, Chicken Shoot, car racing, Memory etc.

 

 

The last three lessons again were started with the presentation of last week’s results by the students. After they exchanged ideas and strategies the students now really wanted to continue working at their projects. Unfortunately only a small project was possible – as only 1.5 hours were left. The last hour was reserved for a test about algorithms and programming. But every student or student group managed to finish a small game.

The 45-minute examination consisted of a theoretical and a practical part. The practical part had a problem solving and a free creative task. All have been solved  well or very well by the students. So far I never have received so good results when teaching an introduction to programming.

 

    

 

Possible continuation of the lessons:

 

More project ideas and topics:

         interactive music

         painting/drawing with Scratch (e.g. turtle graphics)

         simulations

 

 

References

Bergin, S., Reilly, R. (2005) The Influence of Motivation and Comfort-Level on Learning to Program. In Proceedings of the PPIG 17. J. G. In P. Romero, E. Acosta Chaparro & S. Bryant. University of Sussex, Brighton UK. 293-304.

Curzon, P., Rix, J. (1998) Why do Students take Programming Modules? In Proceedings of the 6th an-nual conference on the teaching and computing and the 3rd annual conference on integratingtechnology into CSE: Changing the delivery of Computer Science Education. ITICSE ’98. Dublin, Ireland. 59-63.

Feldgen, M., Clua, O. (2003) New motivations are required for freshman introductory programming. In Proceedings of the 33rd ASSE/IEEE Frontiers in Education Conference. Boulder. T3C-T24.

Kohl, L., Romeike, R (2006) Aktueller Stand der Objektorientierung bei  Informatiklehrerinnen und -lehrern, HDI 2006-2. GI-Fachtagung "Hochschuldidaktik der Informatik", in: Hochschuldidaktik der Informatik (P. Forbrig, G. Siegel, M. Schneider, eds.), 63-75

Mamone, S. (1992) Empirical Study of Motivation in an Entry Level Programming Course. ACM SIGPLAN Notices, 27, 54-60.

Papert, S. (1980): Mindstorms : children, computers, and powerful ideas, Basic Books, New York.

Rich, L., Perry, H. and Guzdial, M. (2004). A CS1 course designed to address interests of women. In Proceedings of the 35th SIGCSE technical symposium on Computer science education, (eds), ACM Press, Norfolk, Virginia, USA, 190-194.

R. Romeike (2007a): Three drivers for creativity in computer science education. In: Benzie, D.; Iding, M. (eds.): Proceedings of IFIP-Conference on "Informatics, Mathematics and ICT: A golden triangle", June 27-29, 2007, Boston, USA. 

Romeike, R. (2007b): Kriterien kreativen Informatikunterrichts. In: Schubert, S. (Hrsg.): Didaktik der Informatik in Theorie und Praxis. INFOS 2007 – 12. GI-Fachtagung Informatik und Schule. Reihe ,,GI-Edition LNI – Lecture Notes in Informatics“, Band P-112. Bonn: Köllen Verlag, S. 57–68 .      

Tharp, A. L. (1981) Getting more oomph from programming exercises. SIGCSE Bull., 13, 91-95.       

                                                                                                                                                                   

 


page hit counter