draw shapes

Shape node is used to draw a shape (rectangle or circle).
Shape contains 2 properties:

Shape {
  SFNode appearance NULL
  SFNode geometry NULL
}

appearance define the shape style (color, texture, ...).
geometry define the shape type (rectangle, circle, ...)

See Shape node chapter for more information about shape properties.

The following example draw a red rectangle at center of the screen.

Group {
    children [
        Shape {
            appearance  Appearance {
                material Material2D { emissiveColor 1 0 0 }
            }
            geometry Rectangle { size 50 50 }
        }
    ]
}

Rectangle shape

We can draw:

a rectangle: geometry Rectangle { size 50 50 }
a circle: geometry Circle { radius 25 }
a custom shape with IndexedFaceSet2D node
a picture (see picture tutorial)
a text (see text tutorial)

We can define custom shape with the IndexedFaceSet2D node.

IndexedFaceSet2D {
  MFInt32 coordIndex []
  SFNode coord NULL
  SFNode color NULL
}

coordIndex: Array of coordinate index.
coord: Coordinate2D node (array of coordinates).
color: Color node

To illustrate this node, we'll draw this shape:
Rectangle shape

5 points :

(-10,-10): bottom / left point
( 10,-10): bottom / right point
( 10, 10): top / right point
(-10, 10): top / left point
(-15, 0): center / left point (arrowhead).

The final coordinate array:

coord Coordinate2D {
  point [
    -10, -10,  # point 0
     10, -10,  # point 1
     10,  10,  # point 2
    -10,  10,  # point 3
    -15,   0   # point 4
  ]
}

IndexedFaceSet2D use an array of index to connect points and draw the shape.
Array of coordinates (using points index):

0, 1 - connect (-10,-10) point to ( 10,-10) point
1, 2 - connect ( 10,-10) point to ( 10, 10) point
2, 3 - connect ( 10, 10) point to (-10, 10) point
3, 4 - connect (-10, 10) point to (-15, 0) point
4, 0 - connect (-15, 0) point to (-10,-10) point

coordIndex [
  0, 1,
  1, 2,
  2, 3,
  3, 4,
  4, 0
]

Shape color: Green

Note:
An array of color can be used, but only first color is used by MeMo.

color Color { color 0.0 1.0 0.0 }

Final code:

Group {
    children [
        Shape {
          appearance Appearance {}
          geometry IndexedFaceSet2D {
            color Color { color 0.0 1.0 0.0 }
            coordIndex [
              0, 1,
              1, 2,
              2, 3,
              3, 4,
              4, 0
            ]
            coord Coordinate2D {
              point [
                -10, -10,  # point 0
                 10, -10,  # point 1
                 10,  10,  # point 2
                -10,  10,  # point 3
                -15,   0   # point 4
               ]
            }
          }
        }
    ]
}

By default, the shape is draw at center of the screen (The origin of the coordinate is the center of the screen).
To move shape, use the Transform2D node.

Transform2D {
  MFNode children NULL
  SFVec2f translation 0 0
  SFVec2f scale 1 1
  SFFloat rotationAngle 0
}

children: Array of nodes (shapes).
translation: New position (relative to the previous position).
scale: Scale.
rotationAngle: Rotation (radians).

Warning:
scale and rotationAngle increase processing and memory consumption.

See Transform2D node chapter for more information about transformation.

We try to move and rotate the previous shape.
Shape transformation

We move the previous shape at (30,30) position.
Previous position is (0,0). To move at position (30,30), use the (30,30) translation vector.

translation 30 30

And rotate the shape (angle: 45°).

rotationAngle 0.785398 # == (3,141592 * 45) / 180

Final example source code:

Group {
  children [
    Transform2D {
      translation 30 30
      rotationAngle 0.785398
      children [
        Shape {
          appearance Appearance {}
          geometry IndexedFaceSet2D {
            color Color { color 0.0 1.0 0.0 }
            coordIndex [
              0, 1,
              1, 2,
              2, 3,
              3, 4,
              4, 0
            ]
            coord Coordinate2D {
              point [
                -10, -10,  # point 0
                 10, -10,  # point 1
                 10,  10,  # point 2
                -10,  10,  # point 3
                -15,   0   # point 4
               ]
            }
          }
        }
      ]
    }
  ]
}