Geom's tutorial

Design examples

Below three repositories showcasing the usage of the library geometrix and its associated framework parametrix:

1. parame51 containing the library desi51 and the associated UI desi51-ui
2. parame52 containing the library desi52 and the associated UI desi52-ui
3. parame53 containing two libraries desi53 and desi53b and the associated UI desi53-ui

Tutorial of the Geometrix concepts

Simple design

• myPartA source
• myPartA page

myPartA goes through the required steps of a 3D part description.

Programmatically, defining a 3D-part-design consists of creating a const object of type tPageDef.

API:

• tPageDef

Parameter types

• myPartB source
• myPartB page

myPartB illustrates the usage of the 3 types of parameters:

• numerical parameter
• dropdown parameter
• checkbox parameter

myPartB also illustrates the usage of section-separator for grouping the parameters into sections. Those sections helps understanding the parameters. Each section can be hidden for enhancing the user-experience. The first section is created automatically (you don’t need to declare it) and is called main.

API:

• pNumber()
• pDropdown()
• pCheckbox()
• pSectionSeparator()

Extrusion and 3D construction

• myPartC source
• myPartC page

myPartC illustrates the usage of the 2 types of extrusion:

• linear-orthogonal extrusion along the axis Oz
• rotation-revolution extrusion along the axis Oy

And the usage of the 4 types of boolean operations:

• identity : just an alias to the first element of the list
• union : merge/fuse the list of parts in one part
• substraction : remove from the first element of the list the overlaping portion of the rest of the list
• intersection : common portion of all elements of the list

API:

• EExtrude
• EBVolume

Evidences of the power of 2D technical drawings

• myPartD source
• myPartD page

myPartD has simple 2D figures but a complex 3D shape. 2D technical drawing provides a simple representation of complex shape.

Contour creation with absolute/relative cartesian/polar coordinates

• myPartE source
• myPartE page

myPartE illustrates how to create contours using the four types of coordinates:

• cartesian absolute : X,Y relative to the figure origin
• cartesian relative : x,y relative to the previous point of the contour
• polar absolute : angle, length relative to the figure origin
• polar relative : angle relative to the horizontal, length relative to the previous point

The first point of a contour is always in cartesian absolute.

API:

• .addSegStrokeA()
• .addSegStrokeR()
• .addSegStrokeAP()
• .addSegStrokeRP()

Contour corner options

• myPartF source
• myPartF page

myPartF illustrates how to apply the four possible corner types:

• pointed (i.e. no corner)
• rounded
• widened
• wideAcc

The corner of the first point of a contour can be set at the begining of the contour chain or at the end of the contour chain.

In the UI, click on the checkboc main skeleton and points to activate the corresponding drawing layers. It helps to understand the contours.

API:

• .addCornerPointed()
• .addCornerRounded()
• .addCornerWidened()
• .addCornerWideAcc()

Contour transformations

• myPartG source
• myPartG page

myPartG illustrates how to apply the four following transformations on contours:

• rotate contour
• scale contour
• translate contour with parameters x,y
• translate contour with parameters angle,length

API:

• .rotate()
• .scale()
• .translate()
• .translatePolar()

Partial contour

• myPartH source
• myPartH page

myPartH illustrates how to create a partial contour (i.e. a not closed contour) and re-use it several times to create complete contour (i.e. a closed contour).

The method .addPartial() automatic translate the new piece of contour, so the first point of the partial contour fits with the last point of the contour.

API:

• .addPartial()

Figure transformations

• myPartI source
• myPartI page

myPartI illustrates how to apply to all layers of a figures the following transformations:

• rotate figure
• translate figure with parameters x,y
• translate figure with parameters angle,length

myPartI illustrates also how to merge figures together.

This design is using the time parameter t. Play with the time control to see the effect of this t parameter.

API:

• .rotate()
• .translate()
• .translatePolar()
• .mergeFigure()

Re-using figures of other designs

• myPartJ source
• myPartJ page

myPartJ illustrates how to re-use figures defined in other designs. myPartJ imports the designs myPartF, myPartG and myPartI to use their figures.

The optional sub-design section is populated. In the UI, links to the sub-designs with their parameters have been generated.

API:

• designParam()
• .setVal()
• .getParamVal()
• checkGeom()
• prefixLog()
• .mergeFigure()
• tSubDesign

Those functions are alternatives to normal javascript libraries that could also be used for sharing figures among several designs.

Assembly of 3D-parts

• myPartK source
• myPartK page

myPartK assembles 3D-parts defined in other designs. myPartK imports the designs myPartA and myPartD to use their volume definitions.

API:

• tInherit
• tSubDesign
• designParam()
• .getSuffix()
• .getPartNameSuffix()
• .getPartName()
• .getDesignParamList()

Generic UI-app and CLI-app

• myPartL source
• myPartL page

