Node
(options)
(events)
children
parents
addChild
insertChild
removeChild
removeChildAt
removeAllChildren
detach
cursor
mouseArea
touchArea
clipArea
visible
pickable
opacity
matrix
translation
translate
x
y
rotation
rotate
rotateAround
scale
bounds
selfBounds
childBounds
visibleBounds
left
right
top
bottom
center
centerX
centerY
renderer
layerSplit
Accessibility
Display
(options)
domElement
updateDisplay
rootNode
size
width
height
backgroundColor
Paintable
fill
fillPickable
stroke
strokePickable
lineWidth
lineCap
lineJoin
lineDash
lineDashOffset
strokePickable
cachedPaints
Path
shape
Image
image
Text
(options)
text
font
fontWeight
fontFamily
fontStretch
fontStyle
fontSize
lineHeight
direction
boundsMethod
HTMLText
DOM
element
interactive
LinearGradient
addColorStop
setTransformMatrix
RadialGradient
addColorStop
setTransformMatrix
Pattern
setTransformMatrix
VBox
Rectangle
rectX
rectY
rectWidth
rectHeight
cornerRadius
cornerXRadius
cornerYRadius
Circle
radius
Line
x1
x1
x2
y2
p1
p2
Font
font
family
weight
stretch
style
size
lineHeight
Color
red
green
blue
alpha
toCSS
Event
Pointer
Mouse
Touch
Pen
Trail

Tutorials

If you are just starting out, see the Tour of Scenery

Get the code

Scenery depends on a few other libraries, and needs to have them checked out as siblings. It is recommended to place all of these inside a containing directory. Make sure you have git installed, then run:

git clone https://github.com/phetsims/sherpa.git
git clone https://github.com/phetsims/chipper.git
git clone https://github.com/phetsims/perennial.git
git clone https://github.com/phetsims/utterance-queue.git
git clone https://github.com/phetsims/assert.git
git clone https://github.com/phetsims/axon.git
git clone https://github.com/phetsims/tandem.git
git clone https://github.com/phetsims/phet-core.git
git clone https://github.com/phetsims/dot.git
git clone https://github.com/phetsims/kite.git
git clone https://github.com/phetsims/scenery.git

Building

For some examples and tests, and to build a custom version, you'll need to install node.js, and grunt-cli. Then,

cd chipper
npm install
cd ../scenery
npm install
grunt

You will now have the built files under build/, and all of the documentation/examples should work locally.

Dependencies

External dependencies (please provide these in your page before loading Scenery): Internal dependencies:

Debugging

window.assertions.enableAssert();
window.assertions.enableAssertSlow();
      

or to disable assertions:

window.assertions.disableAssert();
window.assertions.disableAssertSlow();
      

In-Depth Information

See the User Input documentation for handling user-generated events.

See the layout documentation for information on handling layout containers, or our layout exemplars for working examples using sun components.

For information on Scenery's internal code, see the Implementation Notes.

Scenery API

Node

A default node can be created with new phet.scenery.Node(), but usually a parameter object is given, for example new phet.scenery.Node( { x: 20, y: 100 } ). Below are all of the available parameter object options:

Node Options

A Node (and Node subtypes) have the following parameter object options available, executed in in the order listed.

Node Events

A Node (and Node subtypes) extend Axon's Events type, which exposes the following types of events (fired when they either occur or change):

node.children

node.children is a getter/setter linked to node.getChildren() and node.setChildren( children ). This will return a copy of node's array of children, in rendering order (later children render above previous children). Making changes to the returned array will not change node's children.

This can also be used when creating a Node:

node.parents

node.parents or node.getParents() will return an array of parent nodes, but order is not significant.

node.addChild( childNode )

Appends childNode to node's list of children. childNode will be displayed above node and node's other children.

node.insertChild( index, childNode )

Inserts childNode into node's children at the specified index. node.insertChild( 0, childNode ) will make childNode the first child, and node.insertChild( node.children.length, childNode ) is the same as node.addChild( childNode ).

node.removeChild( childNode )

Removes childNode from node's children.

node.removeChildAt( index )

Removes the child node node.children[ index ] from node's children.

node.removeAllChildren()

