Comment on page
Tychos MathJs Language Reference
The following reference guide identifies the language syntax, built in variables, functions, and classes that are used to code your simulations in Tychos. Tychos uses the MathNotepad language. We have included documentation here for some of the helpful functions defined in the MathNotepad language. This is not a complete list of all functions available in MathNotepad, just ones that might be commonly used in Tychos for building scenarios as well as defining goals for those scenarios.
Comments are statements that you can insert in your code that do not get interpreted and executed by Tychos. To create a comment, you simply indicate a comment by using a hashtag:
# This is a comment.
To define a variable in Tychos all you need to do is identify a name for the variable. You then type an
=
sign to assign a value to the variable. The following demonstrates various variable declarations# Assigns a variable called x the value of 10
x = 10
# Assign a new variable y the value of the x
y = x
# Assign x the value of itself plus 1
x = x + 1
There are a few variables that are built into Tychos. These variables are:
t
— How many seconds has passed since this Scenario was started?dt
— Time between frames as seconds, e.g. 0.1 is 1/10th of a second.frame_count
— How many frames have passed? e.g. 1, 2, 3...X
,Y
,Z
— These are shortcuts for indexing the first two elements of 3-D matrices, e.g.my_particle.pos[X]
These are some common mathematical operators and functions for performing various calculations.
Tychos uses the following operators to perform basic math calculations:
+
— Addition-
— Subtraction*
- Multiplication/
- Division^
- Exponent%
- Modulo
You can also use the following basic math functions:
The
pow(base, power)
function takes two arguments, raising the base
by the power
.# returns number 8
pow(2,3)
The
sqrt(positive_number)
function takes a single non negative number and returns the real square root of the number.# returns number 2
sqrt(4)
The
abs(number)
function returns the absolute value of a number.# returns number 2
abs(-2)
The following functions all use radians as the angle measurement. You can use
pi
to represent PI.The
sin(angle)
function is used to evaluate the trigonometric sine value for a given input angle. The input angle must be provided in radians.# returns number 1
sin(PI/2)
The
cos(angle)
function is used to evaluate the trigonometric cosine value for a given input angle. The input angle must be provided in radians.# returns number 1
cos(0)
The
tan(angle)
function is used to evaluate the trigonometric tangent value for a given input angle. The input angle must be provided in radians.# returns number 1
tan(PI/4)
The
asin(value)
function is used to evaluate the trigonometric arcsine value (inverse sine) for a given input. The output angle is given in radians.# returns number 1.57
asin(1)
The
acos(value)
function is used to evaluate the trigonometric arccosine value (inverse cosine) for a given input. The output angle is given in radians.# returns number 0
acos(1)
The
atan2(value)
function is used to evaluate the trigonometric arctangent value (inverse tangent) for a given X and Y input. The output angle is given in radians.# returns number -0.785
atan2(-1, 1)
# returns 2.36
atan2(1, -1)
See below.
radians(angle)
The
deg_to_rad(angle)
function is not part of the MathNotepad language but is provided as a helper function to make the conversion from degree angles to radians easier. The input is an angle measurement in degrees and the output is the angle measurement in radians.# returns number .785
deg_to_rad(45)
See below.
degrees(angle)
The
degrees(angle)
function is not part of the MathNotepad language but is provided as a helper function to make the conversion from radian angles to degrees easier. The input is an angle measurement in radians and the output is the angle measurement in degrees.# returns number 180
degrees(PI)
The following functions provide operations for matrix calculations.
Calculates the dot product of two vectors. The dot product of
x = [a1, a2, a3, ..., an]
and y = [b1, b2, b3, ..., bn]
is defined as:dot(x, y) = a1 * b1 + a2 * b2 + a3 * b3 + … + an * bn
# Work is the dot product of Force (F) and displacement (r)
F = [2, 2]
r = [3, 3]
# returns 12
Work = dot(F, r)
Calculates the cross product for two vectors in three dimensional space. The cross product of
x = [a1, a2, a3]
and y = [b1, b2, b3]
is defined as:cross(x, y) = [ a2 * b3 - a3 * b2, a3 * b1 - a1 * b3, a1 * b2 - a2 * b1 ]
If one of the input vectors has a dimension greater than 1, the output vector will be a 1x3 (2-dimensional) matrix.
# Torque is the cross product of Force and moment arm (r)
F = [2, 0, 0]
r = [0, 2, 0]
# returns matrix [0, 0, 4]
cross(F, r)
Some other useful functions...
random(min, max)
Return a random number larger or equal to min and smaller than max using a uniform distribution. If now min or max are given, then it returns a random value from 0 to 1. If just one value is given, then it returns a random number between 0 and the input value.
# returns a random number between 0 and 1
random()
# returns a random number between 0 and 100
random(100)
# returns a random number between 30 and 40
random(30, 40)
# returns a 2x3 matrix with random numbers between 0 and 1
random([2, 3])
Create a string or convert any object into a string. Elements of Arrays and Matrices are processed element wise.
Formats a value into a string. You have several options for how this value will be formatted:
# returns '0.333'
format(1/3, 3)
# returns '21000'
format(21385, 2)
# returns '1200000000'
format(12e8, {notation: 'fixed'})
# returns '2.3000'
format(2.3, {notation: 'fixed', precision: 4})
Concatenate two or more matrices. This function can also be used to concatenate strings together.
dim: number
is a zero-based dimension over which to concatenate the matrices. By default the last dimension of the matrices.A = [1, 2]
B = [3, 4]
concat(A, B)
# returns [1, 2, 3, 4]
math.concat(A, B, 0)
# returns [[1, 2], [3, 4]]
math.concat('hello', ' ', 'world')
# returns 'hello world'
This function has been deprecated and you should instead use the class
Arrow
to represent arrows in your simulations. See below for more details.The
drawArrow
function draws an arrow and is commonly used to illustrate vectors for a particle. drawArrow should be called in the Calculations editor because it only draws the arrow for the current frame. If you call drawArrow() in the Initial State editor, you will not see anything.drawArrow(pos=[0,0], size=[1,0], color="black", components=false, thickness=1)
-> returns and draws an Arrow objectpos
— coordinates for the starting point of the arrow as an [X,Y] matrix.size
— the vector to illustrate, e.g. [10, 0] will draw an arrow 10 units to the right.color
— Optional HTML color value for your arrow, e.g. "red" or "#ff0000".components
— Optional flag that determines if vector components are drawn, a value oftrue
displays the components.thickness
— Optional stroke value that determines the visual thickness of the arrow.
This function has been deprecated and you should instead use the class
Line
to represent lines in your simulations. See below for more details.The
drawLine
function draws a line and is commonly used to illustrate some connecting member like a string or cable, but could really represent anything you like. drawLine
should be called in the Calculations editor because it only draws the line for the current frame. If you call drawLine
in the Initial State editor, you will not see anything.drawLine(pos=[0,0], pos2=[10,0], color="black", thickess=1)
-> returns and draws an Line objectpos
— coordinates for the starting point of the line as an [X,Y] matrix.pos2
— the coordinates of the end point of the line as an [X,Y] matrix.color
— Optional HTML color value for the line, e.g. "red" or "#ff0000".thickness
— Optional stroke value that determines the visual thickness of the line.

