https://github.com/cata77/data-transmission-formats
Data Transmission Formats Java Project
https://github.com/cata77/data-transmission-formats
html java json json-parser mathematics stax-api svg xml
Last synced: 17 days ago
JSON representation
Data Transmission Formats Java Project
- Host: GitHub
- URL: https://github.com/cata77/data-transmission-formats
- Owner: Cata77
- Created: 2022-11-20T11:10:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-03T13:30:41.000Z (over 3 years ago)
- Last Synced: 2025-03-18T18:58:29.897Z (about 1 year ago)
- Topics: html, java, json, json-parser, mathematics, stax-api, svg, xml
- Language: HTML
- Homepage:
- Size: 1.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Data Transmission Formats Java Project
Users can search the internet for free 3D model data files of their interest (e.g. famous buildings). We would like to help them to view these model files
mapped to 2D. The idea is that an application reads the 3D json file and converts it to SVG.
SVG files can be viewed with a web browser
## Functionaliy
1. Application reads 3D model json file that contains triangles shapes.
2. Application rotates the triangles, maps them to 2D and moves them to the visible portion of the screen.
3. Write the triangles as polygons into an SVG file
## Sample Input
The input can be found in the ```input``` folder.
This is a tetrahedron shape (formatting can be strange; reason is to fit on one page):
```
[
[
{
"x" : -100,
"y" : 100,
"z" : -100
},
{
"x" : 100,
"y" : 100,
"z" : -100
},
{
"x" : 0,
"y" : -100,
"z" : 0
}
],
[
{
"x" : 100,
"y" : 100,
"z" : -100
},
{
"x" : 0,
"y" : 100,
"z" : 100
},
{
"x" : 0,
"y" : -100,
"z" : 0
}
],
[
{
"x" : -100,
"y" : 100,
"z" : -100
},
{
"x" : 0,
"y" : 100,
"z" : 100
},
{
"x" : 0,
"y" : -100,
"z" : 0
}
],
[
{
"x" : -100,
"y" : 100,
"z" : -100
},
{
"x" : 100,
"y" : 100,
"z" : -100
},
{
"x" : 0,
"y" : 100,
"z" : 100
}
]
]
```
The tetrahedron rotation angles on each of the axles are (values are given in radian):
- X axis: -0.5
- Y axis: 1
- Z axis: 0.5
## Sample Output
The output can be found in the ```output``` folder.
This is an output example:
```html
```
Result displayed on screen with a web browser:
## Triangle Rotation
Rotate triangles by rotating their 3D points with this formula: rotation matrix * 3D point
1. Example for X axis rotation:
2. Matrix multiplication: https://en.wikipedia.org/wiki/Matrix_multiplication
### Rotation Matrices
- X axis rotation matrix:
- Y axis rotation matrix:
- Z axis rotation matrix:
### Rotation example
The following example demonstrates the rotation of the first 3D point from the tetrahedron on the X, Y and then Z axis using the formulas and rotation
matrices given above.
Point coordinates:
- x = -100
- y = 100
- z = -100
The rotation angles (in radian) on each of the axles:
- X = -0.5
- Y = 1
- Z = 0.5
Step 1: Rotate the point on the X axis by -0.5 radian using the given formula (with detailed matrix multiplication):
Step 2: Rotating the resulting point on the Y axis by 1 radian:
Step 3: Finally rotating the point on the Z axis by 0.5 radian will result in the following:
**Notes**: The demonstrated algorithm rotated only one point once on each of the three axles. This algorithm has to be applied on all points of each triangle.
This means that all three points of a triangle have to be rotated three times
## Mapping to 2D
1. Offset the coordinates: find the smallest x coordinate out of all of the points, if it is negative add its absolute value to every x coordinate, else do
nothing. Do the same with the y coordinates.
2. Sort the triangles: for each triangle take the average z value of the points, sort the triangles by that value in descending order.
3. Write the triangles in the given order, as polygon, only the x and, y coordinates
## Eiffel tower
Sample input files are provided in the initial code repository.
This is the Eiffel tower visualized after conversion:
Use the following rotation angles on the three axles for the Eiffel-tower (given in radian):
- X axis: 1.8
- Y axis: -0.5
- Z axis: 0
## Technology
- Read the input json with JSON-P Streaming API.
- Write the SVG with StAX XML API