Removes all of the Node's children.

node.detach()

Removes this node from all of its parents.

node.cursor

node.cursor is a getter/setter linked to node.getCursor() and node.setCursor( cursor ). By default it is null (default cursor), but this can be set to the string for any CSS cursor value, and some extra Scenery-specified ones below. There is a cursor example page that demos a number of available cursors.

The cursor is updated whenever display.updateDisplay is called, and event initialization like display.initializeEvents should be added so Scenery can track the mouse input.

There are some Scenery-specific cursor values that can be set:

node.mouseArea

Sets an alternative hit region when receiving mouse events. Useful for when there are gaps between children which should still respond to the event.

Accepts both arbitrary shapes (Shape) and bounding boxes (Bounds2).

The mouse area supersedes the hit regions for mouse events of the node itself and its descendants. Setting mouseArea on a Node will cause it to either return no hit (for it or its children when outside of the mouseArea) or this Node as an event target.

node.touchArea

Sets an alternative hit region when receiving touch events. Useful for expanding where the user can touch controls.

Accepts both arbitrary shapes (Shape) and bounding boxes (Bounds2).

The touch area supersedes the hit regions for touch events of the node itself and its descendants. Setting touchArea on a Node will cause it to either return no hit (for it or its children when outside of the touchArea) or this Node as an event target.

node.clipArea

node.clipArea is a getter/setter linked to node.getClipArea() and node.setClipArea( shape ). Default is null (no clipping), but when the clipArea is set to a Shape, anything outside of the clip area Shape (in the node's local coordinate frame) is not displayed. This clipping affects both the node's own display, and the display of any of its children.

clipArea currently does not affect DOM layers, and the general case can't be added in (CSS clip only allows rectangles currently).

clipArea is not currently compatible with CSS-transformed SVG rendering if the clipArea is on an ancestor of the CSS-transformed Node.

clipArea affects the bounds of the Node, and pointers are not considered "over" a node if they are outside of its clipArea.

node.visible

node.visible is a getter/setter linked to node.isVisible() and node.setVisible( boolean ). Nodes are by default visible, but when invisible they will not be displayed and will not be pickable (no input events will be targeted to them).

node.pickable

node.pickable is a getter/setter linked to node.isPickable() and node.setPickable( boolean | null ). Pickable can take three values:

Hit testing is accomplished mainly with node.trailUnderPointer and node.trailUnderPoint, following the above rules. Nodes that are not pickable (pruned) will not have input events targeted to them.

Thus in order for a Node (really, a Trail) to be able to receive input events:

  1. If the node or one of its ancestors has pickable: false OR is invisible, the node will not receive events or hit testing
  2. If the node or one of its ancestors or descendants is pickable: true OR has an input listener attached, it will receive events or hit testing
  3. Otherwise, it will not receive events or hit testing

This is useful for semi-transparent overlays or other visual elements that should be displayed but should not prevent objects below from being manipulated by user input, and the default 'null' value is used to increase performance by ignoring areas that don't need user input.

node.opacity

node.opacity is a getter/setter linked to node.getOpacity() and node.setOpacity( opacity ). Opacity should be in the inclusive range of 0 to 1, where 0 is fully transparent, and 1 is fully opaque. opacity controls not only the opacity (alpha) of the node itself, but also all of its children.

node.matrix

node.matrix (node.getMatrix(), node.setMatrix( matrix )) gets or sets the transformation matrix associated with the node, of type dot.Matrix3.

node.translation

Getting the translation: node.translation or node.getTranslation(). It always returns a dot.Vector2 instance representing the translation part of the node's transform. See dot.Matrix3.getTranslation for more information.

Setting the translation: node.translation = translation, node.setTranslation( translation ) or node.setTranslation( x, y ). In both instances, translation can be either a dot.Vector2 or an object literal like { x: 5, y: 10 }.

node.translate( x, y )

Translates the node relatively by x and y. In addition to node.translate( x, y ), node.translate( translation ) can be used, where transform is either a dot.Vector2 or an object like { x: 5, y: 10 }

node.x

node.x gets or sets the node's x-translation with node.getX() and node.setX( x ). Accessing node.x is equivalent to node.translation.x, and setting node.x is equivalent to node.setTranslation( x, node.y ).

node.y

node.y gets or sets the node's y-translation with node.getY() and node.setY( y ). Accessing node.y is equivalent to node.translation.y, and setting node.y is equivalent to node.setTranslation( node.x, y ).

node.rotation

node.rotation gets or sets the node's rotation with node.getRotation() and node.setRotation( radians ). All rotations are handled in radians ($\pi$ is a 180-degree rotation). If you wish to rotate a node by a specific rotation (instead of setting its rotation), use node.rotate

node.rotate( radians, [prepend] )

Rotates the node's transform. By default the rotation is appended to the node's transform, but the optional prepend boolean flag can be added for the rotation to be prepended to the node's transform.

node.rotateAround( point, angle )

Rotates the node by angle in radians around the dot.Vector2 point. point should be in the node's parent coordinate frame.

node.scale( x, y, [prepend] )

Scales the node in each axis. By default the scale is appended to the node's transform, but the optional prepend boolean flag can be added for the scale to be prepended to the node's transform.

node.scale( s ) will scale by s in both dimensions, and is equivalent to node.scale( s, s )

node.bounds

Returns the bounding box of this node (and its children) in the parent coordinate frame. Also available with node.getBounds(). It includes all children, regardless of whether they are visible or not.

node.selfBounds

Returns the bounding box of this node (without its children) in the local coordinate frame. Also available with node.getSelfBounds().

node.childBounds

Returns the bounding box of this node's children (without include the node's selfBounds) in the local coordinate frame. Also available with node.getChildBounds().