Example — The illustration above was drawn using this command:
# Calculations editor
drawLine([0, 0], [20, 20], "purple", 2) # a line
drawLine([0, 0], [10, 20], "green", 10) # another line
This function returns a unit vector representation of the given input vector. Its magnitude is 1 and the direction matches the direction of the input vector. This can be useful if you need just the direction of a vector, but not its magnitude.
unit_vector(vec)
-> returns a vector of length 1, and in same direction as vec
.vec
- any two dimensional vector as a [X, Y] matrix.
Example:
u = unit_vector([3, 4]) # returns [0.6, 0.8]
magnitude(u) # returns 1
This function returns the scaler magnitude of any given vector. This is helpful when you want to know the length of a vector, for example, if you want the magnitude of a vector, but not its direction.
magnitude(vec)
-> returns the scaler magnitude of the vector vec
.vec
- any two dimensional vector as a [X, Y] matrix.
Example:
magnitude([3, 4]) # returns 5
This function returns a scalar angle measurement. This is helpful when you want to know the direction of a vector, like the direction of a velocity vector, or the direction of a force vector. The default return angle is given in radians, but can also be expressed in degrees.
direction(vec, units="rad")
-> returns the scaler angle measurement of the vector vec
heading in radian form or in degree form.vec
- any two dimensional vector as a [X, Y] matrix.units
- optionaldeg
for degree measurement or the default ofrad
for radians.
Example:
direction([4, 4]) # returns .785
direction([4, 4], "deg") # returns 45
This function returns a two-dimensional matrix representing the cartesian components of a polar coordinate corresponding to the magnitude of the radius and the radial angle.
polar(radius, angle, units="rad")
-> returns a two dimensional vector as a [X, Y] matrix.radius
- scalar quantity representing the scalar distance of the radius of theangle
- scalar quantity representing the angle measurement of the polar coordinate.units
- optionaldeg
for degree measurement or the default ofrad
for radians.
Example:
polar(10, 45, "deg") # returns [7.07, 7.07]
polar(10, PI/4) # returns [7.07, 7.07]
This function is simply used for finding a point that has been rotated a given angle about a specific axis. It is just a utility function that could be performed by doing some simple trigonometry calculations, but hey, why not make it easier for you?
getRotatedPosition(point, angle, axis)
-> returns a two dimensional vector as a [X, Y] matrix.point
- A vector representing the point that is rotated.angle
- scalar quantity representing the angle measurement of rotation.axis
- A 2D vector that identifies the axis point about which the position has been rotated.
Example:
getRotatedPosition([10, 0], PI, [0, 0]) # returns [-10, 0]
This function creates an array of points based on a domain, a domain increment, and a function expression.
createPoints(min, max, step, expression)
-> returns an array of points whose domain is defined from the min
value to the max
value with an increment defined by step
and whose range is evaluated based on the function expression
.min
- the inclusive minimum value of the domain.max
- the exclusive maximum value of the domain.step
- the increment step value of the domain.expression
- a string representing a functional expression that can be evaluated in terms of "x".
Example:
points = createPoints(0, 4, 1, "x^2")
# [[0, 0], [1, 1], [2, 4], [3, 9]]
This function actually evaluates a boolean test and then stops the simulation once the boolean test succeeds. This can be useful if you want the simulation to stop when some condition has been met within your simulation.
stop(test)
-> returns a either false or true. If true is returned, the simulation stops.test
- a boolean statement that can be evaluated totrue
orfalse
.
Example:
stop(t > 10) # simulation stops at 10 seconds
stop(buggy.pos[X] == 100) # simulation stops when X position of particle equals 100
The following functions are meant to help users model collisions more easily. These functions could be used for other purposes rather than modeling collisions as Tychos is not a physics engine. These functions could be thought of as "overlap" functions. They return information about the overlap of objects.
This function returns a boolean true/false value when two objects are given as the source and target. It returns false if the two objects are not determined to be overlapping.
hasCollided(source, target)
-> returns a boolean true
or false
.source
-Circle
orRectangle
orLine
objecttarget
-Circle
orRectangle
orLine
object
Example:

