JavaView workshop for MuPAD users€¦ · 266 Getting started with MuPAD Later we will use this...

JavaView workshop for MuPAD users

This chapter differs significantly from the remaining chapters. This timewe will not learn anything new about MuPAD. However, instead of thiswe will learn how graphics developed in MuPAD can be transformed intoJavaView interactive virtual models and displayed online on a web pagewith the help of JavaView applets. Due to limited space this chapter willcover only the most important operations and may not give answers tosome questions of my readers. More information about JavaView can beobtained from www.javaview.de web pages.

8.1 What is JavaViewJavaView visualization software was developed by Dr. Konrad Polthierand his research group at Technical University in Berlin. The softwarewas written using Java programming language and consists a bunch ofJava applets, each of them containing a number of Java classes. Whiledisplaying JavaView virtual models on web pages, only the necessaryclasses are downloaded to the user computer. This feature makesJavaView a highly effective tool for online visualization. Let us see how itworks in practice from a user point of view. Let us open the web pagehttp://majewski.mupad.com/starters/ and choose Chapter 8 fromthe menu on the right side of the web page. Here we will find all examples

262 Getting started with MuPAD

used in this chapter. Choose the page with Example 1.

Downloading the web page as well as the JavaView applets may take awhile depending on your Internet connection. First the web page will bedownloaded, then JavaView necessary applets, and finally the virtualmodel will arrive to our computer. Observe that JavaView applets aredownloaded only once. This means that if we are going to visit a bunch ofweb pages with JavaView models then each time only web pages andmodel files will be downloaded.

Let us return to our example. On the web page we see an imagerepresenting Enneper surface (see figure 8.1). With the help of mousepointer we can rotate the model on the web page. This is quite easy.However, there is more. Let us click somewhere on the area of the modelusing the right button of the mouse. We will obtain a context menu likethe one shown in the figure 8.1. Here we can choose how we wish tomanipulate the model, i.e. rotate it, rotate in a coordinate plane, zoom inor zoom out, move it, pick a vertex or display the Control Panel. Finallywe can obtain some help on major keyboard shortcuts to majority ofJavaView operations.

Fig. 8.1 JavaView model on a web page

Chapter 8 ∘ JavaView workshop 263

Now, let us check quickly what the Control Panel is and what we can dowith it? Let us select Control Panel from the context menu. Depending onJavaView model configuration we may get one of many possible panels.However, the Material of Surface panel, the one shown in figure 8.2 is themost frequently used. Here, the menu on top of the panel is a gateway to anumber of other panels and operations. We will come back to them laterin this chapter. Now, let us examine in brief what we see in this panel. Wecan easily find out that all displayed here properties or operations arerelated to the way how the surface is displayed on a web page. Forexample, we can display or hide vertices of the surface, mesh edges ormesh elements. We can display normal vectors to the surface, make thesurface transparent, or change its colors.

Fig. 8.2 Material of the surface panel


Let us make a few changes and see what we can do with our model. Figure8.3 shows image of the same model with vertex normals displayed and aminimal transparency used to show vectors that are hidden below thesurface.

Fig. 8.3 Enneper surface after modifications in JavaView

Let us examine the Example 2 for this chapter. The web page containsvirtual model with three polyhedra—hexahedron, tetrahedron andoctahedron. After loading this page into a web browser we will see onlythe external hexahedron. However, if in the Material panel we turn on thetransparency flag, then we will be able to see the remaining two polyhedra(see figure 8.4). Now changing transparency of each of these two externalpolyhedra we can easily see how they are embedded. Moreover, we caneasily calculate the volume of each polyhedron supposing that thehexahedron side is equal to a. For example, from the image it is evidentthat each of these empty spaces inside of the hexahedron and outside oftetrahedron is a pyramid with volume Vol a3/6. Therefore volume ofour tetrahedron is a3 − 4 Vol a3/3. An easy task of calculating thevolume of the octahedron I will leave to my readers.


Fig. 8.4 Transparent polyhedra

After these two brief examples, let us return to MuPAD graphics. We willdevelop a parametric surface and transform it into JavaView model.

8.2 Parametric surface exampleFor this example we will use the famous Roman surface discovered by theSwiss mathematician Jacob Stainer during his visit in Rome. The simplestconstruction of the Roman surface is the one obtained from a spherecentered at the origin and transformed under mappingfx,y, z yz,xz,xy.

There are a few versions of the Roman surface equation. We will use theparametric form that can be derived directly from definition of Romansurface. This can be easily done in MuPAD,

