FLYP Markup Language

Explore the FLYP language in comparison with HTML5 (SVG-graphics), which will allow to get acquainted with the language quickly, effectively and graphically. Analogues from SVG will be presented on a yellow background, FLYP will be presented on a blue background. This is a demo page. Full interactive documentation for the FLYP language will be built in the Flypoint 3D Browser. Moreover, it is written in the FLYP language itself, and provides an opportunity to check the operation of each element and parameter. On the video Flypoint 3D Browser. Shapes you can see the interactive help on FLYP in work

If you do not see the drawings at the left on the yellow background, then your HTML browser does not support SVG

Line

<html>
	<body>
		<svg>
			<line x1="20" y1="40" x2="180" y2="160" stroke="dimgray" stroke-width="3"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<line a="20,40" b="180,160" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

Points in FLYP can be both two-dimensional and three-dimensional. If a line in space is needed, its points can be defined as follows: a="20,40,10" b="180,160,30"". Thus, the z coordinate is optional. In addition, FLYP allows you to refer to a point: a="#pnt", where pnt is the id of the point declared as <point id="pnt" x="20" y="40" z="10"/>. This gives widest possibilities for scene management

Circle

<html>
	<body>
		<svg>
			<circle cx="100" cy="100" r="80" stroke="dimgray" stroke-width="3" fill="none"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<circle pos="100,100" r="80" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

In the SVG examples, the settings for the viewing area are omitted. In FLYP, you do not need to prepare the viewing area, because the camera settings are automatically set and controlled by the user. FLYP also does not contain units management tools for linking pixels to millimeters, for example. The 3D scene can be described by any units and displayed uniformly

Spline

<html>
	<body>
		<svg>
			<path d="M20,40 T40,50 T100,40 T180,160" stroke="dimgray" stroke-width="3" fill="none"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<spline points="20,40 40,50 100,40 180,160" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

In SVG it is very difficult to work with splines, because path contains not only the points of the spline itself, but also symbols indicating such mathematical terms as, for example, cubic and square Bezier curves. In addition, path contains the coordinates of the guiding curves, which do not lie on the curve itself. In FLYP - it's just the word spline and its points! We tried to hide math from the user as deep as possible

Composite

<html>
	<body>
		<svg>
			<path d="M70,160 L40,160 L40,40 L70,40 Q160,40 160,100 T70,160" stroke="dimgray" stroke-width="3" fill="none"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<composite path="L:70,160 40,160 40,40 70,40 С:160,100" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

The complexity of the path element in SVG is due to its versatility - it can contain line segments and smooth curves alike. We went further, and our composite can, in addition, contain curves of any type - an arc, for example. At the same time, composite is much simpler - it is possible to set the points directly in the element as clearly as possible. FLYP composite is also 3D and fully animated! It is no longer necessary to specify tangents for a smooth connection - FLYP does this automatically, you just need to set the desired symbol of connection

Area

<html>
	<body>
		<svg>
			<rect x="20" y="40" width="160" height="120" rx="30" ry="20" stroke="dimgray" stroke-width="3" fill="palegreen"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<rect-area pos="20,40" x="160" y="120" rx="30" ry="20" color="palegreen" border="3 dimgray"/>
		</body>
	</site>
</flyp>

Closed curves in SVG may have a fill. In FLYP, there is no need to enter such a fill, because it has surfaces. Thus, the curves and surfaces are separated and have their own particular properties. You can, for example, move along a curve or surface, draw curves on a surface, set boundaries of surfaces with a special style, use curves to create extrusion surfaces, etc. In this case, the analogue of the SVG’s filled-in rectangle with rounded corners is the special surface rect-area

Transformation

