CSC220 Processing with Animation

From CSclasswiki
Jump to: navigation, search

Team Members

  • Millie Walsh
  • Aigerim Karabekova
  • Katie Park
  • Elizabeth Do


The Valley Tracks

The website was design to allow a user to use our website with use. Upon entering the site, the user may choose from various options of tasks. These task include registering as a user, uploading KML tracks and viewing the tracks through static and animated view on one common form.

We had some challenges getting the applets connect with the website and found that the setup was very temperamental. Some instances when we opened the program it work, but the next tracks we tried didn't work.



  • View tracks by individual numbers or categories to obtain a general idea about the routes taken by students

and the layout of the area.

Multi-track by Id

  • To allow the user to specify individual tracks to view.


  • To integrate a forms that would be dynamic depending on how many track would be seen
  • Reading of variables of a dynamically changing form with drop down buttons

To solve this problem, two pages were created. The first page allowed the user to choose the number of tracks to see which initiated the second page into producing a form with X number of track selections.


  • To allow users to view tracks by their categories, either individually or the combination of multiple ones.


  • A choice between union of categories vs the intersection of categories

I tried to implement the array_intersect() function for this, but because of the way my initial code is set up, this became difficult to incorporate into the form. Thus after trial of getting it to work for some but have trouble in other cases, I removed this as a feature of the form.



Animation (MK)

We did not have much background in processing, so a lot of the project was doing research and testing code. We referred to Ben Fry and Casey Reas' processing handbook to help us gain a better understand of how to utilize it.


  • Animate multiple tracks
  • Make it aesthetically pleasing
    • Use of colors
    • Different processing aesthetics/outputs
  • Explore the various processing libraries
  • Implement a Java class with processing


When we started researching about animation in processing, one of the first things we found was the ijeomamotion library that was written by Ijeoma Ekene.

He had an example online that showed a dot traveling along a path made up of 5 randomly placed points. This was very similar to what we had to accomplish for the project, so we tried to use the ijeomamotion library.

It was fairly easy to implement this library with our processing code, but due to the aesthetic restrictions, we decided to contact that author about possibly modifying his library. He responded quickly and told us that he couldn't send us the library (because he wasn't releasing the open source quite yet), but gave us the open source code to a previous library that he had written. After reviewing it, we found that using the library would cause more headaches and decided to write our own java class that would allow us to accomplish everything we wanted to.

Here is an example of an animation we created using the ijeomamotion library:


We wanted to use processing because we thought that it would be a good language to use to create a visually-pleasing animation.

When learning about processing in class, we saw several examples that really inspired us to create an animation without using a map as a background picture.



Using Java Classes

Integrating java and processing was a lot easier than we expected to be. This uses the same syntax as Java.

  • When you create a Java class, you have a package inside of it.
  • When you export it, you want to include the source and don't compress it
  • When you jar it, save the file under the same name as the package
  • Add the javaclass.jar to your sketch as you would with any other file
  • Import it at the top using the following code
import packageName.className;

Path Object

It takes two arrays from our processing program, longitudes and latitudes, as well as the number of coordinates that are in the array. It creates a Java Vector object of the coordinates.

The most important part of the Java class is our update() function. This function returns to Processing the path's own current location in the form of an array with two points, one for longitudes and the other for latitudes.



The key component of the project was the display various KML files that contained longitude and latitude coordinates, which are obtained from a database.

Other members of our group had previously decided to have the PHP store a file containing multiple GPS traces (paths) in the form of


In order for our Processing program to interpret this file, we had to write a reader function to read in the file. Because our program uses the lengths of the longitude array, we needed to expand the longitude array by 1 every time a new path was read in. This becomes complicated because we use a multiple number of arrays to keep track of different positions and sizes of the multiple paths.

Viewing Applet in Web Browser

We had a lot of difficulty trying to view our applet in the web browser. We believed that there may be a cache problem because java maintains a cache of the jar files in order to avoid downloading them each time you run an applet. In order to test this, we renamed the applet, saved the file(s) under a different name and/or in different locations, cleared the cache, but nothing seemed to work. Another thing we noticed was that when we exported our applet using the processing export function, it didn't automatically add our class to the HTML file. This might have been an oversight on processing's end because that export function will automatically add the libraries, but not the java class(es).

We didn't find any documentation on the Internet with people having several problems.

To fix this, we added the javaclass.jar file to all of the lines where the applet.jar file were.

For example:

var attributes = {
            code: 'pique2.class',
            archive: 'pique2.jar,core.jar',
            width: 700, 
            height: 700,
            image: 'loading.gif'

had to become

var attributes = {
            code: 'pique2.class',
            archive: 'pique2.jar,FinalProject.jar,core.jar',
            width: 700, 
            height: 700,
            image: 'loading.gif'


Path 1
Dot on Path.
Leave Trace
Leave Trace.
Leave Trace (Purple)
Leave Trace (Purple).
Tails 1
Tails 1.
Tails 1
Tails 2.


Both videos use the same kml data file, but display it in different ways.

The first leaves the traces for the duration of the video and the second leaves small tails behind the dot.


  • Greenberg, Ira. Processing: Creative Coding and Computational Art. Berkeley, CA: Apress. Print.
  • "" Web. 12 Dec. 2010. <>.
  • Reas, Casey, and Ben Fry. Processing: A Programming Handbook for Visual Designers and Artists. Cambridge, MA: MIT, 2007. Print.

Future Goals


File Passing

  • Create temporary files and pass Processing the files names, instead of rewriting on file when tracks are chosen for view

and passing it into the Processing applet. At the moment if many people logged onto the website and tried to view data the same time the website may have a difficult time/show the wrong tracks if someone else changes the file before it is displayed.

Fix bugs in Reader

  • In the reader of a file in Processing, it runs into trouble when the number of tracks if greater than initialize array,

then it fails to display. At the moment the the array are initialize to a specified size and then suppose to expand when the number of tracks exceed that size, however the expanding is not working correctly. Thus we did not realize this until later towards the end of the project when there were many more tracks available to be displayed.


Union vs Intersection

  • The option to choose between all track the categories or only those that meet all the criteria of the categories chosen.


  • The comparison of items in the same category. Such that one may view the difference in the way students may behave,

ex. Economic major vs. Computer Science major.

Color Scheme

  • Use of color for displaying multiple categories or identifying categories.


Implement New Reader

  • Start from scratch with the reader
  • Research better ways to input the file into our program

As the project evolves, we would like to have a myriad of traces. Currently, the reader does not accomodate this and the way we are expanding our arrays (in the reader) slows down with the increased number of traces.

Color Scheme

  • Color significance for categories