ParametricSurface3D - Documentation

Usage (signatures)

board.create('parametricsurface3d', [F1, F2, F3, rangeU, rangeV]);

F_X(u,v), F_Y(u,v), F_Z(u,v) are functions returning a number, rangeU is the array containing lower and upper bound for the range of parameter u, rangeV is the array containing lower and upper bound for the range of parameter v. rangeU and rangeV may also be functions returning an array of length two.

Parameters

Name	Type	Description
`F1`	function
`F2`	function
`F3`	function
`rangeU`	Array \| function
`rangeV`	Array \| function

Example

var view = board.create('view3d',
		        [[-6, -3], [8, 8],
		        [[-5, 5], [-5, 5], [-5, 5]]]);

// Sphere
var c = view.create('parametricsurface3d', [
    (u, v) => 2 * Math.sin(u) * Math.cos(v),
    (u, v) => 2 * Math.sin(u) * Math.sin(v),
    (u, v) => 2 * Math.cos(u),
    [0, 2 * Math.PI],
    [0, Math.PI]
], {
    strokeColor: '#ff0000',
    stepsU: 30,
    stepsV: 30
});

board.create('parametricsurface3d', [F, rangeU, rangeV]);

Alternatively: F_[X,Y,Z](u,v) a function returning an array [x,y,z] of numbers, rangeU and rangeV as above.

Parameters

Name	Type	Description
`F`	function
`rangeU`	Array \| function
`rangeV`	Array \| function

Attributes

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, give constant 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 1369

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',
   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,
    tiling: 'rectangle'
});

Source

options3d.js, line 1391

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 1543

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 1552

tiling

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,
    tiling:'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,
    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,
    tiling: 'rectangle'
});

Source

options3d.js, line 1163

Inherited

none

Throws

If the element cannot be constructed with the given parent objects an exception is thrown.
Type Exception

Details

Type: Object
Source: 3d/surface3d.js, line 442