# Initial State
p1 = Circle({pos:[15, 0], radius:10, color:rgba(0, 200, 200, .6)})
b1 = Rectangle({pos:[0, 0], size:[15, 15], color:rgba(200, 0, 200, .6)})
b1.rotate(radians(45))
p3 = Circle({pos:[-15, 0], radius:10, color:rgba(0, 0, 200, .6)})
# Calculations
hasCollided(p1, b1) # returns true
hasCollided(b1, p3) # returns true
hasCollided(p1, p3) # returns false
This function returns a two dimensional matrix representing the minimum translation vector (MTV) that would be needed to separate two objects when they overlap. This can be used to simulate collision forces or to move objects apart based on the magnitude and direction of the MTV.
getIntersect(source, target)
-> returns a two dimensional matrix.source
-Circle
orRectangle
orLine
objecttarget
-Circle
orRectangle
orLine
object
Example:

1
# Initial State
2
p1 = Circle({pos:[0, 0], radius:10, color:rgba(200, 200, 200, .6)})
3
p2 = Circle({pos:[12, 10], radius:10, color:rgba(0, 200, 0, .6)})
4
b1 = Rectangle({pos:[-12, 0], size:[15, 15], color:rgba(200, 0, 0, .6)})
5
mtv1 = Arrow({pos:[p1.pos], color:"green"})
6
mtv2 = Arrow({pos:[p1.pos], color:"red"})
1
# Calculations
2
mtv1.size = getIntersect(p1, p2)
3
mtv2.size = getIntersect(p1, b1)
This function returns a list containing all the points where the object boundaries intersect. The points are vectors corresponding with the coordinates of those intersection locations. This can be used to identify exactly where the overlap is occurring in your scenarios.
source
-Circle
orRectangle
orLine
objecttarget
-Circle
orRectangle
orLine
object
The image below shows an example of the points of intersection between a rectangle and a line, but note, those points are being showed for demonstration only, and would not be visible unless you assign them to a visible object, in this case the position of two small circle objects.

