Element ParametricSurface3D

JXG.GeometryElement
   ↳ JXG.Curve
      ↳ Curve
            ↳ ParametricSurface3D

A 3D parametric surface visualizes a map (u, v) → [X(u, v), Y(u, v), Z(u, v)].

Defined in: surface3d.js.
Extends Curve.

Element Summary
Constructor Attributes	Constructor Name and Description
	ParametricSurface3D A 3D parametric surface is defined by a function F: R² → R³.

Attributes Summary
Field Attributes	Field Name and Description
	colormap HSV color range for colormap.
	polyhedron Attributes for the polyhedron3d in case `style='triangle'` or `style='rectangle'`.
	stepsU Number of intervals the mesh is divided into in direction of parameter u.
	stepsV Number of intervals the mesh is divided into in direction of parameter v.
	tiling Description of how the mesh is visualized.

Methods borrowed from class JXG.Curve:: addTransform, allocatePoints, Ft, generateTerm, getLabelPosition, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:: _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, toTopOfLayer, updateVisibility, useLocale

Events borrowed from class JXG.GeometryElement:: attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Element Detail

ParametricSurface3D

A 3D parametric surface is defined by a function F: R² → R³.

Possible parent array combinations are:
{Function} F_X
{Function} F_Y
{Function} F_Z
{Array|Function} rangeU
{Array|Function} 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.
{Function} F
{Array|Function} rangeU
{Array|Function} rangeV: Alternatively: F_[X,Y,Z](u,v) a function returning an array [x,y,z] of numbers, rangeU and rangeV as above.

Throws:
{Exception}: If the element cannot be constructed with the given parent objects an exception is thrown.

Examples:

Attribute Detail

colormap

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.
Defined in: options3d.js.

Default Value:

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

polyhedron

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

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

Defined in: options3d.js.

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'
});

See:: ParametricSurface3D#style

Default Value:

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

{Number} stepsU

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.
Defined in: options3d.js.

{Number} stepsV

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.
Defined in: options3d.js.

{String} tiling

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.
Defined in: options3d.js.

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'
});

See:: ParametricSurface3D#polyhedron

Default Value:: 'wireframe'

Attributes borrowed from other Elements

Attributes borrowed from class Curve:: curveType, doAdvancedPlot, doAdvancedPlotOld, firstArrow, handDrawing, label, lastArrow, numberPointsHigh, numberPointsLow, plotVersion, RDPsmoothing, RDPthreshold, recursionDepthHigh, recursionDepthLow
Attributes borrowed from class JXG.Curve:: lineCap
Attributes borrowed from class JXG.GeometryElement:: aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, ignoreForLabelAutoposition, isLabel, layer, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel

Fields borrowed from other Elements

Fields borrowed from class JXG.Curve:: dataX, dataY, numberPoints, qdt, ticks
Fields borrowed from class JXG.GeometryElement:: _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc

Methods borrowed from other Elements

Methods borrowed from class JXG.Curve:: addTransform, allocatePoints, Ft, generateTerm, getLabelPosition, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:: _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, toTopOfLayer, updateVisibility, useLocale

Events borrowed from other Elements

Events borrowed from class JXG.GeometryElement:: attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

JSXGraph 1.13.0 beta3 Reference

JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Element ParametricSurface3D