// parametric equation of the spherex : r*sin(u)*cos(t):y : r*sin(u)*sin(t):z : r*cos(u): // t0..PI, u0..2*PI// parametric equation after transformationr : 1: // let us suppose that r1,REq :[y*z, x*z, x*y]

cosu sint sinu, cost cosu sinu, cost sint sinu2


Later we will use this formula to produce parametric plot of Romansurface. Observe, in our calculations we use r 1. However, any positivevalue of r can be used.

8.2.1 Plot of Roman Surface in MuPAD

Let us start with the simplest MuPAD statement for obtaining a plot ofRoman surface:

RomanSurf : plot::Surface(REq,t0..PI, u0..PI

):plot(RomanSurf)

In order to make our example as simple as possible we do not use anyspecial features like our own colors, transparency, density of mesh, etc.

In order to emphasize some properties of the Roman surface we will addto our graph three planes x 0, y 0, and z 0. For the sake of simplicityof the graph we construct our planes using parametric equations andmesh 2 2 only. Here are declarations of our planes and a graph showingRoman surface and all three planes.

R : 0.5:PLx : plot::Surface([0,u,v], u-R..R, v-R..R, Mesh[2,2]):PLy : plot::Surface([u,0,v], u-R..R, v-R..R, Mesh[2,2]):PLz : plot::Surface([u,v,0], u-R..R, v-R..R, Mesh[2,2]):plot(RomanSurf, PLx, PLy, PLz)


Now, let us export the graph into JavaView. We will have to produce twofiles, one the JVX file containing description of the mesh forming thesurface and another one the JVD file containing all parameters of thescene (coordinate axes, lights, etc.). Depending on the version of MuPADexporting these files may differ a bit. Some people prefer to save the XVCfile (Virtual Camera uncompressed format) and then use the toolxvc2jvx.exe that is enclosed with MuPAD 3.x.

In MuPAD 3.x make a right click on the image, and from the contextmenu choose Graphics Object and then Open. The graph will be openedin Virtual Camera. Here click on Coordinate System in the scene tree.Then from Virtual Camera menu Insert choose insert Camera. The newcamera will capture the current view parameters. Now, from the Filemenu choose Export and export the graphics as JavaView Geometry(*.JVX) and again as JavaView Display Settings (*.JVD). It is wise to saveboth files under the same name, for example roman.jvx and roman.jvd.This way we will be able to move around with both files without loosingany of them.

In MuPAD 4.x exporting *.JVX and *.JVD files is even simpler—click onthe graph, insert the camera into the coordinate system and export bothfiles through File Exportmenu and export wizard.

Now, we can close MuPAD, open JavaView and tune our virtual model.


8.2.2. Setting up JavaView working environment

JavaView can be used in two different ways—one, in the form of appletsattached to a web page or as a standalone application. The second optionwill allow us to save files directly into our computer and, of course, manyoperations will be faster than working through a web page.

In order to use JavaView as a standalone application, we have todownload the JavaView software from www.javaview.de. We candownload from there JavaView installer for Windows operating systems,or one of the *.ZIP files, e.g. javaview.zip, that should beuncompressed in the local computer. In the first case the installer willcreate all necessary folders and files. In the second case we have todevelop a *.BAT file that we will use to start JavaView. For instance, inmy configuration of JavaView, I have all JavaView files in the folderd:\javaview, with the following javaview.bat:

@echo offset jv_cbd:\JavaView\set jv_jar%jv_cb%/jars/javaview.jar;%jv_cb%/jars/jvx.jar;%jv_cb%/jars/vgpapp.jarstart "Java console for JavaView" /min java -cp %jv_jar%-Xmx256m javaview codebase%jv_cb% %1 %2 %3 %4 %5

Observe, lines 3 and 4 in the above file should be combined into one line.Similarly lines 5 and 6 should also form one line. Note, line 2 is essentialwhile moving JavaView from one place to another. This is the place wherewe have to change the path to JavaView files.

The above javaview.bat file can be located anywhere in our computer,for example we can save it directly on the desktop. In order to make ourwork more convenient and well organized we can make in the folderJavaView/models a new sub folder for our works, for exampleJavaView/models/works. I guess, each of us has slightly differentpreferences. Therefore, I suggest to my readers to install JavaView like itwas described above, and eventually later, when you will be sure thateverything works well, move JavaView folder into your preferred place.

Let us start JavaView on the local computer. In order to do this we haveto run the javaview.bat file, just double click on it. For a few seconds weshould get JavaView display window with the snail surface (see fig. 8.5)


Fig. 8.5 The JavaView display window

If you haven’t got this screen then you should check the javaview.batfile and see if there are no errors in JavaView path. Now we can start ourworks with JavaView.

