figureone
    Preparing search index...

    Interface OBJ_Surface

    Surface shape options object that extends OBJ_Generic3All and OBJ_FigurePrimitive.

    A surface is defined with a 2D matrix of points. Triangles that fill the surface are created between neighboring points in the matrix.

    If a surface is defined with 9 points (an array or arrays in JavaScript):

    Then triangles will be created between adb, deb, bec, efc, dge, ghe, ehf, and hif.

    The normal for triangle 'adb' is in the direction of the cross product of vector 'ad' with vector 'ab' (use the right hand rule where the fingers of the right hand curl from vector 'ad' to 'ab', and the thumb will then be the direction of the normal). Similarly, the normal of hif will be the direction of the cross product of hi with hf.

    Use the property invertNormals to make all the normals go in the reverse direction.

    A surface can be open or closed at the end rows or columns of the matrix. For example, a surface has closed columns if the first and last column of the matrix have identical points. A surface is has open rows if the first and last row of the matrix have different points.

    If using curved normals ('curve', 'curveRows' or 'curveColumns') with closed surfaces, use closeRows or closeColumns to ensure normal curvature is maintained at the end rows and columns.

    • points TypeParsablePoint[][] — A grid of points that define a 3D surface
    • normals flat | curve | curveColumns | curveRows — flat normals will make shading (from a light source) across a face of the object a constant color. curveRows will gradiate the shading along the rows of the grid. curveColumns will gradiate the shading along the columns of the grid. curve will gradiate the shading along both rows and columns. Use curve, curveRows, or curveColumns to make a surface look more round with fewer number of sides.
    • closeRows boolean — Set to true if first row and last row are the same, and normals is 'curveRows' or 'curve' to get correct normal calculations (false)
    • closeColumns boolean — Set to true if first row and last column are the same, and normals is 'curveColumns' or 'curve' to get correct normal calculations (false) shape
    • lines boolean — if true then points representing the edes of the faces will be returned. If false, then points representing two triangles per face and an associated normal for each point will be returned.

    To test examples, append them to the boilerplate

    const points = Fig.surfaceGrid({
      x: [-0.8, 0.7, 0.03],
      y: [-0.8, 0.7, 0.03],
      z: x => 0.2 * Math.cos(x * 2 * Math.PI),
    });
    figure.scene.setCamera({ up: [0, 0, 1] });
    figure.add({
      make: 'surface',
      points,
      color: [1, 0, 0, 1],
    });

    // Surface wire mesh
    const points = Fig.surfaceGrid({
      x: [-0.8, 0.8, 0.03],
      y: [-0.8, 0.8, 0.03],
      z: (x, y) => y * 0.2 * Math.cos(x * 2 * Math.PI),
    });
    figure.scene.setCamera({ position: [-1, -1, 0.7], up: [0, 0, 1] });
    figure.add({
      make: 'surface',
      points,
      lines: true,
      color: [1, 0, 0, 1],
    });

    // Surface with wire mesh and fill
    const points = Fig.surfaceGrid({
      x: [-0.8, 0.8, 0.03],
      y: [-0.8, 0.8, 0.03],
      z: (x, y) => {
        const r = Math.sqrt(x * x + y * y) * Math.PI * 2 * 2;
        return Math.sin(r) / r;
      },
    });
    // Orient the camera so z is up
    figure.scene.setCamera({ up: [0, 0, 1] });
    figure.add({
      make: 'surface',
      points,
      color: [1, 0, 0, 1],
    });
    figure.add({
      make: 'surface',
      points,
      lines: true,
      color: [0, 0, 0, 1],
    });

    // Simple Closed surface around the x axis
    figure.add({
      make: 'surface',
      normals: 'curveColumns',
      closeRows: true,
      points: [
        [[0, 0, 0.5], [1, 0, 0.5]],
        [[0, -0.5, 0], [1, -0.5, 0]],
        [[0, 0, -0.5], [1, 0, -0.5]],
        [[0, 0.5, 0], [1, 0.5, 0]],
        [[0, 0, 0.5], [1, 0, 0.5]],
      ],
      color: [1, 0, 0, 1],
    });

    // Simple Closed surface around the x axis with curved normals
    figure.add({
      make: 'surface',
      normals: 'curveColumns',
      closeRows: true,
      points: [
        [[0, 0, 0.5], [1, 0, 0.5]],
        [[0, -0.5, 0], [1, -0.5, 0]],
        [[0, 0, -0.5], [1, 0, -0.5]],
        [[0, 0.5, 0], [1, 0.5, 0]],
        [[0, 0, 0.5], [1, 0, 0.5]],
      ],
      color: [1, 0, 0, 1],
    });

    // Create a matrix of points by taking a profile in XY and rotating
    // it around the x axis
    const { Point, Transform } = Fig;
    const points = [];

    // Rotation step
    const dr = Math.PI * 2 / 50;
    for (let r = 0; r < Math.PI * 2 + dr / 2; r += dr) {
      // Rotation matrix of rotation step around x axis
      const m = new Transform().rotate(r, 1, 0, 0).matrix();

      // A row of points is a profile rotated by some amount r
      points.push([]);
      // Make a profile for x values from 0 to 1
      for (let x = 0; x < 1; x += 0.05) {
        // The y coordinate of the profile changes with both x value, and
        // rotation value
        const y = 0.1 * Math.sin(6 * x) + 0.25 + 0.1 * Math.cos(3 * r);
        const p = new Point(x, y).transformBy(m);
        points[points.length - 1].push(p);
      }
    }
    figure.add({
      make: 'surface',
      points,
      color: [1, 0, 0, 1],
    });
    @interface

    Settings

    Member Visibility