Example:
1
# Initial State
2
r = Rectangle({pos:[-4, 0], size:[10,15], color:"orange", opacity:.5})
3
r.rotate(.1)
4
l = Line({pos:[0,10], pos2:[-10, -20]})
1
# Calculations
2
points = getIntersectionPoints(r, ln)
The following functions are used to compare two values as being equal or unequal as well as testing if one value is larger or smaller than another. These are very helpful when writing goals for students.
The function tests if two values (x and y) are equal. It returns a boolean value of
true
or false
.2 + 2 == 3 # returns false
2 + 2 == 4 # returns true
t == 10 # returns true if t is 10, or false if it is not.
equal(2 + 2, 4) # same as 2 + 2 == 4
This function is similar to
equal
, but it tests element wise whether two matrices are equal. It returns a boolean value of true
or false
. The code below demonstrates the difference between equal
and deepEqual
:p1 = Particle([10, 10])
p2 = Particle([10, 0])
deepEqual(p1.pos, p2.pos) # returns false
equal(p1.pos, p2.pos) # returns [true, false]
The function tests if one value (a) is larger than another (b). It returns a boolean value of
true
or false
.2 > 3 # returns false
3 > 2 # returns true
2 > 2 # returns false
larger(2, 2) # same as 2 > 2
The function tests if one value (a) is smaller than another (b). It returns a boolean value of
true
or false
.2 < 3 # returns true
3 < 2 # returns false
2 < 2 # returns false
smaller(2, 2) # returns false
The function tests if two values (a and b) are unequal. It returns a boolean value of
true
or false
.2 + 2 != 3 # returns true
unequal(2 + 2, 3) # true -- same as 2 + 2 != 3
2 + 2 != 4 # returns false
t != 10 # returns false if t is 10, or true if it is not.
Comparison operators return
true
or false
but these also evaluate to 1 (true) or 0 (false). This can allow you to conditionally assign a value to a variable depending on the evaluation of the comparison. See the code below as an example:# If t is larger than 10, then the value of F is [10, 10], otherwise it is 0.
F = (t > 10) * [10, 10]
The
if()
function returns true_result
or false_result
depending on test
.if(true, 3, 44) # returns 3
if(false, 3, 44) # returns 44
if(1 > 2, 3, 44) # test is false; therefore returns 44
a = 1
b = 1
if(a == b, "YAY", "darn") # test is true; therefore returns "YAY"
The following operators are used to execute logical AND and OR comparisons for the use of evaluating logical statements.
This is used for performing a logical AND conjunction. For example, "A and B" is true only if A is true and B is true. "A and B" is false if either A or B is false.
A = true
B = true
A and B # returns true
B = false
A and B # returns false
You can use the
and
operator to test if two comparisons are both true:x = 2
(x < 3) and (x == 2) # returns true
(x < 3) and (x != 2) # returns false
This is used for performing a logical OR conjunction. For example, "A or B" is true if A or B is true. "A or B" is false only if A and B are both false.
A = true
B = false
A or B # returns true
A = false
A or B # returns false
You can use the
or
operator to test if one of two comparisons are true:x = 2
smaller(x, 3) or equal(x, 3) # one is true, so returns true
(x < 1) or (x == 3) # both are false, so returns false
Tychos has only a few classes that are used to create the basic simulated objects in the Tychos universe as well as a few tools for analyzing those objects in the simulated world. The graphical objects in Tychos that can be used are the
Cirlcle
, the Rectangle
, the Arrow
, the Line
, the Label
, and the Spring
The tools that can be used for analyzing the behavior of your simulations are the Graph
, the Gauge
and the Meter
. There are also user input objects that can be added to your simulations to make them more interactive: the Toggle
, the Slider
, the Input
, and the Menu
controls.A
Circle
is drawn as a colored circle in the World View. A Circle
has a position, a radius, a color, an opacity, a flag for setting its visibility state, and a flag for determining if a motion map should be attached.
Below is the constructor for the
Circle
class that shows its default values:Circle(
{pos:[0,0],
radius:10,
color:default_color,
border_size: 0,
border_color: default_color,
border_style: "none"
image: "",
opacity: 1,
visible: true,
motion_map: false,
label: {text: "", color: default_color}
}
)
pos
— The initial position of yourCircle
in[X,Y]
coordinates.radius
— The radius of the circle that is drawn in the World View to represent this particle.color
— The circle will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".border_size
— The border thickness in pixels.border_color
— The border will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".border_style
— Sets the border as either solid (default = "none") or "dash" for a dashed border, or "dot" for a dotted border.image
— A URL that identifies a JPEG, GIF, SVG or PNG image.opacity
— The circle will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.visible
— The circle can be hidden from view by setting this flag tofalse
.motion_map
— This flag tells Tychos to attach a series of strobe images called a motion map.label
- You can attach a label to theCircle
object by indicating a thetext
andcolor
of the label.
These attributes may also be modified on the
Circle
after it is created. In particular, one will usually change the pos
attribute of a Circle
in the Calculations editor to show movement. e.g.# Initial State editor
c = Circle()
c_big = Circle({pos:[50, 0], radius:25})
c_big.color = "red"
c_green = Circle({pos:[100, 0], color: "green", opacity: .5})
# Calculations editor
c.pos = c.pos + [1, 0.25]
Circle
objects, like all Tychos objects can be removed from the scenario world scope. Once this done, you will not be able to reference the object as it will be removed from your scenario's collection of viewable objects.Circle
objects can be rotated.Circle.rotate(angle=0, axis=[0, 0])
— Rotates the Circle
object by a given angle value in radian units. You can also provide an optional matrix that identifies the axis of rotation. This method should only be called from the Calculations code editor.Circle
objects can also be represented with an image by setting the image attribute of the object. The text must be a URI link to a graphic file that can be a PNG, SVG, GIF, or JPEG image.rocket = Circle({pos:[0, 0], radius:10})
rocket.image = "https://upload.wikimedia.org/wikipedia/commons/3/3d/Spacecraft.png"