node.visibleBounds

Returns the bounding box of this node (and its children) in the parent coordinate frame. Also available with node.getVisibleBounds(). Unlike bounds, this includes only descendants which are visible. It is not tracked, so each call will need to traverse the subtree to get the bounds.

node.left

node.left gets or sets the left bound (minimum x value) of this node's bounds in the parent coordinate frame, with node.getLeft() and node.setLeft( x ). Setting this left bound effectively translates the node horizontally.

node.right

node.right gets or sets the right bound (maximum x value) of this node's bounds in the parent coordinate frame, with node.getRight() and node.setRight( x ). Setting this right bound effectively translates the node horizontally.

node.top

node.top gets or sets the top bound (minimum y value) of this node's bounds in the parent coordinate frame, with node.getTop() and node.setTop( y ). Setting this top bound effectively translates the node vertically.

node.bottom

node.bottom gets or sets the bottom bound (maximum y value) of this node's bounds in the parent coordinate frame, with node.getBottom() and node.setBottom( y ). Setting this bottom bound effectively translates the node vertically.

node.center

node.center gets or sets the center of this node's bounds in the parent coordinate frame, with node.getCenter() and node.setCenter( center ), which both handle the center as a dot.Vector2 instance. Setting center effectively translates the node.

node.centerX

node.centerX gets or sets the horizontal center of this node's bounds in the parent coordinate frame, with node.getCenterX() and node.setCenterX( x ). Setting centerX effectively translates the node horizontally.

node.centerY

node.centerY gets or sets the vertical center of this node's bounds in the parent coordinate frame, with node.getCenterY() and node.setCenterY( y ). Setting centerY effectively translates the node vertically.

node.renderer

node.renderer gets or sets the preferred rendering backend for the node (and children) using node.getRenderer() or node.setRenderer( renderer ).

It will always return a Renderer object back, but setting the renderer can be done either with an Renderer reference or a string (either 'canvas', 'svg', 'dom' or 'webgl'). Manually specifying a renderer may preclude future performance/quality tradeoffs from being automatically made.

Setting a renderer will have this node and its children use that renderer if they support it. This may be impossible (for instance, Paths do not support the 'dom' renderer, and DOM nodes do not support the 'canvas' renderer).

This renderer (if non-null) will override any renderers set on ancestor nodes. Effectively, a node's renderer will be decided by whatever the closest ancestor renderer that is compatible, or the scene default.

node.layerSplit

Setter backed by node.setLayerSplit( boolean ) that, when to true will cause anything rendered before or after to be in a separate layer from this node and its children.

Accessibility

For information on accessibility within scenery, please see accessibility.html.