Let us load the roman.jvx and roman.jvd files. In order to do this pressthe key combination [Ctrl][Shift][y], this will empty the displaywindow, and then press [Ctrl][Shift][o], navigate to the place where youexported both JVX and JVD file, and select the roman.jvx file. The displayfile roman.jvd will be loaded automatically. If for some reason the JVDfile was not loaded, you can still load it by pressing [Ctrl][o] andselecting the display file that you need. After these operations we shouldobtain our Roman surface in the JavaView display window. The graphlooks reasonably well. However, there are many ways of improving it andtuning up for displaying on a web page.

8.2.3 Display properties

There are many ways to begin working with a new JavaView model.However, the best way is to start by checking what we really got in our


model. In order to do this, let us open menu Inspector and then Display.We will obtain a large panel with some of the properties that are relatedto the way how model is displayed.

Fig. 8.6 The scene display panel

Here we can change, the default in MuPAD, white background to a colorthat we like, add some background picture or even the foregroundpicture, for example a frame around a model. I will leave theseexplorations to my readers. Now let us modify the most important thingsonly. First let us uncheck the flag Show Depth and check the flag EnableAntialias. The first flag is used to simulate depth of the image. The parts


of the model that are in the back will be darker than parts in the front.This feature works well for large models. Smaller models using thisfeature may become too dark. The second flag will force JavaView tosmooth display of mesh lines of the model.

Technical comment We will use term‘flag’ in respect to any feature inJavaView that can be turned on or off by checking or unchecking a checkboxin one of the JavaView panels. Note, some of the features in JavaView maynot have a checkbox and we can turn them on or off only by modifying themodel or display file.

Technical comment Anti-aliasing is a technique to prevent or remove thejagged appearance of diagonal edges in an image. Anti-aliasing can beachieved in rendered images by averaging adjacent pixels with sharpvariations of color and brightness, or by increasing resolution of the image tomeet or exceed the resolution of the device displaying or printing the image.

In the top of the Display panel we set up size of the JavaView displaywindow. For example to 400 400 pixels. Type here each number andpress the [Enter] key for each of them.

Technical comment Changing numerical values in JavaView can beperformed in two different ways. One way is by pushing the appropriateslider. This method works immediately. Another way is to type the given

number and then press the [Enter] key. The new numerical value will beaccepted as soon as we will press the [Enter] key.

Now, we have got a square display window and a nice smooth picture. Letus examine the bottom part of the Display panel. Here we see twocolumns displaying objects in our model. We will call them geometries.The left column shows all geometries of the model. The geometry selectedin the left column is the active one. This is the object which properties wecan modify at the moment. The right column shows only geometries thatare currently displayed. Here we can hide or show some of thegeometries.

Technical comment In JavaView a geometry is an object built out of pointsonly, or set of points and lines connecting some of these points, or a set ofpoints and faces connecting these points. In each case the geometry maycontain also a vector field. The set of all geometries in a given JVX file, in thistext, we call JavaView virtual model or simply virtual model.

In our model we have a number of geometries. The most important for us


are roman, roman[1], roman[2], and roman[3]. These are the Romansurface and the three planes. In the next step we will assign new colors tothese planes and make them transparent.

Let us select the first plane roman[1] in the Active Geometry column.Now, open the menu Method Color and here check the option ShowGlobal Element Color. This will change one of the planes to a single color.Repeat these operations for the two remaining planes. It really doesn’tmatter what colors they get. We will change them in a while. Finally,select again the roman[1] geometry.

Technical comment There is a quicker way of selecting different geometries.In order to do this press the [Ctrl] key and while pressing it click theappropriate geometry in JavaView display.

8.2.4 Material properties

While having roman[1] as the active geometry, let us select menuInspector Geometry Material. Here, in the Material panel, check thetransparency flag and far below change transparency value to 0.5. One ofthe planes should become transparent. Which one? In my model this isthe xz-plane. Now, we can open to the menu Inspector Geometry Infoand in the Information panel change the name of the plane from roman[1]to xz-plane—delete the old name, type the new one and press the [Enter]key. Finally, back in the Material panel change the color of the plane to alight blue color.

In exactly the same way rename the two remaining planes and changetheir colors to yellow and green.

Observe, the Material panel has many other interesting tools. Here wecan, for example, display normal vectors to a surface both for its verticesor elements. This may tell us that how the Roman surface is oriented.

8.2.5 Tuning lights

After switching off the Show Depth flag our model became very bright.Now we should look into lighting of the scene and adjust lights. Select themenu Inspector Light. The Lights panel contains all information aboutlights used in this model (see fig. 8.8). The first noticeable thing is that we


