Documentation

Tutorials

Add one!

Get the code

Kite 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/assert.git
git clone https://github.com/phetsims/phet-core.git
git clone https://github.com/phetsims/dot.git
git clone https://github.com/phetsims/axon.git
git clone https://github.com/phetsims/kite.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 kite
npm update
grunt build

You will now have the built files under build/

Dependencies

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

Lo-Dash for utility functions, as a replacement for Underscore.js.

Internal dependencies:

assert for assertion handling. Use window.assertions.enableAssert() for basic assertions.
phet-core for other utility functions.
Dot for math.
Axon for observer patterns.

Kite API

Shape

Represents a shape that is composed of one or more subpaths. new phet.kite.Shape() will create an empty shape, which can then have drawing commands (like moveTo or lineTo) applied to it. The semantics are effectively the same as the Canvas 2D interface CanvasPathMethods, where context.closePath is renamed to shape.close, context.bezierCurveTo is renamed to shape.cubicCurveTo (since the quadratic curve is also a Bézier curve), and the context.arcTo varieties are not implemented, in favor of shape.arc and ellipticalArc.

moveTo( x, y )

Moves the current position to the (x,y) location, without drawing a line. See context.moveTo for detailed semantics.

Also currently supports moveTo( point ) where point is a dot.Vector2.

lineTo( x, y )

Draws a line from the current position to the (x,y) location. See context.lineTo for detailed semantics.

Also currently supports lineToPoint( point ) where point is a dot.Vector2.

quadraticCurveTo( cpx, cpy, x, y )

Draws a quadratic Bézier curve with a control net of the current position, the control point (cpx,cpy), and the end point (x,y). See context.quadraticCurveTo for detailed semantics.

Also currently supports quadraticCurveToPoint( controlPoint, endPoint ) where the parameters are dot.Vector2 instances.

cubicCurveTo( cp1x, cp1y, cp2x, cp2y, x, y )

Draws a cubic Bézier curve with a control net of the current position, the control point (cp1x,cp1y), the control point (cp2x,cp2y), and the end point (x,y). See context.bezierCurveTo for detailed semantics.

Also currently supports cubicCurveToPoint( controlPoint1, controlPoint2, endPoint ) where the parameters are dot.Vector2 instances.

arc( centerX, centerY, radius, startAngle, endAngle, anticlockwise )

Draws a circular arc centered at (centerX,centerY) with the specified radius, between the two angles. anticlockwise is in the graphics coordinate frame (-y), not the mathematical (+y) one. See context.arc for detailed semantics.

Also currently supports arcPoint( center, radius, startAngle, endAngle, anticlockwise ) where the center is an dot.Vector2 instance.

ellipticalArc( centerX, centerY, radiusX, radiusy, rotation, startAngle, endAngle, anticlockwise )

Draws an elliptical arc centered at (centerX,centerY) with the specified semi-major (radiusX) and semi-minor (radiusY) axes, between the two angles. The entire ellipse is rotated by rotation anticlockwise is in the graphics coordinate frame (-y), not the mathematical (+y) one. See context.ellipse for detailed semantics.

Also currently supports ellipticalArcPoint( center, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ) where the center is an dot.Vector2 instance.

Kite Documentation