Display

The Display is responsible for visually displaying a specific root Node and all of its descendants. It is created with new phet.scenery.Display( node, [options] ), where node is the Node to display, and the options available are documented below. Unlike earlier versions, the Display is NOT a sub-type of Node, and the root node may be referred to as the 'scene'.

Display Options

A Display has the following options for the parameter object:

display.domElement

The Display's block-level DOM element that will show all rendered content, to be added to the DOM.

display.updateDisplay()

This redraws and/or repositions whatever rendering backends are being used to display the scene. It should be called whenever the scene's display should reflect new changes, generally on each requestAnimationFrame.

display.rootNode

display.rootNode or display.getRootNode() will contain the displayed node that was passed in the constructor.

display.size

display.size is a getter/setter for display.getSize() and display.setSize( size ) which can retrieve or set the size of the display's DOM element (of type Dimension2). The size will not change until after the next updateDisplay call.

display.width

display.width is a getter/setter for display.getWidth() and display.setWidth( width ) which can retrieve or set the width of the display's DOM element. The width will not change until after the next updateDisplay call.

display.height

display.height is a getter/setter for display.getHeight() and display.setHeight( height ) which can retrieve or set the height of the display's DOM element. The height will not change until after the next updateDisplay call.

display.backgroundColor

display.backgroundColor is a getter/setter for display.getBackgroundColor() and display.setBackgroundColor( backgroundColor ) which can retrieve or set the background color (String or Color) of the display's DOM element (defaults to transparent). The background color will not change until after the next updateDisplay call.

Paintable

A trait for Node subtypes that can be filled and/or stroked with a color/gradient/pattern.

fill

Paintable nodes provide a single node.fill getter and setter that uses node.getFill() and node.setFill( fill ). node.hasFill() is also available as a quick check, and a null fill is interpreted as not having a fill.

fill can currently be either a string (interpreted as a CSS color), a Color object, or an instance of a LinearGradient, RadialGradient or Pattern.

If a Color object is used for a fill, any changes to the Color object will update this node.

fillPickable

node.fillPickable is a getter/setter linked to node.isFillPickable() and node.setFillPickable( boolean ). Paths or other Paintable objects will be considered to be under a Pointer when it is over the region where the fill is painted. This defaults to true.

NOTE: Text nodes currently do not respect this setting, since there is no easy/fast way of determining whether a point is inside or outside of a Text node's painted region.

stroke

node.stroke is a getter and setter that uses node.getStroke() and node.setStroke( stroke ). node.hasStroke() is also available as a quick check, and a null stroke is interpreted as not having a stroke.

stroke can currently be either a string (interpreted as a CSS color), a Color object, or an instance of a LinearGradient, RadialGradient or Pattern.

If a Color object is used for a stroke, any changes to the Color object will update this node.

strokePickable

node.strokePickable is a getter/setter linked to node.isStrokePickable() and node.setStrokePickable( boolean ). Paths or other Paintable objects will be considered to be under a Pointer when it is over the region where the stroke is painted. This defaults to false, as it is generally more computationally expensive, and Scenery did not support this initially.

NOTE: Text nodes currently do not respect this setting, since there is no easy/fast way of determining whether a point is inside or outside of a Text node's painted region.

lineWidth

node.lineWidth (node.getLineWidth(), node.setLineWidth( lineWidth )) controls the thickness of the stroke.

lineCap

node.lineCap (node.getLineCap(), node.setLineCap( lineCap )) controls the shape of end-caps, and uses the Canvas lineCap definitions of 'butt' (default), 'round' and 'square'.

lineJoin

node.lineJoin (node.getLineJoin(), node.setLineJoin( lineJoin )) controls the shape of segment joins, and uses the Canvas lineJoin definitions of 'miter' (default), 'round' and 'bevel'.

lineDash

node.lineDash (node.getLineDash(), node.setLineDash( lineDash )) controls any dashing of the stroke (or null for no dashing), and uses the Canvas setLineDash handling as an even-length array of dash lengths.

lineDashOffset

node.lineDashOffset (node.getLineDashOffset(), node.setLineDashOffset( lineDashOffset )) controls the how far the dash pattern in lineDash is offset from the start, same as the Canvas lineDashOffset.

