top of page

Easy Animation – Java Application

Part I

Collaborating in a two-member team, we decided to focus our animation model on two types of interfaces: the ShapesInterface and AnimationInterface. By taking this route, we were able to create a ShapeInterface for our implement shape. The class method only contains the getter functions. Since we need to pass any shape implements after its mutation, we do not want the user to input anything else, potentially messing with the shape field. By using this approach, we were able to mutate the field shapes within our model command. Otherwise, we would have to iterate and improvise new objects for every iteration of the animation. If we decided to use a different approach, it would take thousand of secs to run the program because there are thousands of shapes. Along with ShapeInterafce, we also use an enum class for ShapeTypes, a Position class, and AbstractShape to implement the necessary getters and constructors for each field without repetitive codes for each shape. Having two primary interfaces makes it easier to create any shapes and the implementation of our shape interface.

Another interface constructor that we created is AnimationInterface. Similar to Shapeinterface, the interface mainly getter command such as getStartState(), getEndState(), and so on. The get state method would return the changes according to the command line by implementing a time and shape type. Along with the interface, we also made an abstract command class – AbstractAnimation. We created a class method in the abstract command class that throws illegal statements if the width or height is negative. If the appearance time is less than disappearance time, the output will throw an illegal exception statement. When we wanted to change object color, dimension, and move, we decided to create a separate class method, extending from AbstractAnimation. We decided to design the three command classes separately because we anticipate that the user would want to move the shapes around, change the shape color, or enhance the shape size.


Part I code: Easy Animation I

Part II

We spent days trying to connect our part I code to the AnimationBuilder and AnimationReader. After working on it for quite some time, we concluded that we decided to scrap everything and go back to square 1. 

We both decided to start the assignment from scratch

and tried to refactor some of our code to "work" with the new stuff and re-design our model.

The first step that we took in this assignment was to create new interfaces for the model and provide supporting interfaces for the interface. Next, we overhauled our entire builder class to support the new incoming interface used to develop models given to us with the new code.


We had to redo how we wrote commands as we initially divided commands based on what fields were changing. Another change was adding getters for the width, height, commands, and shapes to our model, making sure that we do not reference the maps that the model uses to create the animation. And finally, we also implemented a new method – draw() and duplicate(), which we did not have for the previous part. These methods would help us illustrate our shapes for the animation and copy the shape we need.

On the new code, we have a total of five interfaces for our model functions. Well, technically four if we exclude AnimationBuilder interface, which the professor provided. The interfaces act as a ReadOnly method – Getters and Setters function, for the animation and shapes. We added MCommand. We also created getters for each of the fields of the master command to facilitate this update. This MCommand allows us to update any changes within the fields all at once. We also created an Ellipse class similar to the oval class since the txt files call for an ellipse. 

The main course of this assignment will be focusing on we approach the View commands of the animation.

In this part, we decided to create one interface called IView, the main interface that SVG, Textual, and Visual view all share one common method, play(). This method either starts the animation in the visual case or creates the appendable containing the text representing the animation in the text cases. We also created an IView extension interface for SVG and Textual view that only focuses on a getText() command – IViewText. This method only returns the string that represents the animation as a text a description text.

Out of the three classes for Views, the TextualView is probably the most simple out of all. This class implemented the play() as well as getText() as we formatted. The play() is simply used as an initialized, which goes through shapes and commands of the given model. Their output is a string of the shape start and end time of the shape. Similar to TextualView, the SVG is also somewhat simple. Like TextualView, it takes in a model and gets its commands and shape. The output for which it creates a string of text in XML format.


This format is a representation of the movement of each shape. The constructor in SVG would take in the tick speed and allow the users to implement new input for the animation, whether they want it to slow down or faster. It initializes each shape with the correct tags and at the right location where each shape commands write in their designated tag.

The last View method, the Visual View methods use a javax swing library to create the animation and play it. It takes a model and a tick per second parameter that sets the speed of the animation. The played animation will be placed in and used to initialize width and height in the model. We use the scroll bar library that allows the user to scroll to whichever direction they want the animation to use. The panel of the animation draws the set in values for shape. These values are the initialize of how big the shape with be drawn, and it starts and ends time. There is an interface called IDrawAnimationPanel used to draw the shapes and is used in the Visual View to create the animation. 

Last but not least, we also wrote the main class called "Main." We reported this class in a not subtle nod quality compared to our work. In the method, we look through the given parameter and allow the user to input their preferred values for the animation.


Part II code: Easy Animation II

Final Part

In comparison to Part II, we did not do anything much – such as re-design from scratch, in this assignment. However, we did tweak small things here and there. For example, we rename some files so it fits more appropriately with their contractor duties. Also, we changed MCommand to AnimationImpl, and I think that is all the small changes we made. However, we did add enum for the model package – ShapeTypes.

For a starter, we refactored some of our code and rearranged them, so it would be able to work with new methods and classes efficiently. Then, we added another interface to our View package called IEditView. The new interface contains many editing methods, and we also use the Java build-in library, ActionListener, for the setter methods. Finally, we also extended the existing builder constructor with another interface – IBuild, which contains a getter for shapes and commands.


As for new codes, we created an interface – IController, that contains all the methods for the controller implementations. However, we gave only one method in the interface void start() that takes no arguments and creates and runs the controller. Inside our controller constructor, we had a method that took the editable builder, editable view, and tick speed. In our controller, we implement methods such as actionPerformed(), which allows users to play, pause, loop, and restart the animation via mouse clicking. Other methods we included in the controller like run() – a method that allows the action to perform by initiating tick, changing the shape states, and calling any display method into the view.

We deal with some errors along the way. Because of that, we decided to implement an error display for the user. When the user inputs the wrong implementation, the field will not crash, also located in IEditView – View package. This method is super helpful when animation continues to run. The user attempts to insert a non-positive number for either width, height, or speed.

Our controller's play() method uses the builder inside the controller to build a model based on the command. Then, the schedule timer based on the given tick – it produces the animation for the user.

The main reason behind our decision to pass the builder into the controller is that it makes the animation run smoothly. Our implementation also stores all shapes and commands in a LinkedHashmap, which sorts any commands based on their start time. The implementation mainly focuses on contractors in the Model package and View package.


Final part code: Final Easy Animation 

bottom of page