A Circle that looks like a rocket.
The above image also demonstrates the use of the
direction
function as well as the rotate
method:rocket.rotate(direction(rocket.v))
Circle
objects can also be given a text label. This is similar to the Label
object.c.label = {text:"Hello", color:"green"}
— This adds a text label to the Circle
object that scales to fit inside the circle.A
Ellipse
is drawn as a colored ellipse in the World View. An Ellipse
has a position, a size corresponding to its horizontal radius (x) and vertical radius (y) , a color, an opacity, a flag for setting its visibility state, and a flag for determining if a motion map should be attached.e1 = Ellipse({pos:[0, 0], size:[10,5], color:"green", opacity:.6})
e2 = Ellipse({pos:[10, 0], size:[5,10], color:"blue", opacity:.6})
e3 = Ellipse({pos:[0, -10], size:[5,5], color:"red", opacity:.6})

Three ellipses with different sizes
Below is the constructor for the
Ellipse
class that shows its default values:Ellipse(
{pos:[0,0],
size:[10,5],
color:default_color,
image: "",
opacity: 1,
visible: true,
motion_map: false,
label: {text: "", color: default_color}
}
)
pos
— The initial position of yourEllipse
in[X,Y]
coordinates.size
— Representing the x radius and y radius of the ellipse that is drawn in the World View.color
— TheEllipse
will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".border_size
— The border thickness in pixels.border_color
— The border will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".border_style
— Sets the border as either solid (default = "none") or "dash" for a dashed border, or "dot" for a dotted border.image
— A URL that identifies a JPEG, GIF, SVG or PNG image.opacity
— TheEllipse
will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.visible
— TheEllipse
can be hidden from view by setting this flag tofalse
.motion_map
— This flag tells Tychos to attach a series of strobe images called a motion map.label
- You can attach a label to theEllipse
object by indicating a thetext
andcolor
of the label.
These attributes may also be modified on the
Ellipse
after it is created, just like the Circle
. Ellipse
objects, like all Tychos objects can be removed from the scenario world scope. Once this done, you will not be able to reference the object as it will be removed from your scenario's collection of viewable objects.Ellipse
objects can be rotated, just like the Circle.
Ellipse.rotate(angle=0, axis=[0, 0])
— Rotates the Ellipse
object by a given angle value in radian units. You can also provide an optional matrix that identifies the axis of rotation. This method should only be called from the Calculations code editor.Ellipse
objects can also be represented with an image by setting the image attribute of the object. The text must be a URI link to a graphic file that can be a PNG, SVG, GIF, or JPEG image. See the Circle
above for more detail.Ellipse
objects can also be given a text label. This is similar to the Label
object.e.label = {text:"Hello", color:"green"}
— This adds a text label to the Ellipse
object that scales to fit inside the ellipse.A
Rectangle
is very similar to a Circle
but it is represented as a colored rectangle in the World View. A Rectangle
has position, width, height, color, opacity, visibility, a motion map flag, as well as a label. Just as with the Circle
, Tychos only uses the width and height attributes for display. You can define how these attributes change given the rules of the simulation that you define.
Below is the constructor for the
Rectangle
class that shows its default values:Rectangle(
{pos:[0,0],
size:[10,10],
color:default_color,
image: "",
opacity: 1,
visible: true,
motion_map: false,
label: {text: "", color: default_color}
}
)
pos
— The initial position of yourRectangle
in[X,Y]
coordinates.size
— The width and height of theRectangle
that is drawn in the World View to represent this particle.color
— TheRectangle
will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".border_size
— The border thickness in pixels.border_color
— The border will be drawn in this color. Use HTML colors e.g. "#ff3300", "blue".border_style
— Sets the border as either solid (default = "none") or "dash" for a dashed border, or "dot" for a dotted border.image
— A URL that identifies a JPEG, GIF, SVG or PNG image.opacity
— TheRectangle
will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.visible
— TheRectangle
can be hidden from view by setting this flag tofalse
.motion_map
— This flag tells Tychos to attach a series of strobe images called a motion map.label
- You can attach a label to theRectangle
object by indicating a thetext
andcolor
of the label.
These attributes may also be modified on the
Rectangle
object after it is created. In particular, one will usually change the pos
attribute in the Calculations editor to show movement. e.g.# Initial State editor
r1 = Rectangle({pos:[0, 0], size:[10, 10], color:"green"})
r2 = Rectangle({pos:[20, 0], size:[10, 20], color:"blue"})
r3 = Rectangle({pos:[40, 0], size:[20, 10], color:"orange"})
# Calculations editor
r1.pos = r1.pos + [1, 0.25]
Rectangle
objects, like all Tychos objects can be removed from the scenario world scope. Once this done, you will not be able to reference the object as it will be removed from your scenario's collection of viewable objects.You can also rotate a
Rectangle
object in order to simulate rotational behavior.Rectangle.rotate(angle=0, axis=[0, 0])
— Rotates the Rectangle
object by a given angle value in radian units. You can also provide an optional matrix that identifies the center of rotation. This method should only be called from the Calculations code editor.
Three different Rectangle objects rotated at different angles
Example:
# Calculations editor
r1.rotate(-PI/4)
r2.rotate(radians(90))
r3.rotate(radians(45))
Rectangle.image
Just as with
Circle
objects, Rectangle
objects can also be represented with an image by setting the image attribute of the object.r.image = "https://some.image.url.jpg"
Rectangle
objects can also be given a text label. This is similar to the Label
object.r.label = {text:"Hello", color:"green"}
This adds a text label to the
Rectangle
object.The
Arrow
class represents a graphical arrow and is commonly used to illustrate vectors, but can be used for representing anything in your simulations.Below is the constructor for the
Arrow
class that shows its default values:Arrow(
{pos:[0,0],
size:[1,0],
color:default_color,
components: false,
stroke: 1,
style: "none",
opacity: 1,
visible: true,
motion_map: false
}
)
pos
— coordinates for the starting point of theArrow
as an[X,Y]
matrix.size
— the vector to illustrate, e.g.[10, 0]
will draw anArrow
10 units to the right.color
— HTML color value for yourArrow
, e.g. "red" or "#ff0000".components
— A flag that determines if X and Y components are drawn, a value oftrue
displays the components.stroke
— Stroke value that determines the visual thickness of theArrow
.style
— Sets the arrow line as either solid (default = "none") or "dash" for a dashed arrow, or "dot" for a dotted arrow.opacity
— TheArrow
will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.visible
— TheArrow
can be hidden from view by setting this flag tofalse
.motion_map
— This flag tells Tychos to attach a series of strobe images called a motion map.

