September 18, 2015 at 15:44Z-Desk - geometric constructions in space
Hi, Habr. I want to talk about one of my developments in the field of 3D-graphics, which I called Z-Desk.
My parents are engineers. We had a drawing board at home. There was something magical when paper was fixed on it, and a drawing was created on paper using simple tools. School drawing has become my favorite subject. The institute has a general head-breaking discipline - descriptive geometry. With the help of simple rules, it was possible to make complex spatial constructions.
At the same time, the era of personal computers came into life. The first graphic packages for building on the plane and in space appeared. I also liked all this very much. Also liked the game Descent. Who knows will understand.
At the same time I studied programming. Turbo Pascal had a Graph library. Using a simple API, you could draw lines and geometric shapes. An idea came up in my head - that if we were using a computer to add a third dimension to a drawing board, and that if it was possible to draw in volume as simple as on a screen in Turbo Pascal.
This idea roamed in my head, but could not find a way out. And so, when 3D became available in browsers through the WebGL API, I realized - the time has come.
The first attempt looked like a module to Drupal. The drawing was considered as a publication. The language for creating three-dimensional scenes was PHP. After publication, the picture could be viewed in several modes. X3Dom was chosen as the WebGL library - it used special HTML tags to create scenes.
There were advantages and disadvantages to this approach. The advantage is that for the management of materials and users it was possible to apply all the capabilities of CMS. The disadvantage was the somewhat inconvenient use of the system, a large number of actions in order to at least see something on the screen.
Although I consider this attempt to be not very successful, in the process of its implementation a lot of experience was gained and various approaches to the program and user interface of the system were tested. About this attempt I wrote an article on Habré.
habrahabr.ru/post/209496 - Creating 3D illustrations - a prototype of the system
Kind people wrote reviews, some even tried to draw something, but since the interface was heavy and incomprehensible, the system did not show much success in this direction.
Smart people in the comments advised looking towards the three.js library. Which I did. Along with the study of the library, new approaches to the system and its interface began to be drawn. The main idea is to make acquaintance with the system as simple and clear as possible - so that the finished result is just a click away from the mouse.
So the Z-Desk system appeared. In order for the system to work correctly, you need a browser with WebGL support. If you have a good graphics card and one of the latest versions of Firefox or Chrome, then most likely everything will be fine. I apologize to everyone else if something does not work.
headfire.github.io/zdesk - See the Z-Desk system in action
github.com/headfire/zdesk - Repository on GitHub
After loading, you are greeted by a three-dimensional model of a “warm tube” drawing board (greetings from childhood). The board gives the system an original look, in addition, it helps to navigate in the size and orientation of objects during construction and viewing. On the left is the program code. The starting example shows how to draw two points and connect them with a line. Above the code is a selection box for other examples. Currently created examples that describe all the features of the system.
You can draw in the plane of whatman paper. To do this, when determining the coordinates, do not specify the third coordinate (or indicate 0). In this case, the drawing will be as if drawn on paper. But if you add the Z-coordinate a miracle will happen - the drawing will spread its wings and take off above the surface of the drawing board.
JavaScript has now become the scene creation language. You can edit existing code and enter your own. After clicking on the “Run” button, it is immediately drawn in the model. If you make a mistake, the system will write an error message and highlight a line of code.
Another major change to the system - now there is no CMS. Examples are stored as simple JS files. The whole system is a static one-page application without server scripts and databases. This means that you cannot save your drawing in the system. Therefore, if you liked it, then what you created - copy it into a text editor and save it in your file. In the future, it will be necessary to make it possible to publish the created drawings, but for the demo version this is not so relevant.
One of the prerequisites of the project, I determined the possibility of showing illustrations in stereo.
If you are a happy cross-looker, you can see the stereo drawing without any technical means. Turn on the 3D button in the control panel and bring your eyes together (be careful, after viewing, make sure that your eyes are in a normal position :).
If you press 3D a second time, the mode for 3D TVs will turn on. 3D-TVs are now no longer a wonder and are quite widespread. One trouble is not enough 3D content. The Z-Desk system is designed to solve this problem. You can connect the TV via HDMI and view the drawing in 3D mode without any drivers. Having switched to 3D-TV mode, as it was written above, use the button to open the drawing field in full screen, turn on the 3D SideBySide on the TV, put on your glasses and look at your drawing in all its beauty. The stereo mode was tested on a Philips 42 "42PFL7606H / 60 TV (for this special thanks to my friend Sergey).
Mastab constructions is set by a sheet of paper on a drawing board. This is not just a sheet, but a drawing format A0 (841 × 1189). All coordinates of the objects must be correlated with these sizes. Zero is in the center of the sheet. Z axis up. The coordinate system can be moved and rotated with a special command. All subsequent construction will be carried out taking into account the new position of the coordinate system.
Points, lines, arrows, and other objects are modeled by bodies, that is, they have a certain thickness and volume. Although this adds to the entertainment, particularly small structures look sloppy - so you should draw larger ones.
For the construction, various colors can be used. For different types of objects, the color is set separately. This is done so that you can set the color scheme and then make constructions in the same style without constantly switching the color context. In addition to color, objects can be set to transparency. This is useful, for example, when you want to depict auxiliary or explanatory constructions.
Everything has been done in the system to create really useful illustrations. At any point in space you can create text labels and they will move with the model, but at the same time remain in the plane of the screen and be readable. In addition, you can display information at the top of the drawing in plain text.
In geometric problems, it is often required to mark segments or angles as the same. At school, we did this by inflicting serifs (one to four) in the middle of a segment. The corners were marked with small arcs according to the same principle. This simple method is implemented in the system.
If you decide to illustrate the sequential construction of several steps, then this is also possible. A drawing can contain several slides and you can control the visibility of objects by placing them only on the required slides.
For completeness, I give a complete list of commands for building drawings:
I think such a system may have some academic interest.
I came across the opinion that illustrations using programming are inconvenient to create, and that something like a voluminous editor is needed. Indeed, there are flaws in the approach with the language, but there are also advantages. The use of a programming language gives a great advantage in exact, in repetitive, and in parametric constructions. And further:
Indeed, when you try to arouse interest in programming in children, you need some entertainment. When you write several pages of code, and the program produces x = 3.455 as a result, then this can even cool the hottest children's hearts in the first stages.
But, if the program
gives out a super-three-dimensional drawing
- this will certainly add to the interest in children in computer science. Active development is underway on the Internet in this direction. A recent article on Geektimes on a “live” linear algebra textbook:
geektimes.ru/post/262068 - The first interactive textbook on linear algebra
This is a very interesting direction. Such approaches can and should be developed and used.
I ask you not to take this system too seriously and do not judge strictly. I just did what I wanted for a long time. And if she benefits someone, it will be great. I am very grateful to my father for instilling in me a love of engineering disciplines. I am also grateful to the creators of the three.js (WebGL) and codemirror.js libraries (code editor). Very good, thoughtful and reliable libraries.
threejs.org - WebGL 3D library
codemirror.net - Text Editor on JavaScript
Bye, Habr! Waiting for feedback ...
-
Background
My parents are engineers. We had a drawing board at home. There was something magical when paper was fixed on it, and a drawing was created on paper using simple tools. School drawing has become my favorite subject. The institute has a general head-breaking discipline - descriptive geometry. With the help of simple rules, it was possible to make complex spatial constructions.
At the same time, the era of personal computers came into life. The first graphic packages for building on the plane and in space appeared. I also liked all this very much. Also liked the game Descent. Who knows will understand.
At the same time I studied programming. Turbo Pascal had a Graph library. Using a simple API, you could draw lines and geometric shapes. An idea came up in my head - that if we were using a computer to add a third dimension to a drawing board, and that if it was possible to draw in volume as simple as on a screen in Turbo Pascal.
This idea roamed in my head, but could not find a way out. And so, when 3D became available in browsers through the WebGL API, I realized - the time has come.
First try
The first attempt looked like a module to Drupal. The drawing was considered as a publication. The language for creating three-dimensional scenes was PHP. After publication, the picture could be viewed in several modes. X3Dom was chosen as the WebGL library - it used special HTML tags to create scenes.
There were advantages and disadvantages to this approach. The advantage is that for the management of materials and users it was possible to apply all the capabilities of CMS. The disadvantage was the somewhat inconvenient use of the system, a large number of actions in order to at least see something on the screen.
Although I consider this attempt to be not very successful, in the process of its implementation a lot of experience was gained and various approaches to the program and user interface of the system were tested. About this attempt I wrote an article on Habré.
habrahabr.ru/post/209496 - Creating 3D illustrations - a prototype of the system
Kind people wrote reviews, some even tried to draw something, but since the interface was heavy and incomprehensible, the system did not show much success in this direction.
Smart people in the comments advised looking towards the three.js library. Which I did. Along with the study of the library, new approaches to the system and its interface began to be drawn. The main idea is to make acquaintance with the system as simple and clear as possible - so that the finished result is just a click away from the mouse.
Z-Desk system
So the Z-Desk system appeared. In order for the system to work correctly, you need a browser with WebGL support. If you have a good graphics card and one of the latest versions of Firefox or Chrome, then most likely everything will be fine. I apologize to everyone else if something does not work.
headfire.github.io/zdesk - See the Z-Desk system in action
github.com/headfire/zdesk - Repository on GitHub
After loading, you are greeted by a three-dimensional model of a “warm tube” drawing board (greetings from childhood). The board gives the system an original look, in addition, it helps to navigate in the size and orientation of objects during construction and viewing. On the left is the program code. The starting example shows how to draw two points and connect them with a line. Above the code is a selection box for other examples. Currently created examples that describe all the features of the system.
You can draw in the plane of whatman paper. To do this, when determining the coordinates, do not specify the third coordinate (or indicate 0). In this case, the drawing will be as if drawn on paper. But if you add the Z-coordinate a miracle will happen - the drawing will spread its wings and take off above the surface of the drawing board.
JavaScript has now become the scene creation language. You can edit existing code and enter your own. After clicking on the “Run” button, it is immediately drawn in the model. If you make a mistake, the system will write an error message and highlight a line of code.
Another major change to the system - now there is no CMS. Examples are stored as simple JS files. The whole system is a static one-page application without server scripts and databases. This means that you cannot save your drawing in the system. Therefore, if you liked it, then what you created - copy it into a text editor and save it in your file. In the future, it will be necessary to make it possible to publish the created drawings, but for the demo version this is not so relevant.
Stereo display on and without 3D TVs
One of the prerequisites of the project, I determined the possibility of showing illustrations in stereo.
If you are a happy cross-looker, you can see the stereo drawing without any technical means. Turn on the 3D button in the control panel and bring your eyes together (be careful, after viewing, make sure that your eyes are in a normal position :).
If you press 3D a second time, the mode for 3D TVs will turn on. 3D-TVs are now no longer a wonder and are quite widespread. One trouble is not enough 3D content. The Z-Desk system is designed to solve this problem. You can connect the TV via HDMI and view the drawing in 3D mode without any drivers. Having switched to 3D-TV mode, as it was written above, use the button to open the drawing field in full screen, turn on the 3D SideBySide on the TV, put on your glasses and look at your drawing in all its beauty. The stereo mode was tested on a Philips 42 "42PFL7606H / 60 TV (for this special thanks to my friend Sergey).
A few more words about the system
Mastab constructions is set by a sheet of paper on a drawing board. This is not just a sheet, but a drawing format A0 (841 × 1189). All coordinates of the objects must be correlated with these sizes. Zero is in the center of the sheet. Z axis up. The coordinate system can be moved and rotated with a special command. All subsequent construction will be carried out taking into account the new position of the coordinate system.
Points, lines, arrows, and other objects are modeled by bodies, that is, they have a certain thickness and volume. Although this adds to the entertainment, particularly small structures look sloppy - so you should draw larger ones.
For the construction, various colors can be used. For different types of objects, the color is set separately. This is done so that you can set the color scheme and then make constructions in the same style without constantly switching the color context. In addition to color, objects can be set to transparency. This is useful, for example, when you want to depict auxiliary or explanatory constructions.
Everything has been done in the system to create really useful illustrations. At any point in space you can create text labels and they will move with the model, but at the same time remain in the plane of the screen and be readable. In addition, you can display information at the top of the drawing in plain text.
In geometric problems, it is often required to mark segments or angles as the same. At school, we did this by inflicting serifs (one to four) in the middle of a segment. The corners were marked with small arcs according to the same principle. This simple method is implemented in the system.
If you decide to illustrate the sequential construction of several steps, then this is also possible. A drawing can contain several slides and you can control the visibility of objects by placing them only on the required slides.
System interface
For completeness, I give a complete list of commands for building drawings:
//Координаты на плоскости и в пространстве
place = Decart ( x, y,[z] );
place = Polar( radius, angle, [z] );
//Линии и векторы
Point ( place );
Line ( startPlace, endPlace );
Vect ( startPlace, endPlace );
Circle ( radius, place, [lookAt] );
Arc ( radius, startAngle, angle, place, [lookAt] );
//Плоские фигуры
Triangle ( aPlace, bPlace, cPlace );
//Тела
Box ( place, xSize, ySize, zSize, [lookAt], [zAngle] );
Sphere ( place, radius );
Cylinder ( place, topRadius, bottomRadius ,height, [lookAt] );
Torus ( place, mainRadius, tubeRadius, [lookAt] );
//Метки и комментарии
MarkLine ( startPlace, endPlace, marksCount );
MarkAngle( firstPlace, basePlace, secondPlace, marksCount );
Label ( place, text );
Message ( text );
//Управление координатами
Coord ( );
SetCoord ( place, [lookAt],[zAngle] );
//Цвета и прозрачность
color : GRAY, RED, GREEN, BLUE, YELLOW, MAGENTA, GYAN, BROWN
transparent : NORMAL, GLASS, CHOST
SetPointColor ( color );
SetLineColor ( color );
SetObjectColor( color );
SetTriangleColor ( color );
SetMarkColor ( color );
SetTransparent ( transparent );
//Управление слайдами
SetVisible ( startSlide, endSlide );
//Тригонометрия
PI = 3.14 ...;
angleInRadians = Rad ( angleInDegrees );
angleInDegrees = Deg ( angleInRadians );
Sin ( x ); Cos ( x ); Tan ( x );
ASin ( x ); ACos ( x ); ATan ( x );
//Степенные функции
E = 2.71 ...;
Sqr ( x ); Sqrt( x ); Power( x, y );
Log ( x ); Exp ( x );
//Полезные функции
Max ( x1, x2, x3, ... );
Min ( x1, x2, x3, ... );
Random ( min, max );
// ** углы везде задаются в радианах !!!
Wherever it might come in handy
I think such a system may have some academic interest.
- You can illustrate online textbooks and problem books on geometry, mathematics, physics, chemistry.
- You can create volumetric infographics.
- In educational institutions, you can create modern demo zones where colorful 3D illustrations are sequentially broadcast on a 3D TV.
I came across the opinion that illustrations using programming are inconvenient to create, and that something like a voluminous editor is needed. Indeed, there are flaws in the approach with the language, but there are also advantages. The use of a programming language gives a great advantage in exact, in repetitive, and in parametric constructions. And further:
- You can fun and visualize the basics of programming.
Indeed, when you try to arouse interest in programming in children, you need some entertainment. When you write several pages of code, and the program produces x = 3.455 as a result, then this can even cool the hottest children's hearts in the first stages.
But, if the program
// ZDesk - Демо - ДНК
SetCoord(Decart(-400, 0, 100), Decart(500,0,700))
var i;
var a1 = Polar(100,0,0);
var a2 = Polar(100,Rad(180),0);
var b1, b2;
for (i=1;i<150;i++) {
b1 = a1;
a1 = Polar(100,Rad(i*4),i*6);
b2 = a2;
a2 = Polar(100,Rad(i*4+180),i*6)
SetTransparent(NORMAL);
SetLineColor(BLUE);
Line(a1,b1);
Line(a2,b2);
if (i%10 == 0) {
Point(b1);
Point(b2);
SetLineColor(RED);
SetTransparent(GLASS);
Line(b1, b2);
}
}
gives out a super-three-dimensional drawing
- this will certainly add to the interest in children in computer science. Active development is underway on the Internet in this direction. A recent article on Geektimes on a “live” linear algebra textbook:
geektimes.ru/post/262068 - The first interactive textbook on linear algebra
This is a very interesting direction. Such approaches can and should be developed and used.
Conclusion
I ask you not to take this system too seriously and do not judge strictly. I just did what I wanted for a long time. And if she benefits someone, it will be great. I am very grateful to my father for instilling in me a love of engineering disciplines. I am also grateful to the creators of the three.js (WebGL) and codemirror.js libraries (code editor). Very good, thoughtful and reliable libraries.
threejs.org - WebGL 3D library
codemirror.net - Text Editor on JavaScript
Bye, Habr! Waiting for feedback ...
-