have six regular lights and one ambient light. This is what we inheritedfrom MuPAD scene. Of course we can use a scene with so many lights,this is more or less how the scene in a real theater is illuminated.However, by reducing the number of lights JavaView will have lesscalculations to deal with. This is important for large virtual modelsdisplayed on a web page. Some users may not have enough powerfulcomputers to display and manipulate such models.

Reducing number of lights is quite simple. Locate in the bottom part ofthe Lights panel the button [Default Lights] or [RGB Lights]. The firstbutton will remove current lights and create two JavaView default lights.The second button will replace current lights by three lights: red, greenand blue. In both cases our scene will become darker and sometimes wemay need to add one light more. A good solution is to add one ambientlight. Let us do it.

First, let us click the [Default Lights] button. Then click the button [NewLight]. In the Selected Light section remove current name of the light,something like point643643, and type here the word ‘ambient’ and press[Enter]. This will change the name of the light only. Now, in the sectionType change the light type from Point to Ambient. Finally adjust theintensity of the new light to a value close to 0.3. For our model of theRoman surface it may be enough. However, for another models we haveto establish the intensity of the ambient light by experimenting.

The Lights panel has a number of different light types and parameters.For our example we do not need any more adjustments. However, it isworth to know a little about what the Lights panel contains.

First, and the most important is that in JavaView we can have sixdifferent types of lights: ambient, head, sky, direction, point and spotlights. Although each type of light has a number of specific properties, forthe purpose of this experiment we need a very brief information aboutsome of them.


Fig. 8.7 The Lights panel

Ambient light is the light that is present in the environment. It has no focusand no direction. A typical example of an ambient light is the light present ina dark room in the night. Even if there are no visible light sources we still cansee something in this room. Ambient light should have a very low intensity,values close to 0.2 or 0.3would be enough.

Point light is a local source of illumination that falls in all directions from asingle point. Typical example of a point light can be light of a candle. Thepoint light has its location, but does not have a focus and direction.


Spot light is a local source of illumination which shines only in a specificdirection from a given point. This light source has properties similar to a reallife reflector that we see in a theater. A good visual representation of the spotlight is a cone. The tip of the cone is the place where the light is located, thecenter of the base is the interest point and finally the angle between conewalls is the light angle.

Direction light is similar to a distant light, like sun or moon. It has a direction,that is determined by its point of location and the focus point.

Head light is a specific JavaView only light. It is attached to the camera, yeswe have also a camera, and has all properties similar to the direction light.

Sky light is another specific JavaView light. It behaves like a light that fallsfrom the sky in a cloudy day. It is similar to the ambient light, however it cancast shadows. Opportunities for modifying the sky light are very limited.

We can easily modify some properties of JavaView lights whenever it doesnot collide with the light type. For instance we can change a color andintensity of each light. However, we cannot change light location forambient, sky and head lights. We can change the angle of the spot light,but we cannot change it for other types of lights as these lights do nothave an angle.

8.2.6 Coordinate system

Our next goal will be adjusting the coordinate axes for the scene. Just nowwe have a default MuPAD coordinate system with bounding box. Let usopen the All Axes panel. In order to do this select the Inspector Axes All Axesmenu. Observe, in JavaView we can adjust properties of each axisseparately. However, we do not have such need in our example. The AllAxes panel is a collection all features that are related to coordinate axes.In our case we do not need most of these features. We will have to adjustunits for all axes and perhaps add a grid below the graph.

In order to adjust the units, we have to uncheck first the Auto Ticks flag.Then type 0.5 for Major Units, and 0.1 for Minor Units. Finally check theShow XY-Grid flag. Although, the All Axes panel has many other functionswe shall leave them for a better opportunity.


Fig. 8.8 The All Axes panel

8.2.7 Camera

In the Camera panel we can adjust properties of the camera, e.g. cameralocation and interest point, clipping the scene, etc. In our model we donot need to change many things. Therefore, we will examine briefly theCamera panel and check what is possible to do here. Perhaps later will bea better opportunity to use this panel.


Fig. 8.9 The Camera panel

In JavaView the camera concept is a bit simpler that in many other 3Dprograms. We do not have the view angle or a stereoscopic camera.However we can adjust the size of the display, zoom in or zoom out, andthis way in some sense we are able to simulate the camera angle.

An important feature of the camera in JavaView is the perspectivitycoefficient. It will allow us to simulate the perspective of the graph. Forexample, perspectivity equal to 0 will remove completely the perspective.Perspectivity larger than 1 in most of models will produce a very distortedimage. Perspectivity values between 0.3 and 0.7 produce the most natural