Arrow without components

Arrow with components
Example — The illustrations above were drawn using these commands:
# Initial State editor
c = Circle({pos:[0,0], color:"green"})
a = Arrow({pos: c.pos, size: [20, 20], color:"purple"})
a.components = true
Arrow
objects, like all Tychos objects can be removed from the scenario world scope. Once this done, you will not be able to reference the object as it will be removed from your scenario's collection of viewable objects.The
Line
class draws a line and is commonly used to illustrate some connecting member like a string or cable, but could really represent anything you like.Below is the constructor for the
Line
class that shows its default values:Line(
{pos:[0,0],
pos2:[1,0],
color:default_color,
stroke: 1,
style: "none",
opacity: 1,
visible: true,
motion_map: false
}
)
pos
— coordinates for the starting point of theLine
as an[X,Y]
matrix.pos2
— coordinates of the termination point of theLine
as an[X,Y]
matrixcolor
— HTML color value for yourLine
, e.g. "red" or "#ff0000".stroke
— Stroke value that determines the visual thickness of theLine
. This is measured in pixels.style
— Sets the line as either solid (default = "none") or "dash" for a dashed line, or "dot" for a dotted line.opacity
— TheLine
will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.visible
— TheLine
can be hidden from view by setting this flag tofalse
.motion_map
— This flag tells Tychos to attach a series of strobe images called a motion map.

