Concepts / Graphics and Animation Examples

Graphics and Animation Examples

GrowingCircleAnimation.java, from Section 5.3 of the text, shows an animation of growing, semitransparent circles.

  • Programming

Starting From the Moving Picture

This article looks at a short animation example from Section 5.3 of the text. The example is a program called GrowingCircleAnimation.java, and when it runs it displays an animation of circles that grow over time. The circles are semitransparent, which means they are partly see-through.

The text presents this example as an animation first and a programming example second. That order is useful to keep in mind. Start by asking what appears on the screen, and only then ask how the program is organized to produce it. The source describes the example by its purpose, its visual behavior, and one dependency. It does not walk through the internal code, so this article stays with those three things and does not guess at details the source leaves out.

What Changes Frame by Frame

The defining feature of this example is that the circles change while the program runs. A single still picture of a circle cannot show growth. Growth is a change in a circle from one moment to the next, so the learner has to watch the sequence of moments to see it.

Animation of this kind is generally produced by repeating a short cycle: draw the current picture, pause briefly, then draw an updated picture. Each pass through the cycle is one frame. The source does not show the code that carries out this cycle, so treat the diagram below as the general mental model for how a moving picture is built from repeated steps, not as a literal trace of the file.

Draw current circleone framePause brieflywaitUpdate circle sizeslightly largerRedraw circlenext framethenthenthenrepeat
What happens on each frame, and how does repeating those steps make the circle appear to grow?

Each trip around the loop leaves the circle a little larger than before. Because the picture is redrawn many times in quick succession, the eye reads the series of slightly different pictures as one circle that grows. The growth is not a single event in the program. It is many small redraws that look continuous when watched together.

Reading Semitransparent Circles

Definition

Semitransparent means that a shape is partly see-through, so anything drawn beneath or overlapping it remains partly visible. In the animation, the circles are described as semitransparent, so the overlapping parts of the circles can still be seen through one another.

Semitransparency is a visual property of the circles. The source tells us the circles are semitransparent and that they grow over time. It does not say how transparency is set in the program, and it does not say whether the transparency changes during the animation. Those are questions the source leaves open, so this article does not answer them.

Worked example

Tracing a Circle That Overlaps Another

Suppose a large growing circle passes over a smaller circle that is already on the screen. What can the learner see in the overlapping region?

  1. 1
    Identify the property

    The circles are semitransparent, so they are partly see-through.

  2. 2
    Apply it to the overlap

    Where the two circles overlap, the shape underneath is not fully hidden. It remains partly visible through the circle on top.

  3. 3
    Check the rest of the picture

    Outside the overlap, each circle is just one shape on the screen, and the learner sees it as a single growing form.

Result

The overlap stays partly visible, which is the visible effect of semitransparency. This reasoning is a generated illustration of the definition, not a detail quoted from the source.

Why This Is a Programming With Objects Example

The text offers this program as a simple example of programming with objects. Its purpose in the text is practical. It lets a learner see objects being used inside a working graphical program, rather than only in a short exercise with no visible result.

This is why the animation is worth watching before reading any code. The moving circles give the learner a concrete result to connect with the idea of objects. When the learner later meets the program's structure, the question to keep asking is how that structure produces the growing, semitransparent circles seen on screen.

The Two-File Dependency

The one structural fact the source states is that GrowingCircleAnimation.java requires CircleInfo.java. The animation program depends on a second file, and the two files together form the example. Neither file is the whole example on its own.

GrowingCircleAnimation.javaanimation programCircleInfo.javarequired fileGrowingsemitransparentcircleswhat appears on screenrequiresdisplays
How does GrowingCircleAnimation.java connect to the other file it needs, and what does the example depend on?

The dependency matters because the example is a pair of files working together. A learner who runs or studies only GrowingCircleAnimation.java has not studied the whole example. Knowing which file is required tells the learner where to look for the rest of the program's support.

Mistakes Beginners Make With This Example

  • Common mistake

    Treating the animation as a single drawing

    What it looks like

    Looking at one still frame and expecting to understand the growth.

    Why it fails

    Growth is a change over time, and a single frame shows only one size.

    Do this instead

    Watch several moments in sequence and ask what changed between them.

  • Common mistake

    Thinking semitransparent means invisible

    What it looks like

    Assuming that an overlapping shape disappears behind a semitransparent circle.

    Why it fails

    Semitransparent shapes are partly see-through, so shapes beneath them remain partly visible.

    Do this instead

    Look for the partly visible overlap rather than a fully hidden shape.

  • Common mistake

    Studying only one of the two files

    What it looks like

    Reading GrowingCircleAnimation.java and ignoring CircleInfo.java.

    Why it fails

    The source says the two files together form the example, and the animation requires the second file.

    Do this instead

    Always identify the required file and study it alongside the main program.

  • Common mistake

    Inventing the code's internal details

    What it looks like

    Claiming the file uses a specific loop count or a specific transparency value.

    Why it fails

    The source describes only the purpose, visual behavior, and dependency. It gives no internal details.

    Do this instead

    State only what the source supports, and check the program itself for any further detail.

Tracing the Animation Yourself

EASY

Watch the growing semitransparent circle animation and describe, in your own words, what changes from one frame to the next and what stays the same. Then state which other file the animation requires and why that file matters to the example.

Hints
  • Think about size first, then about whether the circles remain see-through.
  • The source names one required file. Look for the word requires in the source description.
  • The two files together form the example, so the dependency is part of what the example is.

Key Takeaways

  • GrowingCircleAnimation.java displays an animation of circles that grow over time and are semitransparent, meaning they are partly see-through.
  • The text offers the example as a simple illustration of programming with objects, so a learner can see objects used in a working graphical program.
  • GrowingCircleAnimation.java requires CircleInfo.java, and the two files together form the example.
  • The source gives only the purpose, visual behavior, and dependency, so further internal details should not be assumed.