Other project suggestionsCS109 Programming ProjectsGraphical LCD ClockAnimated graphics

Animated graphics

In computer graphics and animation, classes and objects can be defined naturally. Graphic scenes usually consist of various objects that are visible and placed at a certain position in the scene. Properties and positions of the objects may change during an animation. We can model this by writing a class for each type of object, and creating an instance for each object in the scene.

As an example, here is a small animation showing a mother hen and its two chicks. (The original animation was made by Jeong-eun Yu and Geum-hyeon Song as a lab project in my CS101 course.)

The complete source is chicken.kt. Compile and run in the usual way:

$ ktc chicken.kt 
$ kt ChickenKt

Journey of Chicken animation

(Click on the image to see the animation in your web browser.)

If you look in the code, you will see that we define a class Chicken, which represents both the hen and the two chicks. It has an attribute selecting hen or chick, and parameters for the position. The method draw then draws the chicken onto the given canvas.

The animation consists of a loop. In each iteration we draw the background, all the animals, and possibly some text. Then we update the animation by changing the position of the animals, wait a short time, and continue with the next frame of the animation.

Since each chicken is fully defined in its class, drawing each frame simply needs to call the draw method of each animal on screen:

fun drawImage(g: Canvas, herd: List<Chicken>) {
  g.drawRectangle(0.0, 200.0, 1000.0, 150.0)
  g.drawCircle(100.0, 50.0, 40.0)
  for (chicken in herd)
Here we draw the light blue sky background, a light green rectangle for the ground, and an orange sun, before drawing the chicken.

Your task in this project is to come up with your own animation. Create a class for each type of object in your animation, with parameters that determine the object's position and look. Objects can change color, move their hands, etc., similar to the second chick flapping its wing.

Other project suggestionsCS109 Programming ProjectsGraphical LCD ClockAnimated graphics