Example:
myLine = Line({pos:[0, 0], pos2: [20, 20], color: "purple", stroke:2})
anotherLine = Line({pos:[0, 0], pos2: [10, 20], color: "green", stroke:10})
Line
objects, like all Tychos objects can be removed from the scenario world scope. Once this done, you will not be able to reference the object as it will be removed from your scenario's collection of viewable objects.The
PolyLine
class draws a series of connected lines between a given set of points. This object can be used to represent a complex path or a shape other than a circle or rectangle.Below is the constructor for the
PolyLine
class that shows its default values:PolyLine(
{points:[],
color:default_color,
stroke: 1,
style: "none"
fill: false
opacity: 1,
visible: true,
motion_map: false
}
)
points
— an array of points given as[X,Y]
matrices.color
— HTML color value for yourPolyLine
, e.g. "red" or "#ff0000".stroke
— Stroke value that determines the visual thickness of thePolyLine
. This is measured in pixels.style
— Can be"none"
for solid segments,"dash"
for dashed line segments or"dot"
for dotted line segments.fill
— Boolean value (true or false) for displaying the PolyLine object as a filled in solid.opacity
— ThePolyLine
will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.visible
— ThePolyLine
can be hidden from view by setting this flag tofalse
.motion_map
— This flag tells Tychos to attach a series of strobe images called a motion map.
PolyLine objects have a number of methods for manipulating the PolyLine points, like adding new points, changing existing points, removing points, etc:
setPoints: (points)
-> Set the points for the PolyLine given an array of points.translate: (deltaPosition)
-> Move all the points according to a matrix[X, Y]
.rotate: (angle, axis)
-> Transform the points a certain angle measurement about an axis. This axis is relative to the first point in the PolyLine.npoints():
-> Returns the number of points in the PolyLine.append: (point)
-> Add a point to the end of the PolyLine.remove: (n)
-> Remove a point at the given index. The first point is at index = 0.unshift: (point)
-> Add a point at the beginning of the PolyLine.shift: ()
-> Remove the first point in the PolyLine object.splice: (point, n)
-> Add a point into the PolyLine at the specific index position. The first point is at index = 0.drop: (n)
-> Remove all points from the start to the "n" index position from the PolyLine.dropRight: (n)
-> Remove all points from the end of the PolyLine to the "n" index position.last: ()
-> Returns the last point in the PolyLine.first: ()
-> Returns the first point in the PolyLine.replace: (point, n)
-> Replace the point at "n" index position with a new point.clear: ()
-> Remove all the points in the PolyLine.point: (n)
-> Returns the point at that "n" index position.slice: (start, end)
-> Returns the set of points (but does not remove them) from the PolyLine object beginning at thestart
value and ending at theend
index position.

