The power of algorithmic generation
How to make generative art. Create awesome geometries from JS algorithms instead of from coordinates
CAD systems usually offer a wide variety of native entity types like polylines, spline curves, revolved surfaces, meshes, NURBS, etc. Additionally they have functions for transforming geometries or performing boolean combinations between entities enriching the available resources to design complex models.
Unfortunately this set of possibilities is not always enough to satisfy the design requirements in an easy way. Sometimes the desired model is the result of elaborated rules that cannot be fulfilled by a combination of the available standard entity types or operations. The most simple example could be to draw a mathematical 2D curve. Sure you don’t have an standard entity that exactly matches your needs, but probably, it is not very difficult to calculate the sequence of point coordinates in a worksheet and then pass somehow the values to the CAD application in order to draw a polyline defined by the calculated coordinates. OK, problem solved.
Now imagine you have to design an snail shell like the one represented by the picture above (Click on the image to open an interactive 3D view)
Although the CAD system disposes of meshes or other entity types suitable to handle general geometries defined by clouds of points, the situation is now much more complicated. The snail shell is a 3D surface whose vertices must be generated using a non-trivial algorithm. Furthermore the solution of the worksheet appears to be not viable because the algorithm cannot be directly implemented using the worksheet formulas and neither it is clear how to pass the set of coordinates to the CAD application. Assuming you know the math and programming concepts necessary to understand and implement the corresponding algorithm, as a designer you have the following main options:
- Customize a CAD text file: Your CAD application surely supports several drawing file formats. Some of them are ASCII files that could be manually edited like DXF, PLY, OBJ, etc. You will normally need to read the technical documentation corresponding to the file format in order to understand its structure; of course you can also try to use your intuition. After that the algorithm must be implemented in a convenient programming language to generate the desired text output (as the snail example). Then the customized drawing file can be opened and the geometry can be worked as a normal CAD entity.
- Program the CAD application: A good professional CAD software should integrate some kind of development environment (IDE). The IDE is intended to allow the designer to implement automation, it is to say, to programmatically automate the CAD functionality highly extending its possibilities. This will require from you to study the CAD developer documentation and its API. With that done you will be able to implement in the IDE programming language something like a macro or script with the algorithm to directly generate a native CAD entity. In general it is also possible to “link” the libraries of the CAD development kit to external software projects, but this may be interesting only for advanced programmers. The experience says that programming the CAD application requires a bit more effort than customizing a CAD text file, but in exchange this extra effort results in a deeper knowledge of the CAD system possibilities and will increase your productivity as designer.
- Make use of MATLAB: Software like MATLAB or similar applications is specifically intended to deal with analytic and symbolic math problems. Among other functions, you will be able to generate 2D or 3D representations of mathematical algorithms using the programming language of this application. Then you can export the generated geometry and open it in your CAD. In this case MATLAB will be used as auxiliary tool since it is not a design application.
The LAI4D’s approach
Whatever the option you choose, it is absolutely clear you will have to deal with a programming language and the corresponding development environment if you want to run the algorithm. For most CAD software packages the working with algorithms is treated as an external appendix. It is not considered part of the standard usage of the CAD tool up to the point that such design cases are not covered by the official documentation. Additionally, if the designer is not an expert programmer the work will be even harder.
Now we are going to explain how LAI4D deals with algorithmic geometries. The LAI4D designer is a light online free 3D CAD tool. This means that it is loaded and executed in a web browser as any other web page. It was originally intended to be a convenient environment for the real objective of the LAI4D project: the development of an intelligent assistant for design applications. It is not as powerful as professional desktop CAD packages but the truth is that it can handle any kind of design. Among the many interesting features offered by LAI4D, one of them is the treatment of algorithmic entities that can be summarized in the following points:
- Algorithmic entities are a native type of entity in LAI4D. A specific development environment is not necessary at all and its usage is covered by the standard documentation.
- The programming language is JavaScript (JS). It is the programming language of web pages and is natively supported by Internet browsers. Free editors and documentation are everywhere and it is a good option for beginners.
- The working philosophy is very simple. The JS code of an algorithmic entity must return another LAI4D entity in order to render it. It is not based on automation but geometry generation.
- The structure of LAI4D entities is so intuitive that the designer can focus on the algorithm itself avoiding to face an specific API. This significantly reduces the learning effort.
Although the LAI4D’s reference manual is the best and most complete source of information about algorithmic entities, the following introduction is enough to understand how they work.
What is a “program” entity in LAI4D?
Algorithmic entities are formally typed as “program” in LAI4D. The source code prototype is: {{type}{program}{code}{…}{variable}{…}}
that can also be written in multiline format as:
{
{type}
{program}
{code}
{…}
{variable}
{…}
}The LAI4D syntax is very flexible and the source code can be written in several valid ways. As any other LAI4D entity, it is a set of unpacked key-value pairs being each pair a member. A “program” entity has three members:
type: Indicates the type of entity, in this case “program”.code: Contains the JS code whose evaluation must return an entity to be rendered.variable: An optional member whose value can be freely structured and is made available to the code.
The Lai4d syntax is so simple that the source of any LAI4D entity can be immediately represented as a JS array or vice versa. Thanks to this characteristic the result of the “program” entity can directly be a JS array so there is no need to deal with an specific API to generate algorithmic entities. For example, the following “face” entity:
{
{type}
{face}
{vertices}
{
{{1}{0}{0}}
{{0}{2}{0}}
{{0}{2}{2}}
}
}can be considered equivalent to the JS array:
[
"type",
"face",
"vertices",
[
[1, 0, 0],
[0, 2, 0],
[0, 2, 2]
]
]This same conversion from LAI4D syntax to native JS data types is carried out with the member “variable” of the “program” entity.
Due to this intuitive characteristic the programmer only needs experience in JavaScript focusing his efforts in the implementation of the algorithm itself and avoiding to face the complexity of an API.
As mentioned before, a formal API does not exists. However LAI4D provides a custom JS object named “AppLai4d” reachable within the JS code intended to offer the programmer additional functionality. This object gives access to the content of the member “variable” as well as a library of geometric functions.
The simplest example
The content of the “code” member can be as simple as the source of the literal declaration of a JS array:
{{type}{program}{code}{[“type”,”sphere”,”radius”,20]}}
In this case an “sphere” entity is generated. It is a very simple strategy, but not very useful. Follow these steps to implement this example:
- Open the LAI4D designer http://widget.lai4d.org
- Press the “Edit source” button at the bottom-left corner to show the source editor tool.
3. Copy the source code of the “program” entity and paste it into the text area of the source editor tool.
4. Press the “upload” button at the header of the tool to interpret and render the new drawing source.
The result should be something like this:
Any synchronous JS code would be valid so the next variation can also be tested:
{{type}{program}{code}{[“type”,”sphere”,”radius”,prompt(“radius”, 20)]}}
A mathematical curve
This other example, although very simple too, is much more interesting and didactic:
{{type}{program}{code}{(function ()|123|
/*Represent function Y = sinus(X)*/
var result = ["type","curve","vertices",[]];
for(var x = 0; x <= 360; x+=10)|123|
result[3].push([x*Math.PI/180, Math.sin(x*Math.PI/180)]);
|125|
return result;
|125|)();}}In this case the algorithm tries to represent the 2D curve y=sinus(x) for the range 0–360º generating the XY coordinates of the vertices of a “curve” entity.
It is a good practice to encapsulate the JS code within a function that is executed in the same sentence. The JS code is evaluated calling the “eval” JS native function. With the encapsulation you control the context for JS variables and what is returned. As a normal JS code you can use JS comments. However, curly brackets cannot be directly used because those characters have a special meaning in the LAI4D syntax.
But you don’t have to worry about especial characters since this conversion is carried out by the “Tree explorer” tool of the LAI4D designer widget. Follow the same steps explained for the previous example to implement this one. Once rendered, if you perform a long press over the painted curve the context menu will be shown offering several options. Click the button of the “Tree explorer” tool in order to inspect the entity as a tree of editable nodes.
The context menu allows to access the “Tree explorer” for the selected entity, but this tool is also available through the main menu of the LAI4D widget for the whole drawing whose tree of nodes can also be navigated up to the corresponding entity.
By default the nodes are presented in “content view” mode. This mode allows to view or edit the real content of the node avoiding the LAI4D syntax rules. This can be easily checked in the node corresponding to the value of the “code” member where there are no traces of special character codification. At the left side of each node there is an square blue button that allows to change the view mode to “source view”. The value of a node can be edited in both modes, but in the “source view” it is necessary to take into account the LAI4D syntax.
This said, it is clear that the user should write the JS code in his preferred JS editor and then, copy and paste it to the appropriate node of the “program” entity in “content view” mode through the “Tree explorer” tool.
A mathematical surface
This example shows how easy is to obtain the 3D representation of a “z=F(x,y)” function using a “program” entity.
In this case the algorithm returns a “mesh” entity whose “table” member is convenient for arranging the data generated by this kind of functions. A set of vertex colors are calculated for artistic purposes.
Random city
With this example you can learn how to return a set of entities (in this case “box” entities) grouped within a group entity.
The algorithm randomly decides box sizes, positions and colors trying to set greater box heights at the center of the ground area. Each time the entity is rendered a new distribution is obtained due to the usage of random functions.
Terrain generator
A similar approach is used now to generate a terrain fragment with colored mountains and a water plane.
The “variable” member allows to decide the ground side, the maximum height, the density of the mesh, the possibility of making it smooth and the color list that will be interpolated according to the heights. Always the drawing is regenerated a new terrain is obtained.
Fractals
Fractals are the typical example of algorithmic entity intended mainly for artistic purposes.
The generator code will normally involve some kind of recursive function. The next is the same “program” entity but with the member “variable” modified.
Technical use
This is a relevant and didactic example for those who want to exploit algorithmic entities for industrial purposes in a web environment. The example combines the use of a “program” entity with some basic web development methods in order to obtain a mechanic spindle configurable via web form.
The link opens an HTML page showing an IFRAME at the left and a web form at the right. The form allows to configure several parameters which define the geometry of a mechanic spindle. The button “REGEN” takes all parameters and generates a new URL for the IFRAME in order to paint the expected spindle.
The URL start-up instructions of the IFRAME always points to the same file which contains a very simple “program” entity. Its algorithm needs a set of variables also passed through the start-up instructions. This is a good example of how the “append” member of the start-up instructions can be combined with inheritance to get a drawing configurable via URL.
Advanced
If you want to see advanced usage of JS generative algorithms visit REIVGEN Studio. They use LAI4D’s technology in order to offer beautiful generative art that can be customized from the web browser with a single button.
FFind more detailed explanations about the LAI4D functionality on the Reference manual. See also the tutorial How to design a 3D model with LAI4D.