results. In our example perspectivity 0.4 will be sufficient.

One of the most important new properties of JavaView camera is the boxratio feature. Most of Computer Algebra Systems scale each axis of thecoordinate system separately in order to fit the graph inside a letter boxsize window. The box ratio feature in JavaView fulfills the same role. Bychecking the box ratio Enable flag and giving different aspect ratios foreach axis we can squeeze or expand the graph in directions parallel to thecoordinate axes.

Let us return to our example. The plot of the Roman surface created inMuPAD was distorted to fit the graph in the rectangle with proportions1.33:1. However, it would be good to restore the natural proportions ofthe graph and have the same scaling on each axis. This will give us abetter opportunity to investigate symmetries of the surface.

Let us uncheck the box ratio Enable flag in the Camera panel. Analternative is to keep the box ratio turned on and have here all three ratiosequal to 1. In any case our model will get the right proportions and we canstart thinking about publishing it.

8.2.8 Exporting JavaView final files

After finishing all improvements of our model we have to save it. Beforesaving the model we should check if the model fits well in the displaywindow. Another important thing is to leave active the most desiredmanipulation mode. Some people prefer to save models with Rotate,orbit active, some other with Rotate, XY-Plane, etc. Think how you wishpeople to start operating with your model. In most of my models I leavethe Rotate, XY-Planemode active.

One of the final steps in producing the virtual model is saving allnecessary components. For the future use we will need: roman.jvx,roman.jvd and roman.html files. We will save the JVX file in zipped form.This will save precious download time of users of our works. In order tosave the Roman surface files open the menu File Save Multipleformats. This will open a dialog box like the one shown in the figure 8.10.

In the Multiple export dialog box fill the author and model information,check JVX, JVD and HTML formats. Finally check options Compress ZIP,Use Floats, and Use current display size. Now, press the [OK] button in


the bottom of the dialog box. You should find in your computer four filesroman.jvx, roman.jvx.zip, roman.jvd and roman.html. Copy all ofthem into a separate folder. Copy there also the jars folder fromJavaView. Now you can open the roman.html file in Internet Explorer,Netscape, or any other Java enabled web browser, and you should see ourmodel on a web page.

Fig. 8.10 The Multiple File export dialog

8.2.9 Publishing JavaView virtual model

Before publishing the Roman surface virtual model on a web page itwould be useful to examine the applet code on the web page that wascreated in JavaView. Later we still can modify this code if we need to.

The web page can be opened in any text HTML editor or even in a simpletext editor. Here is the code created by JavaView, I show only thefragment that is related to our virtual model.

applet height"400" width"400" archive"jars/javaview.jar"code"javaview.class"param namemodel value"roman.jvx"param namedisplayFile value"roman.jvd"param namepanel value"material"

/applet

The first line contains information about the size of the model on a web


page. This is what we did while using the Display panel. The third andfourth lines show which files are loaded. Here we should fix the name ofthe JVX file as we use its zipped version. Therefore, the line three shouldbe as follows:

param name"model" value"roman.jvx.zip"

The fifth line shows which panel will be displayed after selecting theControl Panel from JavaView context menu.

In fact, we can add here a number of other parameters. For example thecode like this

param name"border" value"hide"

will hide the border around our model. A code like this one will forceJavaView to display copyright information,

param name"copyright" value"show"

Information about many other parameters can be found onwww.javaview.de pages.

Technical comment A common strategy in web pages development is to quotevalues of all parameters. This is one of the requirements for producing codeconforming XHTML and XML rules. Therefore, we should havename"border" instead of nameborder, etc. Note, the code produced byJavaView does not follow this rule. If you care about quality of your code youshould fix this code by hand.

After adding or modifying all necessary parameters, save the page and thewhole contents for the folder post on the web site.

I am sure that information provided in this section may not be enough forusers who wish to do a more sophisticated online development. However,I tried in this chapter to describe some very basics steps for producingvirtual models with MuPAD and JavaView, and publishing them online. Iknow, this is a topic for just another book.

8.3 Developing virtual models of polyhedra

The process of developing virtual models of polyhedra is similar to theone that we described above. However, there are a few things that may godifferent way than for parametric surfaces. One if them is that flat faces ofpolyhedra with smooth single coloring sometimes produce a dull image.Another one are unnecessary edges of polyhedra faces.


Let us start with a simple declaration of a polyhedron in MuPAD.

A : plot::Dodecahedron():plot(A, AxesNone)

Now, let us save in Virtual Camera the JVX and JVD files like we did itbefore for the Roman surface. After opening the model in JavaView wesee that the uniform coloring makes the image a bit boring. Therefore,one of our goals will be to change colors of faces.