Three PolyLine objects showing different styles and fills.
Example:
star1 = PolyLine({stroke: 3, style:"dash", fill: true, opacity: .2, color: "blue"})
star1.setPoints([[0,75-200], [379-350,161-200],[469-350,161-200],[397-350,215-200], [423-350,301-200], [350-350,250-200], [277-350,301-200], [303-350,215-200], [231-350,161-200], [321-350,161-200], [0,75-200]])
star2 = PolyLine({stroke: 2, style:"none", color: "green"})
star2.setPoints([[0,75-200], [379-350,161-200],[469-350,161-200],[397-350,215-200], [423-350,301-200], [350-350,250-200], [277-350,301-200], [303-350,215-200], [231-350,161-200], [321-350,161-200], [0,75-200]])
star2.translate([100, 100])
star3 = PolyLine({stroke: 3, style:"dot", color: "red"})
star3.setPoints([[0,75-200], [379-350,161-200],[469-350,161-200],[397-350,215-200], [423-350,301-200], [350-350,250-200], [277-350,301-200], [303-350,215-200], [231-350,161-200], [321-350,161-200], [0,75-200]])
star3.translate([-100, 100])
PolyLine
objects, like all Tychos objects can be removed from the scenario world scope. Once this done, you will not be able to reference the object as it will be removed from your scenario's collection of viewable objects.A
Spring
is a visual representation of a common elastic connector that displays a given number of coils that dynamically change shape once the dimensions of the Spring
are changed in the Calculations Pane.Below is the constructor for the
Spring
class that shows its default values:Spring(
{pos:[0,0],
pos2:[1,0],
color:default_color,
coils: 5,
width: 10,
stroke: 1,
opacity: 1,
visible: true,
motion_map: false
}
)
pos
— coordinates for the starting point of theSpring
as an[X,Y]
matrix.pos2
— coordinates of the termination point of theSpring
as an[X,Y]
matrixcolor
— HTML color value for yourSpring
, e.g. "red" or "#ff0000".coils
— The number "coil" zig-zags.width
— The width of the "coil" zig-zags.stroke
— Stroke value that determines the visual thickness of theSpring
. This is measured in pixels.opacity
— TheSpring
will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.visible
— TheSpring
can be hidden from view by setting this flag tofalse
.motion_map
— This flag tells Tychos to attach a series of strobe images called a motion map.

Three different Spring objects
The code below shows the three different
Spring
objects above that have different lengths, widths and coil numbers. The Circle
objects are shown just for reference.# Initial State editor
c1 = Circle({pos:[0, 0], radius:2, color:"green"})
spring1 = Spring({pos:[0, 20], pos2:c1.pos, color:"black", coils:20, width:2})
c2 = Circle({pos:[10, 0], radius:2, color:"green"})
spring2 = Spring({pos:[10, 20], pos2:c2.pos, color:"black", coils:10, width:4})
c3 = Circle({pos:[20, 0], radius:2, color:"green"})
spring3 = Spring({pos:[20, 20], pos2:c3.pos, color:"black", coils:20, width:2})
These attributes may also be modified after the
Spring
is created.Spring
objects, like all Tychos objects can be removed from the scenario world scope. Once this done, you will not be able to reference the object as it will be removed from your scenario's collection of viewable objects.You can add text labels to any scenario using the
Label
class.Below is the constructor for the
Label
class that shows its default values:Label(
{pos:[0,0],
size:[10,10],
text: "",
color:default_color,
opacity: 1,
visible: true,
motion_map: false
}
)
pos
— coordinates for the center point of theLabel
as an[X,Y]
matrix.size
— The width and height of theLabel
as an[X,Y]
matrixtext
— The text of theLabel
as a string.color
— HTML color value for yourLabel
, e.g. "red" or "#ff0000".opacity
— TheLabel
will be drawn with an opacity between 1 and 0, representing 100% opaque to 100% transparent.