myPartL is a simple design of Maltese cross to showcase how to use the generic UI-app and CLI-app.

Context

When you develop your own 3D part library (like parame51) you typically create 4 node-packages:

• parameXYZ : your 3D part library
• parameXYZ-cli : a CLI to export your work from command-line
• parameXYZ-ui : the sveltekit project to visualize your work in a Web-UI (for github-page deployment)
• parameXYZ-uis : a small static web-server that exposes parameXYZ-ui (for offline deployment)

In parameXYZ-ui and parameXYZ-cli you define the list of designs you want to expose. Usually it corresponds to the list your 3D part library parameXYZ exports plus optionally ad-hoc external designs you want to expose as well in your UI-app or CLI-app.

Solution

Parametrix offers the helper npm-packages geomui and geomocli for creating your associated UI-app and CLI-app. create-parametrix boilerplates your UI-app and CLI-app. You can customize them afterward.

Boilerplate

For starting a new geometrix design library, use the scaffolding tool create-parametrix:

npm create parametrix@latest
# Or
npm create parametrix@latest Sam08

Alternatively, you can use parame51 as template. Or if you want to create several geometrix design libraries in your repo, use parame53 as template.

Contour with arcs

• myPartM source
• myPartM page

myPartM illustrates how to define arcs. Geometrix offers three ways to define arcs.

API:

• point()
• .middlePoint()
• .translatePolar()
• .addPointA()
• .addSegArc()
• .addSegArc2()
• .addSegArc3()
• .closeSegArc()

Contour with arcs and modified corners

• myPartN source
• myPartN page

myPartN illustrates a design with arcs and modified corners.

API:

• .addCornerPointed()
• .addCornerRounded()
• .addCornerWidened()
• .addCornerWideAcc()

Contour with double-arcs

• myPartO source
• myPartO page

myPartO illustrates double-arcs. Use double-arcs where you want to ensure the continuity of the derivate (i.e. tangent).

API:

• point()
• ShapePoint
• .addPointA()
• .addSeg2Arcs()

Functions defining a Contour

• myPartP source
• myPartP page

myPartP shows how to use a function for creating a contour.

API:

• tContour
• .translate()

Add points, lines, vectors and dynamics decorations

• myPartQ source
• myPartQ page

myPartQ shows how to use the extra layers for second contours, dynamics contours, points, lines and vectors.

• Second contours are thought for counter parts that are drawn for simulation but are not exported in 3D scripts.
• Dynamics contours are free contours that could be used to show relative speeds, displacement, etc
• Point, Line and Vector are helpers that you can use to debug your geometry.

Notice that the color of a contour can be overwritten when it is instanciated with contour(x, y, color?).

API:

• Contour()
• .addSecond()
• .addDynamics()
• Point()
• ShapePoint
• .addPoint()
• Line()
• .addLine()
• Vector()
• .addVector()

Just 2D drawings

• myPartR source
• myPartR page

myPartR shows a serie of 2D designs without 3D volume. The property vol of the object rGeome of type tGeom has been commented out.

API:

• point()
• Point()
• .translate()
• .translatePolar()

A serie of blade profiles

• myPartS source
• myPartS page

myPartS shows a serie of blade profiles. Wing is a complex shape that cannot be described with Parametrix. But a serie of 2D profiles can approximate the ideal shape description.

API:

• .rotate()
• .translate()
• .translatePolar()
• .rotate()
• tExtrude

Expose external design

• myPartT source
• myPartT page

myPartT is a re-export and rename of myPartA of the library desi51.

For this re-export, two modifications are required:

• desi51 must be installed as dependency of desi53b
• the svg files of desi51 must be copied in the pgdsvg directory of desi53b

API:

• tPageDef
• tParamDef

Assembly using external design

• myPartU source
• myPartU page

myPartU is an assembly of external design myPartA of the library desi51.

As the module myPartT overwrites the partName, the new name myPartT must be used.

API:

• designParam()
• .getSuffix()
• .getPartNameSuffix()
• .getPartName()
• .setVal()
• checkGeom()
• prefixLog()
• .mergeFigure()

Transitive reuse of designs

• myPartV source
• myPartV page

myPartV re-exports myPartK, which is itself an assembly of other designs.

Computing the 3D-rotation and 3D-translation of an extrusion with transform3d

• myPartW source
• myPartW page

myPartW illustrates the usage of transform3d for computing the 3D-rotation and 3D-translation to apply to an extrusion sub-part. transform3d helps to combine a list of 3D-rotation and 3D-translation into a single 3D-rotation and a single 3D-translation.

myPartW also illustrates the usage of ctrRectangle and ctrRectRot for drawing rectangles.

API:

• transform3d()
• .addRotation()
• .addTranslation()
• .getRotation()
• .getTranslation()
• ctrRectangle()
• ctrRectRot()