The Display panel shows that we got 23 geometries. In our example eachedge and each face of the polyhedron is a separate geometry. This is badand good at the same time. For example, we can select each face and usefor it a separate color. However, files for some complex polyhedra mightbe very large. Therefore, our another goal will be to reduce number ofgeometries and obtain a model with possibly the smallest number ofgeometries. One geometry would be a perfect goal.

Let us start changing colors of the polyhedron. In order to do this in themenu File Save Multiple Formats uncheck colors and texture flags andsave both JVX and JVD file. This operation will wash out smooth colorsfrom our model. Now, load the model again into JavaView. We shouldobtain a uniform red polyhedron. Now we will have to visit each faceseparately and paint it in a different color. There are many ways of doingthis task. The [Ctrl]click operation will be useful. However, selecting thisway some faces could sometimes be a bit difficult. This happens when wehave two faces in the same place of the display—one behind another.Then often we select the back face instead of the front one. Therefore, in afew cases selecting faces through the Visible Geometries in the Display


panel might help us.

When all faces of the polyhedron have their own color, we can proceed tothe next step. We can merge all geometries into a single geometry. Beforedoing this, be sure that all geometries of the polyhedron are selected inVisible Geometries column. Then click on [Merge Visible] button in theDisplay panel. This will produce rather awful result like the one shown inthe figure 8.11.

Fig. 8.11 Dodecahedron after merging faces

There is worse, open the menu Inspector Geometry Material panel andcheck the flag Edge. This will show that we have edges crossing faces. Inorder to fix the model open the menu Method Modeling IdentifyElements. Here in the panel check the Flat Edges flag and click [Identify]button twice. This should fix our model. Finally, click [OK] button andthis will be the end of our problems with colors and too many geometries.The rest you know already—uncheck the Show Depth flag, check Antialias,remove unnecessary lights, add an ambient light with intensity close to0.3, and save all three files JVX.ZIP, JVD and HTML. While saving them donot forget to check back the Color flag. Otherwise, all your hard paintingwill be gone. The final model that I produced while writing this chapteryou can find on my web site as Example 3.


8.4 Developing animation for JavaView

Developing animations in MuPAD is relatively easy task. However,converting them to JavaView animations can be a more difficult job. Dueto a few differences in the animation concept in MuPAD and JavaViewnot all MuPAD animations can be sucesfully transformed into JavaViewanimation. For example, in MuPAD all animated objects may come ordisappear at any time during an animation. In JavaView all geometriesmust exist from the first to the last keyframe. At the time of writing thistext, April 2006, it is impossible to develop JavaView animation where ananimated object will appear or disappear in the middle of animation.However, as we know JavaView is developing very fast, therefore we mayexpect that future versions of JavaView will be able to deal with suchanimations also.

Let us develop two simple animations in MuPAD and convert them toJavaView. This way we will see what problems we may face whiledeveloping animations to JavaView.

We will start with a sphere in parametric form. In textbooks ofmathematics there are a few different versions of the parametric equationof a sphere. Very often students are confused what is the role of eachparameter. Which of them is responsible for growth of the sphere surfacevertically and which for its horizontal growth? Let us take an equation ofa sphere in parametric form,

// parametric equation of the spherex : r*sin(u)*cos(t):y : r*sin(u)*sin(t):z : r*cos(u): // for t0..2*PI, u0..PI:r : 1:Sphere : plot::Surface([x,y,z], t0..2*PI, u0..PI):plot(Sphere, ScalingConstrained)

The obtained plot shows a perfect red-blue sphere. Now let us add theanimation parameter for the variable t. For example, let set t0..awhere a0.01..2*PI. Observe the trick used here. If we use a0..2*PI,then for a0 the sphere does not exist. This way the sphere will not appearin the first frame of animation. As we know already this may cause someproblems later in JavaView. Therefore, we created a tiny piece of spherein the very beginning and then we will expand it into a whole sphere.Below is the complete code for producing animation of a sphere. The


animation shows the role of the parameter t in the equation of the sphere.

// parametric equation of the spherex : r*sin(u)*cos(t):y : r*sin(u)*sin(t):z : r*cos(u): // for t0..2*PI, u0..PI:r : 1:Sphere : plot::Surface([x,y,z], t0..a, u0..PI,a0.01..2*PI

):plot(Sphere, ScalingConstrained)

Let us open the obtained animation in Virtual Camera and play it a fewtimes to check if this is what we wanted. Then, like in all previousexamples, insert the camera object into the coordinate system. Finally,export the whole graphics as sphere.xvc and sphere.jvd. In MuPAD 3.xit does not make any sense saving animation JVX files. MuPAD will saveone frame of the whole animation only. In MuPAD 4.x we can save thewhole animation, i.e. a bunch of JVX files, using the export wizard. Usersof MuPAD 3.x will still have some more work to do.

