ParametricSurface3D

Own

colormap

Description

HSV color range for colormap. Supply lower bound [z_min, hue_min] on z-value and corresponding hue value, as well as upper bound [z_max, hue_max] on z-value and corresponding hue value. Further, values for saturation and value of HSV.

Type

object

Default Value

{
  min: [-5, 190],
  max: [5, 0],
  s: 0.9,
  v: 0.9
}

Source

options3d.js, line 1450

polyhedron

Description

Attributes for the polyhedron3d in case style='triangle' or style='rectangle'. Specifications are e.g.

• strokewidth: 0
• fillColorArray: ['white', JXG.palette.blue]

Type

object

Default Value

{ strokewidth: 0, fillColorArray: ['white', 'black'] }

Examples

var F = (x, y) => Math.cos(x * y / 4);

var view = board.create('view3d', [
   [-6, -3], [8, 8],
   [[-5, 5], [-5, 5], [-5, 5]]
 ], {
   xPlaneRear: {visible: false},
   yPlaneRear: {visible: false},
   depthOrder: {enabled: true}
 });

// 3D surface
var c = view.create('functiongraph3d', [F, [-5, 5], [-5, 5]], {
   strokeWidth: 1, // ignored
   stepsU: 10,
   stepsV: 10,
   tiling: 'triangle',
   type: 'shader',
   polyhedron: {
       strokeWidth: 0, // has priority
       fillOpacity: 0.9,
       shader: {
           enabled: true,
           hue: 20,
           saturation: 90,
           minlightness: 50,
           maxLightness: 80
       }
   }
});

var view = board.create('view3d',
    [
        [-6, -3], [8, 8],
        [[-5, 5], [-5, 5], [-5, 5]]
    ], {
        xPlaneRear: {visible: false},
        yPlaneRear: {visible: false}
    });

// Function F to be plotted
var F = (x, y) => y - x;

// 3D surface
var c = view.create('functiongraph3d', [F, [-5, 5], [-5, 5]], {
    stepsU: 9,
    stepsV: 9,
    type: 'colorarray',
    tiling: 'rectangle'
});

Source

options3d.js, line 1472

stepsU

Description

Number of intervals the mesh is divided into in direction of parameter u. If stepsU = 0 and type is 'wireframe' a 3D wireframe plot in one direction is created.

Type

Number

Source

options3d.js, line 1628

stepsV

Description

Number of intervals the mesh is divided into in direction of parameter v. If stepsV = 0 and type is 'wireframe' a 3D wireframe plot in one direction is created.

Type

Number

Source

options3d.js, line 1637

type

Description

Description of how the mesh is visualized. Possible values are 'wireframe', 'rectangle', 'triangle'. In case of tiling:'wireframe', a rectangular mesh is displayed, the number of steps is determined by the attributes stepsU and stepsV. Further, the attributes strokeWidth and strokeColor, ... determine the style of the mesh.

In case of tiling:'triangle' or tiling:'rectangle' a polyhedron3d element is displayed, using the attributes stepsU and stepsV. In case of triangle, equilateral triangles are created if stepsV==0.

All other attributes of the polyhedron3d have to be set inside of polyhedron, including strokeWidth and strokeColor. The wireframe settings for these attributes are ignored.

At the time being (v1.13+), this attribute is immutable.

Type

String

Default Value

'wireframe'

See

• ParametricSurface3D#polyhedron

Examples

var view = board.create('view3d',
    [
        [-6, -3], [8, 8],
        [[-5, 5], [-5, 5], [-5, 5]]
    ],
    {
        xPlaneRear: {visible: false},
        yPlaneRear: {visible: false},
    });

// Function F to be plotted
var F = (x, y) => Math.cos(x * y / 4);

// 3D surface
var c = view.create('functiongraph3d', [
    F,
    [-5, 5],
    [-5, 5],
], {
    strokeWidth: 0.5,
    stepsU: 70,
    stepsV: 70,
    type: 'wireframe'
});

var view = board.create('view3d',
    [
        [-6, -3], [8, 8],
        [[-5, 5], [-5, 5], [-5, 5]]
    ],
    {
        xPlaneRear: {visible: false},
        yPlaneRear: {visible: false},
    });

// Function F to be plotted
var F = (x, y) => Math.cos(x * y / 4);

// 3D surface
var c = view.create('functiongraph3d', [
    F,
    [-5, 5],
    [-5, 5],
], {
    stepsU: 15,
    stepsV: 15,
    type: 'colorarray',
    tiling:'triangle'
});

var view = board.create('view3d',
    [
        [-6, -3], [8, 8],
        [[-5, 5], [-5, 5], [-5, 5]]
    ],
    {
        xPlaneRear: {visible: false},
        yPlaneRear: {visible: false},
    });

// Function F to be plotted
var F = (x, y) => Math.cos(x * y / 4);

// 3D surface
var c = view.create('functiongraph3d', [
    F,
    [-5, 5],
    [-5, 5],
], {
    stepsU: 15,
    stepsV: 15,
    type: 'shader',
    tiling: 'rectangle'
});

var view = board.create('view3d',
    [
        [-6, -3], [8, 8],
        [[-5, 5], [-5, 5], [-5, 5]]
    ],
    {
        xPlaneRear: {visible: false},
        yPlaneRear: {visible: false},
    });

// Function F to be plotted
var F = (x, y) => 3 * Math.sin(Math.sqrt(x ** 2 + y ** 2));

// 3D surface
var box = [-5, 5];
var c = view.create('functiongraph3d', [F, box, box], {
    type: 'colormap',
    stepsU: 30,
    stepsV: 30,
    tiling: 'rectangle',
    colormap: {
        min: [-3.5, 240],
        max: [3.5, 0],
        s: 0.5,
        v: 0.9,
        map: function(x, y, z) { return x + z; }
    },
    polyhedron: {
        strokeWidth: 0.3,
        fillOpacity: 1
    }
});

Source

options3d.js, line 1163

Inherited