cachedPaints

node.cachedPaints (node.getCachedPaints(), node.setCachedPaints( paints )) controls an array of paints (LinearGradients, RadialGradients, and Patterns) that will be kept in-memory when the node is being displayed. This allows for much faster performance switching to/from these paints. For instance, in SVG the gradients will be kept in the <defs> section even while not being used, so they don't have to be recreated when switched to (where we have seen major performance drops in the past).

Additionally, node.addCachedPaint( paint ) and node.removeCachedPaint( paint ) exist to be able to manipulate the cached paints without redoing all of them.

Path

Path is a Node subtype that includes the Paintable trait. The main displayed behavior is controlled by its single additional option shape along with the fill and stroke options.

A path is constructed with new phet.scenery.Path( options ), where options is the standard Node parameter object, where the shape should be specified.

shape

node.shape (node.getShape(), node.setShape( shape )) controls the shape of this path, and is either an instance of Kite's Shape, or it is a string representing an SVG path, and will be converted into a Shape.

Image

Image is a Node subtype that displays a single image in either Canvas, SVG or DOM. An image node is constructed with new phet.scenery.Image( image, [options] ), where image is as described in image, and options is the normal options parameter object.

image

node.image (node.getImage(), node.setImage( image )) gets or sets the 'image' of the Image node. It can be one of the following:

Text

Text is a Node subtype that (currently) displays a single line of text in Canvas or SVG. DOM and multiline support is planned. It also mixes in Paintable, so it supports fills and strokes with colors, gradients and patterns. The default fill is '#000', so text is black by default, with no stroke, so to JUST stroke text, set fill to null.

Text nodes are constructed with new phet.scenery.Text( text, [options] ), where text is described by text, and options is the standard Node parameter object.

Text Options

A Text node has the following parameter object options, in addition to the ones from Paintable.

text

node.string (node.getString(), node.setString( string )) gets or sets the string text.

font

node.font (node.getFont(), node.setFont( font )) gets or sets the entire font. This can be a Font object, or a String that is interpreted as a CSS font.

Note that Canvas places restrictions on the possible interpreted values, so only those should be set on a Text node.

fontWeight

node.fontWeight (node.getFontWeight(), node.setFontWeight( weight )) gets or sets the font weight by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

fontFamily

node.fontFamily (node.getFontFamily(), node.setFontFamily( family )) gets or sets the font family by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

fontStretch

node.fontStretch (node.getFontStretch(), node.setFontStretch( stretch )) gets or sets the font stretch by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

fontStyle

node.fontStyle (node.getFontStyle(), node.setFontStyle( style )) gets or sets the font style by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

fontSize

node.fontSize (node.getFontSize(), node.setFontSize( size )) gets or sets the font size by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

lineHeight

node.lineHeight (node.getLineHeight(), node.setLineHeight( lineHeight )) gets or sets the line height by internally forwarding to the Text node's internal Font reference.

Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.

direction

node.direction (node.getDirection(), node.setDirection( direction )) sets the LTR or RTL direction of the text. It should take on values from Canvas's context.direction, but proper bounds and renderer compatibility is not ensured yet

boundsMethod

node.boundsMethod (node.getBoundsMethod(), node.setBoundsMethod( method )) sets what type of method is used for determining Text bounds. Currently, there are three options: "fast" which may be somewhat inaccurate, is much faster, and disables Canvas rendering entirely, "fastCanvas" (default) which is similar but allows Canvas rendering but with dirty region redrawing disabled, or "accurate" which is accurate and supports dirty regions, but is much slower.

DOM

DOM is a subtype of Node that positions a DOM element inside the scene using CSS transforms. If the element is attached somewhere else, it will be removed and added into the DOM within the display's container block-level element.

DOM nodes should be constructed by passing in the DOM element, along with a parameter object if desired: new phet.scenery.DOM( element, [options] )

element

node.element (node.getElement(), node.setElement( domElement )) controls the displayed DOM element. If the element is a block-level element, it should have a specified width and height.

interactive

node.interactive (node.getInteractive(), node.setInteractive( boolean )), when set to true, will signal to Scenery's event system that preventDefault() should not be called on DOM events when the DOM node is the event target.

