1. That current step can be displayed at the top right corner of the visualization screen.
2. Once we reach the end of the clipping algorithm the only the back button works. The
next button does not work.
3. I think the back button does not require a dump of explanation in the history window,
because it confuses the user more when following the explanation in the history
4. When calculating the intersection points the clips and subjects keep changing in the
bottom of the visualization window. An explanation can be displayed in the box saying
that the current point has been added to the list since it forms the intersection point.
5. After analyzing every intersection point among the lines during phase one, some kind of
dotted line or some kind of distinguishing visual separation would be required so that
we can later identify them in the history window when required.
6. After phase one is done, there must be some kind of indication that we are moving into
phase 2 were we would be going through the intersection points that we collected in
the phase one of the algorithm. There must be some kind of separation in the history
window as well.
7. In phase 2 there should be a small explanation window in the clip ‐ subject box which
should tell the current point that is being considered by the algorithm.
8. A small dotted line can follow along the points that are inbound and that are going to
form the polygon that will be clipped from the 2 other polygons.
9. Once the polygon is clipped and colored. There is another small phase that just checks if
there are any more intersection points, I think there should be some text or information
to mention that we are now in the final phase.
10. I think there can be buttons to mark the end of one phase. Since there is lot of steps
involved I think this button would make job much simpler and easier for a slightly
11. An END button will also be helpful to see the final result directly.
12. I am not writing anything about the pseudo code as that has not yet been implemented,
but I believe it will be in sync with the history window explanation.
Review Report for Clipping Algorithm Visualization
The first Visualization Java Applet of Weiler-Atherton Clipping Algorithm (+)
When I looked for other Weiler-Atherton polygon clipping algorithm visualization tool on the
Internet, I couldn’t find any other. So, it is meaningful in that this is the first visualization
Appropriate association of textual explanation with visual feature (+)
Further, this visualization tool has a good feature which properly associates textual
explanation with visual feature. At least, with this tool, I have understood the Weiler-Atherton
polygon clipping algorithm clearly.
Inputting users own data (+)
It allows users to draw their polygon of interest. This is well known as one of the basic
features of a good algorithm visualization tool.
Pressing Next Button and Back (-)
For complicated polygons, if the two polygons with 10 vertices, almost 100 times pressing
‘Next’ button is needed to reach the end of algorithm visualization. So, I recommend you to
have a next phase button which let user go to the start of each phase. In other words, if
users have already understood 1st phase, users can press next phase button to end the 1st phase
and start the 2nd phase.
Phase Change Notification (-)
Finally, I suggest that in the change time of phase, a notification like background color
change or phase status bar can be given to learners to draw their attention. In addition, it
helps users to be aware of where they are on the way to reach the end of the algorithm.
• The visualization is fairly intuitive and would serve its purpose if the user is
enough motivation to go through all the steps.
• The screen has a really good look and feel attached to it.
• The screen’s real estate is used well and the layout is uncluttered and simple.
• The interface is very usable and intuitive. The learning curve for using the
visualization is very small and hence appreciated. The interface is kept simple
which is good.
• The visualization gives all the important information needed to understand the
• The user is not shown any unnecessary or ambiguous information.
Drawbacks & Fixes Needed:
• It would be good to have a few default examples provided for the user to choose
from. It might be difficult for a novice user to pick a good example.
• I am not sure how the pseudo code is going to be put into the pseudo code pane. It
would make sense if the pseudo code can be traced through while the clipping
algorithm is stepped through. If the pseudo code is simply going to be available as
a static content, I don’t think it really would serve any useful purpose.
• Reading the explanations is monotonous. The explanations should be formatted
for better readability. The large number of states makes the unformatted
explanation even more monotonous.
• Since the explanation and pseudo code are planned to be available in tabs, the
user would be able to view only either of the two at any point of time. Both
explanation and pseudo code are very integral to the understanding of a clipping
algorithm and the user should be able to view both simultaneously.
• On clicking the Back button, explanations corresponding to the previous state are
added to the explanation pane preceded by the work “(Back)”. I think it would be
better off to revert the explanations to the previous state (by rolling back
explanations) rather than adding new explanations.
• The concept of inbound intersection is not explanained clearly. SO I assume that
the user should be aware of what an inbound intersection means before using the
• There are various colours used during the 2 phases of the clipping algorithm. It
would be better off to have a legend explain what each color represents rather
than let the user guess what the color codes represents.
• A Skip Phase button would prove to be very helpful. For e.g., the process of
finding the intersections in the first phase is monotonous. A skip phase button
would be more useful than clicking the Next Button multiple times especially
while dealing with very complicated polygons where the first phase has many
• A begin button would have been useful. If the user wants to go to the beginning,
the user has to click the Back button (possibly innumerable times) or click on
Reset button and redraw the two polygons. A begin button would help to solve
Weiler-Atherton Clipping Applet
Weiler-Atherton clipping tool seems to be really very nice with very clean interface with
explanation at the side that explains what is going on and even it seems to intuitive enough for
the users who are not aware of this algorithm to understand the steps involved in the
algorithm. The reason for this simplicity is because of the explanation steps and also because of
the simplicity of the algorithm itself. But visualization tool makes it more simpler since it allows
you to create any polygon of the users choice and also select the clipping region and from their
on algorithm steps makes it very simple.
Some suggestions for this algorithm visualization tool are just some design changes in the
interface itself like making alphabets associated with each line of polygon more readable. Also
one feature which is not completely necessary but would save users some time would be to
allow deleting the line segment of the polygon if by mistake users created different polygon
then they earlier intended to create. Some kind of explanation of when, how and why inbound
is selected while selecting the clipping region would also be helpful to the users.
Weiler - Atherton Clipping Algorithm
This tool has all the features that should be there in an ideal Algorithm Visualization and
not only that, it does a good job on keeping the explanation in the home page very simple
and concise, the way it should be for every other AV. The tool has back and next button
that are required for better traversal and navigation through various steps of the
algorithm. The Console provides an insight as to what does a particular step mean and
also provides the user with guidance as to what he/she should do next. This saved space
and also served a dual purpose of serving as a log as well as a help window. Clipping
Polygon and Subject polygon concept became clearer once the user goes through the
console window. The UI is very intuitive and compact. In short, it was a very good effort
and it can very well serve as a tool in the class room.
But then, no matter how superlative the effort is, there is always a scope for
improvement. One issue that I found was that I needed more flexibility when drawing the
polygons. Though the point based approach is good, no doubt, but somehow, the lines are
drawn in an unexpected manner when ever a new point is introduced. Suppose, I want
already have a triangle in place and now I want to put one more point and draw a polygon
with 4 sides (a convex polygon). Despite placing a point at a location, the new polygon
made is sometimes concave and sometimes convex. I could not decipher, what algorithm
is being used for drawing polygons and that might not be important even, but it would be
good if I could draw exactly the shape that I want to draw and this freedom of action
reduces as I introduce more points in the polygon. So, a suggestion would be to give user
the drag and drop feature for drawing polygon, where in he could drag the lines between
the points and drag the points themselves. This could be very well, in addition to existing
way of drawing polygons.
Secondly, one niggling issue I faced was, once I reach the end of algorithm and then start
traversing back, the “Next” button remains surprisingly disabled. I could not understand,
as to why it remains disabled. It hampers the free navigation between the steps.
Thirdly, the pseudo code tab remains empty all the time. I wonder, if that is a feature yet
to be implemented or escaped developer’s attention.
Last but not the least, it would have been good, if the developer could have provided a
“Tool Help” button to describe the movement of colors between the dots in the bottom
half of the AV which shows “CLIP” and “SUBJECT”. I had to look at the AV for
sometime to figure out, why the color movement between the dots is happening in the
way it is occurring. A small document would save some of the student’s time.
A small hyperlink link to a good explanation about the Weiler-Atherton Clipping
algorithm and its comparison with some other conventional algorithms would make it a
complete tool in the hands of instructors as well as students.
All the same, it is one of the nice AVs and is recommended for use in the class setting.
Weiler-Atherton Clipping Algorithm
The Weiler-Atherton clipping algorithm visualization is a quite well-prepared and well-
documented tool. I learned Weiler-Atherton clipping algorithm in by reducing it to
rectangles in my graphics course. It was insightful for me to be able to see how the
algorithm works with polygons. Developers and new learners can use this visualization
either to improve their knowledge about the algorithm or learn it from scratch.
The developer did a very good job in documenting what is being visualized, who can
benefit from the tool and why. He also did a very neat job on designing the user interface.
The tool has a pretty intuitive interface. I had no problems about using it.
The selection of colors for edge, polygon and line visualizations are all good and not
distractive. The usage of the console for both explaining how to use the program and for
explaining what is going on in the visualization during the run time is well-designed and
Cons and Suggestions:
The developer did not specify, but the pseudocode section of the tool is not functioning.
As the developer aims to provide a nice visualization for other developers too, I think it
would be a valuable addition to include pseudocode visualization (like which part of the
pseudocode is being used in a given step) during the run time.
Moreover, the left-bottom box which has clip and subject sections is not documented in
the report. That part of the tool was not intuitive and hard to understand. I did understand
what the developer was trying to provide by that box after some effort. But I think
including one or two paragraphs in the report to explain what is happening inside the left-
bottom box would decrease the burden to understand the what’s happening and increase
the tool usability.
Clipping Algorithm Visualization
This algorithm visualization successfully demonstrates Weiler-Atherton Polygon
Clipping algorithm which allows clipping of a “subject” polygon by an arbitrarily
shaped “clip” polygon. The visualization of this AV clearly illustrates the concept and
procedures of Weiler-Atherton clipping algorithm. Each type of polygon a user created
is represented by a unique color, and thus, both a subject and clip polygon can be clearly
recognized by users. This AV displays a series of algorithm’s steps, and its graphical
representations are properly associated with each step and state changes of the clipping
algorithm. Textual explanation comes with the visualization for each state change. It
provides a nice step by step description about the behaviors of animation and what is
happening. I think that its explanations are succinct and helpful for users to understand
what the algorithm is doing. One of the biggest benefits I can see for this AV is that this
AV allows constructing user own input dataset (polygons). Users can draw the polygons
by just clicking on the drawing region. This feature allows the user to run the clipping
algorithm on a user’s own created subject and clip polygons. Since the user can specify
his/her own polygons, she or he can engage and involve the visualization more actively.
It has fairly simple controls. Its interface is easy-to-use and users don’t need to put
much effort into knowing how to use this AV. Visualization can be stepped through by
pushing the next button. Also, it enables users to step backwards and re-run the previous
As mentioned the above, it is obvious that its simple, easy to use interface is beneficial
because it rarely distracts a user who is learning the algorithm though visualization.
However, lack of engagement features, which allows users to be actively involved with
the AV, is a major flaw of this AV. In our class, we have discussed that the most
important factor in learning an algorithm with AV is not the contents of visualization or
passively viewing them, but use of AV to make students actively engaged through
various. The effect of using the interactive responding feature provided by AV could
generate a significant learning advantage on student’s performance. For example, rather
than passively watching and walking through clipping algorithm by clicking the next
button, users can identify all of the intersection points, where subject polygons enter
clip polygons, by directly clicking them. Also, students might be asked several
questions in conjunction with the visualization.
While some step by step explanations accompanied by visualization was really useful, it
would have been more beneficial if users were also able to access and see an overview
of Weiler-Atherton clipping algorithm. Thus, it enables user to figure out and examine
where the current step is in the entire algorithm.
It seems that there is a bug in this AV. If I specify a subject polygon with a polygon that
is self-intersecting (polygons edges cross other edges, for example, pentagram) and run
the clipping algorithm, this AV often gives incorrect clipping results. However, when a
normal convex or concave polygon is defined as a subject polygon, this problem doesn’t
When a self-intersecting polygon (ABCD) is defined as a subject polygon (Figure 1),
this AV gives a wrong clipping result (Figure 2).. Figure 1 shows a defined subject
(self-intersecting) and clip polygon, and Figure 2 shows that wrong clipped
polygons have been found (green polygon region)
Weiler‐Atherton Clipping Applet
• The web interface is quite uncluttered and clearly and succinctly explains about the
algorithm and visualization tool.
• Also tool launches in new independent window which gives user ability to resize the
• Interface is uncluttered and easy to use. It nicely guides one through each step. However in
the polygon drawing phase it would be helpful to mention that points should be clicked in
cyclic manner. At first I clicked points in non‐cyclic manner and the tool drew a “X” shaped
• Also I think either the algorithm or the tool has some limitation with the shapes it can
handle (maybe convex polygons only). I tried the tool with some non trivial shapes (not a
convex polygon) and I got the wrong clipped area. It is not apparent from either the tool or
the details of algorithm on the website about the limitation of algorithm with the shapes. It
would be helpful to mention this somewhere. Or it can be also done when the user is
clicking dots on screen to form polygon. If he/she draws a shape which cannot be handled
by algorithm then a message should clearly state this and the drawn object should be
invalidated with succinct explanation about what was wrong with his prior object and why it
• Also I would say that though it is clear what should be done with inbound and ‘not an
inbound’ point but rational behind the actions taken on identification about any point as
inbound or not is not very clear. Few lines here explaining this concept would be better. I
suggest not to implement this in ‘console’ frame but somewhere else where algorithm is
explained (maybe the website).
• I can see that the algorithm is divided into phases like finding intersection points,
discovering inbound points etc. Once I became familiar with tool I found it annoying that I
had to click ‘next, next, next, next, next,...” to skip to next phase. It would be a good idea to
provide a button which can provide this capability.
• One comment about website. I think it is important to include information about author
and institute so that people know whom to contact for bug report or any other request.
Clipping Algorithm Visualization
It is a very nice animation. The main window is large enough, and the overall experience is good. The
screen does not look cluttered, and the tabs are neatly designed. There are no unnecessary tabs or
options. There is very little chance the user will go wrong while using this tool, the concise and helpful
explanations take care of that.
The user gets an idea of the clipping region at the start of the animation, and then as the algorithm
proceeds, it becomes clearer how the algorithm traces the clipped region. The initial picture of the
clipped region helps the user follow the algorithm better.
The console is very useful as it gives information at every step of the execution, and it makes for a good
What strikes most about the tool is its steadfast adherence to brevity. It is a tool with a single focus, and
no distractions in the form of flashy colors, or fonts, or tabs. High on user experience and utility, it is a
good tool to have.
In relative order of importance, these might be incorporated to make the experience even better.
1 Play Button‐‐ I think a “Play” button would have been useful. Sometimes, the lecturer might not want
to go through all the steps in the algorithm. A play button will be useful in that regard. The lecturer can
let the algorithm “play”, and then it will be possible to go to a particular point using the “back” button to
examine a particular point of interest.
2 More descriptive messages in the console—Some of the messages are of the form, “the intersection
point is calculated”. If the message were to contain more information, e.g., the intersection point of
which two lines is being calculated, it would be easier to go back to a step, or while rewinding, grasp the
scenario easily. Of course, it is possible even now by examining the surrounding messages, but more
description will be helpful
3 Next button—When we go “back” during the algorithm, we can use “Next” as well. However, once the
algorithm has finished, we cannot go “Next” if we go “Back”.
4 Pseudo code—Right now, this tab is empty. I think it has not been implemented yet.
5 Have another mode of operation where the clipped region is not highlighted at the start of the
algorithm. Let the region become clearer as the user runs through the algorithm. This feature might be
useful for complex regions.
Review of the Weiler‐Atherton Visualization
Overall, the visualization is straightforward and has a “flat learning curve”. The presentation is
clear. The small set of controls serves to make the visualization easy and intuitive to use. The
visualization does a good job at teaching the algorithm. However, I believe that the visualization
can be made more effective with a few improvements that are highlighted in the subsequent
sections. The “GUI components and controls” section suggests improvements related to the
GUI widgets used, the behavior of these components, and their layout. The “Algorithm
functionality” section provides suggestions relevant to unique characteristics of this algorithm.
GUI components and controls
The controls provided are intuitive and the GUI components chosen are the right ones for the
task in hand. The presentation is good and the screen is not cluttered. This section suggests
“Next” and “Back” buttons: The “Next” and “Back” buttons function correctly during the
execution of the algorithm. However, when the algorithm reaches the last state, the “Next
button” is permanently disabled. Hence, the user can step back to an earlier state but cannot
move forward after backing up. It would be good to provide the ability to move forward at this
“Console” pane: The “Console” currently serves as a dump of all actions performed by the user.
On clicking “Next”, the explanation for the current state is appended to the “Console”. On
clicking “Back”, the explanation for the previous state is appended to the “Console” and tagged
as a state generated by the “Back button” by prefixing it with “(Back)”.
When the user backs up several times during the execution of the algorithm, the “Console” is
interspersed with several “(Back)” states, and hence can no longer be easily studied from start
to finish. In my opinion, it would be useful to roll back the explanation too when the user clicks
the “Back” button. This way, the user could read the explanation from the beginning to the
current state at any particular state and understand all the operation that led to the current
Console and Pseudocode tabs: In class you explained that you plan to use the “Pseudocode
pane” for two purposes: to display the pseudo code and to enable the user to step through the
algorithm at various levels of granularity using foldable pseudo code. I think this is a good idea.
However, once this is functional, the user would probably want to look at the pseudo code and
the explanation at each state. It would be best to separate these two panes and make them
both visible simultaneously to spare the user the trouble of constantly switching between
The algorithm works for most cases and some complex cases provide insight into the corner
cases of the algorithm. This section discusses two minor improvements.
Self intersecting polygons: The algorithm does not seem to work for self intersecting polygons
such as the one shown below.
If the Weiler‐Atherton algorithm is not applicable to such polygons, it would be best to disallow
the user from entering such polygons, probably by validating the polygons after the completion
of the input phase. On the other hand, such examples could be used to illustrate the kind of
polygons for which the Weiler‐Atherton algorithm is not applicable. If you plan to use it for this
purpose, it would be good to state it explicitly, probably in the “Explanation pane”.
Separation of phases: The algorithm consists of two discrete phases. The first phase, which is
the identification of intersections, seems to be the easier of the two phases. Since the user can
quickly grasp the first phase, she might want to move directly to the second phase for later
examples. It would be useful to provide the user the option of directly moving to the second
phase if she feels she is comfortable with the first phase. I understand that this can be
accomplished indirectly with the foldable pseudo code, but I feel it would be more intuitive to
provide a widget to accomplish this task directly.