heartMesh Applet

| Installing | HTML template | Data file | JAVA

Introduction

JAVA Applet heartMesh displays a wire-mesh animation of a set of 3D points, and allows rotating and zooming. It is written for the animation of human heart 3D model. Thus, the animation is repetative (after a cycle is finished, it is displayed again).

Installing

Installing this applet involves copying the following to your web page (or local directory):

  1. JAVA files heartMesh.class and Matrix3D.class
  2. HTML presentation (e.g: heart3D.html)
  3. Data file with the 3D wire-mesh (e.g: testdata.txt)

Copy or FTP all the files to your directory or web site. Then modify the HTML file to include text description, change the size of applet, refresh rate, name of the data file, etc. Finally, prepare teh data file. Now you can load your HTML file into your browser and see the animation.

HTML template

The HTML file must contain an <APPLET> tag that will instruct browser how to run the applet.
See example file heart3D.html 


<applet
    code="heartMesh.class"
    width=320
    height=320 >
    <param name=dataFilename value="your_data_file.txt">
    <param name=scale        value=3.0f >
    <param name=fps          value=25 >
</applet>

As you can see, you can set applet's size through "width" and "height" attributes. The data filename is passed as a parameter to the applet. Scaling value (scale) can be used to initially magnify or compress the animation so it fits the drawing space just right. fps stands for "frames per second", and it instructs the applet how fast to render each stage in the animation.

In the example above, my dataset had 3D points ranging from -50 to 50. I wanted my applet to be large enough, around 300 pixels wide and high. So I picked scaling factor of 3, then rendered points range from -150 to 150 from the center of the image. That makes the range of 300 pixels. I set applet width and hight slightly larger (320) so that there is space for the user messages at the top and the bottom.


Data file

The data file contains:

See example file testdata.txt
Datafile format 
# Comments are preceded by #-sign
# From file ~laza/LVAD/rvlv/mvr226movpts.mat
#

# No. of connections in the wiremesh model

connections   3 
     1     2
     2     3
     3     1



# No. of 3D points and samples

points       3            5  

# Now follow 5 rows (samples), 
#   each row has 9 coordinates ( 3 points x 3 coordinates xyz)
#
#    x1    y1   z1      x2   y2   z2        x3   y3   z3
#
     4.8  9.1  -17.4   -7.9  16.0  -9.4   -6.1  27.9  3.0
     4.6  9.1  -17.6   -7.4  16.0  -9.7   -5.5  27.9  3.0
     5.7  9.6  -17.4   -6.6  16.9 -10.2   -5.4  29.1  3.3
     6.5  9.7  -16.7   -5.8  17.2 -10.3   -6.7  29.5  3.5
     7.5  9.7  -16.4   -5.7  17.3 -11.1   -7.8  29.4  3.8


# Don't forget at least 1 new line after datapoints

I used a neat trick that makes heart animation turn out nicely: First, center the image by subtracting the center of mass from all coordinates, and do that for all samples. Then, rotate the image so that the apex of the heard is "down", i.e. on the negative z-axis, while x=y=0. This will make your animations centered, and the heart will be easily recognizable because it beats "upright".


JAVA

JAVA source code is in files heartMesh.java and Matrix3D.java. You don't need these files if you want to use the applet as is. I compiled them with JAVA 1.1.

Future Improvements

The following improvements would be nice to have. It would be greately appreciated if you could implement any of them and let me know.