LinearGradient

A LinearGradient can be used in place of a color for any fill or stroke, but is usually done for Paths.

LinearGradient is constructed and used very similarly to Canvas's context.createLinearGradient, with new phet.scenery.LinearGradient( x0, y0, x1, y1 ) where the gradient goes from (x0,y0) to (x1,y1), and then color stops can be added.

addColorStop( ratio, color )

Adds a point of color along the gradient, where a ratio of 0 is a color point at (x0,y0) and a ratio of 1 is a color point at (x1,y1).

setTransformMatrix( matrix )

Given a Matrix3 for matrix, it will transform the gradient as it is applied. This should only be done before adding it as a fill/stroke to any nodes.

RadialGradient

A RadialGradient can be used in place of a color for any fill or stroke, but is usually done for Paths.

RadialGradient is constructed and used very similarly to Canvas's context.createRadialGradient, with new phet.scenery.RadialGradient( x0, y0, r0, x1, y1, r1 ) where the gradient handled between two circles, one centered at (x0,y0) with a radius r0, and the other at (x1,y1) with a radius r1. Due to SVG compatibility, this is slightly constricted, as the smaller circle needs to be completely within the larger circle. Then color stops can be added.

NOTE: Firefox 19 (Win 7) does not currently render "conic" radial gradients correctly (where x0 != x1 or y0 != y1). This does not appear to be the case with Firefox 19 on Mac, but please refrain from those edge-case gradients.

addColorStop( ratio, color )

Adds a point of color along the gradient, where a ratio of 0 is a color point at (x0,y0) and a ratio of 1 is a color point at (x1,y1).

setTransformMatrix( matrix )

Given a Matrix3 for matrix, it will transform the gradient as it is applied. This should only be done before adding it as a fill/stroke to any nodes.

Pattern

A Pattern can be used in place of a color for any fill or stroke, but is usually done for Paths.

Pattern is constructed and used very similarly to Canvas's context.createPattern, with new phet.scenery.Pattern( image ) where image is an HTMLImageElement.

setTransformMatrix( matrix )

Given a Matrix3 for matrix, it will transform the gradient as it is applied. This should only be done before adding it as a fill/stroke to any nodes.

VBox

Rectangle

Rectangle is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for Canvas and SVG.

A Rectangle is normally created with new phet.scenery.Rectangle( x, y, width, height, [options] ), but rounded corners can be specified with new phet.scenery.Rectangle( x, y, width, height, arcWidth, arcHeight, [options] ), or all of the parameters can be specified in the options with new phet.scenery.Rectangle( { rectX: _, rectY: _, rectWidth: _, rectHeight: _, ... } )

rectX

node.rectX (node.getRectX(), node.setRectX( x )) retrieves or modifies the 'x' parameter of the Rectangle.

rectY

node.rectY (node.getRectY(), node.setRectY( y )) retrieves or modifies the 'y' parameter of the Rectangle.

rectWidth

node.rectWidth (node.getRectWidth(), node.setRectWidth( width )) retrieves or modifies the 'width' parameter of the Rectangle.

rectHeight

node.rectHeight (node.getRectHeight(), node.setRectHeight( height )) retrieves or modifies the 'height' parameter of the Rectangle.

cornerRadius

node.cornerRadius (node.getCornerRadius(), node.setCornerRadius( radius )) retrieves or modifies the 'cornerRadius' parameter of the Rectangle. This effectively sets both the cornerXRadius and cornerYRadius at the same time. An assertion will fail if the getter is called while the two corner radii are different.

cornerXRadius

node.cornerXRadius (node.getCornerXRadius(), node.setCornerXRadius( radius )) retrieves or modifies the 'cornerXRadius' parameter of the Rectangle.

cornerYRadius

node.cornerYRadius (node.getCornerYRadius(), node.setCornerYRadius( radius )) retrieves or modifies the 'cornerYRadius' parameter of the Rectangle.

Circle

Circle is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for SVG.

A Circle is created with new phet.scenery.Circle( radius, [options] ) with the specified radius.

radius

node.radius (node.getRadius(), node.setRadius( radius )) retrieves or modifies the 'radius' parameter of the Circle.