<flyp>
	<site>
		<body>
			<plane u-range="-100,100" v-range="-100,100" color="springgreen" opacity="0.2"/>
		</body>
		<building pos="-20,-20">
			<body>
				<cylindrical-surface r="25" v-range="0,80" color="gold" opacity="0.2"/>
			</body>
			<storey pos="0,0,80">
				<body>
					<plane u-range="-70,70" v-range="-70,70" color="dodgerblue" opacity="0.2"/>
				</body>
				<element pos="-40,0">
					<body>
						<toroid pos="0,0,12" major-r="10" minor-r="12" color="greenyellow"/>
					</body>
				</element>
				<element pos="0,40" ang="70,0,0">
					<body>
						<plane u-range="0,64" v-range="0,36" texture="../-/640x360.jpg"/>
					</body>
				</element>
			</storey>
		</building>
	</site>
</flyp>

The positioning of elements in FLYP is very easy with the pos and ang parameters. Nesting of elements into each other also means the nesting of coordinate systems. Above you can see the FLYP-code of the 3D scene shown in the figure – this is a very compact and intuitive code! Instead of elements, SVG offers a universal g tag. In order to simply move and scale the picture with the help of it, you need to write the following:

<html>
	<body>
		<svg width="200" height="200">
			<g transform="translate(20,40)">
				<g transform="scale(1.3)">
					<path d="M30,100 L0,100 L0,0 L30,0 Q70,0 70,50 T30,100" stroke="dimgray" stroke-width="3" fill="none"/>
				</g>
			</g>
		</svg>
	</body>
</html>

The same thing in FLYP is done by simply specifying pos="20,40" scale="1.3" in the element's parameters. We will not even try to repeat the positioning of the five elements in SVG, as in the original FLYP example - it's very difficult, despite the fact that it is only 2D

Elements

<flyp>
	<site>
		<element name="Camera">
			<var>
				<string name="Manufacturer" value="No name"/>
				<real name="Fovy" value="62.5"/>
			</var>
			<body>
				<axis length="5"/>
				<conical-surface axe-z="0,0,-1" r1="3" r2="4.8" v-range="0,8" color="slategray"/>
				<line a="0,-1,-8" b="0,-0.01,-8" color="yellow"/>
				<line a="0,0.01,-8" b="0,1,-8" color="yellow"/>
				<line a="-1,0,-8" b="-0.01,0,-8" color="yellow"/>
				<line a="0.01,0,-8" b="1,0,-8" color="yellow"/>
			</body>
		</element>
	</site>
</flyp>

In FLYP there are structural elements - site, building, storey. They can be compared to such elements of HTML5 as body, article, section, aside, etc. The svg tag can be compared to element in FLYP, but this is a fairly conditional comparison, because site, building, storey and element are identical to each other. There is only a condition that an element cannot contain a building, for example, etc.

Each element in FLYP can contain several variants of geometry decomposed according to the representations (body, plan, annotation), and a descriptive section var that is not displayed on the screen. In this section there is not only hidden geometry, which can be referenced from representations, but also a descriptive part consisting of parameters. The data structure is such that it can be used, for example, to build a digital model of a building that meets the requirements of the Industrial Foundation Classes standard. Each element can also contain other elements inside itself and be at the same time as complex and meaningful as a whole HTML-site!

We are starting a series of video tutorials on creating models in Flypoint 3D Browser

The idea is to show the creation process step by step, starting from an empty template and ending with an animated interactive world!

In this brief review, there have been left aside such stunning possibilities of FLYP as:

Animation of all element parameters and geometry

The mechanism of reaction to events, allowing to launch disturbance waves throughout the model

Creation of various 2D and 3D controls, which receive events from the user

Lists of representations in which computer game characters created in external mesh editors can be found

Capabilities of the geometric core, not inferior to those in CAD systems

Views and cameras that allow you to turn your 3D site into an analog of any game - action, strategy, auto simulators and flight simulators

The possibilities of building large scenes using parametric worlds created by someone earlier

And finally, these and many other possibilities of FLYP allow creating a worldwide virtual reality with game, business, or scientific behavior!