If you are using MuPAD 3.x copy the obtained files into a folder whereyou will have quick and easy access from MS DOS. For example, you canuse the folder c:\temp. To the same folder copy the programxvc2jvx.exe that is usually in MuPAD main folder. Alternatively you cancopy this program from my book web site. We will use this program toproduce keyframes of the animation. At this stage this is important tounderstand what is our goal—we will produce a bunch of JVX files thatJavaView will use as keyframes for the animation. The remaining framesof the animation JavaView will interpolate automatically. Therefore, forour example we will need a few files only.

Do you know how to leave warm and comfortable Windows environmentand turn to MS DOS? The simplest way is to choose in Windows menuPrograms Accessories and then Command Prompt. This will open MSDOS window where we can type and execute DOS commands. Let us lookwhat I did to create JVX files for my animation. I show below the outputfrom my MS DOS window. After selecting the Command Prompt Iobtained a window with such messages:

Microsoft Windows XP [Version 5.1.2600](C) Copyright 1985-2001 Microsoft Corp.C:\

Now, I have to move to the folder where I saved my files, this is D:\temp.


Type the following commands and press [Enter] at the end of eachstatement.

C:\d:D:\cd temp

You should get prompt:

D:\temp

Let us check what we have in this folder. Execute the dir command todisplay the contents of the temp folder.

D:\tempdir

Here is the output:

Volume in drive D is MERLINVolume Serial Number is E08E-D385Directory of D:\temp04/19/2006 05:27 PM DIR .04/19/2006 05:27 PM DIR ..04/19/2006 05:41 PM DIR jars01/18/2005 04:46 PM 954,368 xvc2jvx.exe04/20/2006 03:08 PM 2,474 sphere.jvd04/20/2006 03:08 PM 1,053,910 sphere.xvc3 File(s) 2,010,752 bytes3 Dir(s) 4,653,727,744 bytes free

We have here all our files and JavaView jars folder. Therefore, we canproceed with creating files for the animation. The statement for creatinganimation frames is following.

D:\tempxvc2jvx -f 1 -o sphere.jvx sphere.xvc

Observe, I use here parameter -f 1 that produces one file for one secondof the animation. These will be, so called, animation keyframes. All otherframes will be created by JavaView. The -o sphere.jvx means createanimation files names as sphere.*.jvx (-o is a shortcut for the ‘output’).Finally, the last word sphere.xvc is the input file, crated by MuPAD, thatit will be used to create keyframes.

One more dir command will ensure us that we got what we wanted.

D:\tempdirVolume in drive D is MERLINVolume Serial Number is E08E-D385Directory of D:\temp04/19/2006 05:27 PM DIR .04/19/2006 05:27 PM DIR ..04/19/2006 05:41 PM DIR jars01/18/2005 04:46 PM 954,368 xvc2jvx.exe04/20/2006 03:08 PM 2,474 sphere.jvd


04/20/2006 03:08 PM 1,053,910 sphere.xvc04/20/2006 03:09 PM 70,478 sphere.1.jvx04/20/2006 03:09 PM 69,521 sphere.2.jvx04/20/2006 03:09 PM 69,417 sphere.3.jvx04/20/2006 03:09 PM 69,588 sphere.4.jvx04/20/2006 03:09 PM 69,639 sphere.5.jvx04/20/2006 03:09 PM 69,726 sphere.6.jvx04/20/2006 03:09 PM 69,877 sphere.7.jvx04/20/2006 03:09 PM 69,968 sphere.8.jvx04/20/2006 03:09 PM 70,001 sphere.9.jvx04/20/2006 03:09 PM 70,059 sphere.10.jvx04/20/2006 03:09 PM 68,830 sphere.11.jvx14 File(s) 2,777,856 bytes3 Dir(s) 4,652,826,624 bytes freeD:\temp

We can easily notice that we produced 11 keyframes. Unfortunately thesekeyframes are quite large. Therefore, downloading them through theInternet may take some time.

The last part of our work will be to create a web page that we will use todisplay the animated sphere. Close the Command Prompt window, we donot need it any more, and open the folder with animation files. Copy tothis folder one of the web pages that we created for displaying our staticmodels and modify the applet code to the following form:

APPLET width378 height378 alt"MuPAD graphics inJavaView"archive"jars/javaview.jar" code"javaview.class" param name"model" value"sphere.*.jvx"param name"displayFile" value"sphere.jvd"param name"Animation.firstKey" value"1"param name"Animation.lastKey" value"11"param name"Animation.framesPerSecond" value"15"param name"Animation.dialog" value"hide"param name"Animation.start" value"hide"param name"panel" value"display"param name"border" value"hide"

/APPLET

We know already some parts of this code. The new elements are foranimation. We declare here that our animation should start with firstkeyframe (parameter "Animation.firstKey"), the last keyframe ofanimation will be keyframe 11 (parameter "Animation.lastKey").However, we could start from any other keyframe n and finish at m, wheren m. Then we declare how many frames per second JavaView shoulddisplay, here we use 15 frames. This is a way to slow down or speed up the


animation. Finally, we declare that, after loading the web page into a webbrowser, the animation should be stopped and the animation panel notdisplayed.

Let us open the web page with animation of the sphere. If we dideverything correctly, then we should see a tiny piece of sphere withnarrow bounding box only. Click the image on the web page and press the[Ctrl][a] key combination. JavaView should display the animation panel(see fig. 8.12). Here by pressing the [Start] button we can start ouranimation. Note, the animation panel often disappears behind the webbrowser window. We can always bring it back on top of the screen bypressing [Ctrl][a].

Fig. 8.12 The animation panel in JavaView

The animation that we created needs some improvements. Thecoordinate system and the bounding box of the sphere are changingdepending on the size of the surface. We would prefer to have them bothlooking the same through the whole animation. This can be fixed byloading one of the sphere.*.jvx files, e.g. sphere.11.jvx, andsphere.jvd into JavaView, adjusting the size of the bounding box andaxes and saving only the display file sphere.jvd. Whatever, we did withthe JVX file it should not be saved. Otherwise one keyframe of theanimation will look different than other keyframes.

It makes a sense to correct the number of lights from 7 to 3, like we did itbefore. This will make less calculations for JavaView. Turning theantialias flag on or adding any special grids, background pictures, etc.,may slow down animations if too many such elements will be used. We


can check easily what will happen if we open the web page withanimation, start the animation, and start adding one by one antialias,xy-grid, then xy-grid, etc.

Let us examine in brief another example. This time we will create aLissajou curve and attach a point to it. The point will show how the curveparameters changes along the curve. Here is the code and below theresulting image.

Lissajou : [cos(3*t), sin(5*t)]:LCurve : plot::Curve2d(Lissajou, t0..2*PI):Pt : plot::Point2d(Lissajou,t0..2*PI,PointSize3,PointColorRGB::Red):plot(LCurve, Pt)

-1.0 -0.8 -0.6 -0.4 -0.2 0.2 0.4 0.6 0.8 1.0

-1.0

-0.8

-0.6

-0.4

-0.2

0.2

0.4

0.6

0.8

1.0

x

y

You know already how to produce JavaView animation from a XVC filesaved in Virtual Camera. Develop Lissajou animation in exactly the sameway like we did it before for sphere. Preview the animation in any webbrowser. The first thing that you will see is that the red point jumps fromone position on the curve to another one. The main reason for this bug isthat in this animation one keyframe per second is simply not be enough.If we create this animation again, but this time with 5 frames per second,parameter -f 5, then we will obtain much better animation. However,the number of frames will be significantly higher.

I will leave to my readers further experiments with animation inJavaView. A few simple examples are included at the end of this chapter.


8.5 Exercises

1. Develop virtual models of an ellipsoid, hyperboloid of one and two sheets,elliptic paraboloid, hyperbolic paraboloid, and elliptic cone. For each of themodels show planes of symmetry of the model.

2. Develop virtual model of Roman surface embedded into a transparenttetrahedron. Your final result may look like the one on the enclosed picture.

3. Develop virtual model of a sphere inscribed into a cone with circular baseand a sphere circumscribed on the same cone.

4. Develop virtual models of a few well know polyhedra, for exampleicosahedron, Stella octangula, etc.

5. Develop JavaView animation showing motion of planets on their orbits.Planets should be represented as points in 2D and sun as a small circle.Hint: start with the Sun and one planet. Then add one-by-one anotherplanets. The same animation can be developed in 3D.

6. Develop JavaView animation showing bouncing ball. In your animationthere should be one ball, floor and a coordinate system.

7. Develop JavaView animation of a ball bouncing inside of a rectangle.

8. Develop JavaView animation showing the motion of a cannon ball.

JavaView workshop for MuPAD users€¦ · 266 Getting started with MuPAD Later we will use this...

Documents

Transcript of JavaView workshop for MuPAD users€¦ · 266 Getting started with MuPAD Later we will use this...