Line

Line is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for SVG.

A Line is created with new phet.scenery.Line( x1, y1, x2, y2, [options] ) as a line from (x1,y1) to (x2,y2). Additionally, the constructors new phet.scenery.Line( new Vector2( x1, y1 ), new Vector2( x2, y2 ), [options] ) and new phet.scenery.Line( { x1: x1, y1: y1, x2: x2, y2: y2, [other options] } ) are supported.

x1

node.x1 (node.getX1(), node.setX1( x1 )) retrieves or modifies the 'x1' parameter of the Line.

y1

node.y1 (node.getY1(), node.setY1( y1 )) retrieves or modifies the 'y1' parameter of the Line.

x2

node.x2 (node.getX2(), node.setX2( x2 )) retrieves or modifies the 'x2' parameter of the Line.

y2

node.y2 (node.getY2(), node.setY2( y2 )) retrieves or modifies the 'y2' parameter of the Line.

p1

node.p1 (node.getPoint1(), node.setPoint1( p1 )) retrieves or modifies the Vector2 (x1,y1) of the Line.

p2

node.p2 (node.getPoint2(), node.setPoint2( p2 )) retrieves or modifies the Vector2 (x2,y2) of the Line.

Font

Font represents a single immutablefont, which can be queried for various parameters, and can be changed.

It can be constructed with new phet.scenery.Font() initialized with the default font '10px sans-serif', scenery.Font.fromCSS( cssFontString ) initialized with the specified CSS Font, or with a property object new phet.scenery.Font( { ... } ), where any of the Font's properties (font, family, weight, stretch, style, size, and lineHeight) can be present.

For example, new phet.scenery.Font( { size: 16, style: 'italic' } ) and scenery.Font.fromCSS( 'italic 16px sans-serif' ) are equivalent ways of creating that specific Font instance. In addition:

new phet.scenery.Font().font                      // "10px sans-serif" (the default)
new phet.scenery.Font( { family: 'serif' } ).font // "10px serif"
new phet.scenery.Font( { weight: 'bold' } ).font  // "bold 10px sans-serif"
new phet.scenery.Font( { size: 16 } ).font        // "16px sans-serif"
var font = new phet.scenery.Font( {
  family: '"Times New Roman", serif',
  style: 'italic',
  lineHeight: 10
} );
font.font;                                   // "italic 10px/10 'Times New Roman', serif"
font.family;                                 // "'Times New Roman', serif"
font.weight;                                 // 400 (the default)
      

font

font.font (font.getFont()) retrieves the shorthand CSS 'font' property of the Font object. This property completely specifies all font settings.

family

font.family (font.getFamily()) retrieves the CSS 'font-family' property of the Font object.

weight

font.weight (font.getWeight()) retrieves the CSS 'font-weight' property of the Font object.

stretch

font.stretch (font.getStretch()) retrieves the CSS 'font-stretch' property of the Font object.

style

font.style (font.getStyle()) retrieves the CSS 'font-style' property of the Font object.

size

font.size (font.getSize()) retrieves the CSS 'font-size' property of the Font object.

lineHeight

Deprecated: font.lineHeight (font.getLineHeight()) retrieves the CSS 'line-height' property of the Font object.

Color

A Color can be constructed either with any valid CSS color (new phet.scenery.Color( cssColorString )), or with components directly (new phet.scenery.Color( red, green blue [, alpha] )) where red/green/blue are 0-255, and alpha is 0-1.

Color operations will assume that the color is not pre-multiplied.

red

color.red (color.getRed(), color.setRed( redInt )) retrieves or modifies the red component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).

green

color.green (color.getGreen(), color.setGreen( greenInt )) retrieves or modifies the green component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).

blue

color.blue (color.getBlue(), color.setBlue( blueInt )) retrieves or modifies the blue component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).

alpha

color.alpha (color.getAlpha(), color.setAlpha( alphaFloat )) retrieves or modifies the alpha component of the color. It will be returned or converted to an integral value between 0-1 (inclusive).

toCSS()

Returns a CSS value for the color, currently using 'rgb' or 'rgba'.

Event

Pointer

Mouse

Touch

Pen

Trail