tilewave
Description
For my CSC471 final project, I decided to model the Sony Ericsson X2 Tilewave panel.
The overall construction of the panel is composed of multi-layered cubes of different sizes put together in order to form a GUI.
Each tile is interactive to the users clicks and mouse movements.
Specific tiles, when clicked on, can access such applications as a calculator.
Replicating the tilewave proved to be a much more difficult task than I had hoped for.
I first began by creating a single tile which would be scaled, translated, and drawn multiple times in order to create the panel.
The tile itself is a cube-shapped object with one rounded edge.
The tile consists of four different layers: one top and three sides; each layer of the side being a different color.
After successfully creating one tile, through the use of a nested for loop, I recursively created the whole panel. For debugging purposes all
tiles were drawn of the same size.
In order for the user to successfully interact with each tile, a method known as "picking" is used in order to determine which tile
the user is interacting with. The difficulty of using picking was associating both a row and column with each tile. In essence, when using
picking, a single value/name is reported back but for this particular case two values are reported back.
Another particular issue with picking is caused because of the camera's angle. Because the camera is looking down the panel,
when picking, multiple tiles can be selected at once. It is important to determine which tile is the closest. In order to do this, z-distances
to the camera must be compared.
The next important step was to animate the tiles as they are selected and not selected. A selected tile would recess and would remain in
its position until the user released it by either unclicking or by dragging their mouse and picking a different tile. The animation of each tile
guarantees that any recessed tile will return back to its normal position.
When initially doing the animation, I tried implementing the tile's movement though the parametric line equation dependent on time.
All animation was done via the glut timer function.
The name "Tilewave" refers to the fact that the tiles can be animated in such a fashion that each tile is interconnected so that moving
one tile would effect other tiles around it. This particular aspect of the panel was implemented but left out because the tiles' movement seem to
be very unnatural.
As a final touch, corresponding tiles were texture mapped in order to achieve its final apperance. All textures were edited by hand.
One particular feature that I would have liked to have implemented is the changing texture mapping of the clock. After setting up all of the
textures, when parsing the time, Visual Studio (on Windows) would crash, however, running the same code on Unix would not cause the system to crash.
This was left out of the project because of the compatibility issue.
The overall construction of the panel is composed of multi-layered cubes of different sizes put together in order to form a GUI.
Each tile is interactive to the users clicks and mouse movements.
Specific tiles, when clicked on, can access such applications as a calculator.
Replicating the tilewave proved to be a much more difficult task than I had hoped for.
I first began by creating a single tile which would be scaled, translated, and drawn multiple times in order to create the panel.
The tile itself is a cube-shapped object with one rounded edge.
The tile consists of four different layers: one top and three sides; each layer of the side being a different color.
After successfully creating one tile, through the use of a nested for loop, I recursively created the whole panel. For debugging purposes all
tiles were drawn of the same size.
In order for the user to successfully interact with each tile, a method known as "picking" is used in order to determine which tile
the user is interacting with. The difficulty of using picking was associating both a row and column with each tile. In essence, when using
picking, a single value/name is reported back but for this particular case two values are reported back.
Another particular issue with picking is caused because of the camera's angle. Because the camera is looking down the panel,
when picking, multiple tiles can be selected at once. It is important to determine which tile is the closest. In order to do this, z-distances
to the camera must be compared.
The next important step was to animate the tiles as they are selected and not selected. A selected tile would recess and would remain in
its position until the user released it by either unclicking or by dragging their mouse and picking a different tile. The animation of each tile
guarantees that any recessed tile will return back to its normal position.
When initially doing the animation, I tried implementing the tile's movement though the parametric line equation dependent on time.
All animation was done via the glut timer function.
The name "Tilewave" refers to the fact that the tiles can be animated in such a fashion that each tile is interconnected so that moving
one tile would effect other tiles around it. This particular aspect of the panel was implemented but left out because the tiles' movement seem to
be very unnatural.
As a final touch, corresponding tiles were texture mapped in order to achieve its final apperance. All textures were edited by hand.
One particular feature that I would have liked to have implemented is the changing texture mapping of the clock. After setting up all of the
textures, when parsing the time, Visual Studio (on Windows) would crash, however, running the same code on Unix would not cause the system to crash.
This was left out of the project because of the compatibility issue.