# Reference

1. System
2. Plot
3. Diagram
1. diagram
2. lScale
3. rScale
4. axis
5. wall
6. mass
7. spring, dash, rope
8. wire, resistor, capacitor, inductor, terminal, source, sourceI, sourceV,
9. node, ground, terminal
10. opAmp
11. meter
12. text
13. line
14. block
15. arrow
16. lArrow
17. coil
18. vessel
19. pipe
20. mixer
21. axisR
22. cylinder
23. pad
24. aArrow
25. wheel
26. motor, galv
27. speaker
4. Slider
5. TBox

## System

A System simulates a system of linear differential equations of the form:

x'=Ax+Bu
y=Cx+Du

where x are the state-space variables, u are the inputs, and y are the outputs.

Simulation time is independant from real time; One unit of system time does not necissary take one second. Simulation units are broken into steps of size h, usually a small fraction. The number of steps calculated each animation frame is dictated by spf (steps-per-frame), and the number of frame per second is fps. So in order for simulaiton units to equal real seconds, fps*spf*h=1. For example; fps=20, spf=50, h=.001. It cannot, however, be assumed that the simulation will run at fps frame per second, as computers and browsers may be unable to calculate and update things fast enough.

### `system(A,B,C,D,X)`

Creates a new System. A control (Stop/Start) button is added to the page. For the most recently created or clicked system, the sapcebar operates this button.

• `A`, `B`, `C`, `D` System parameter matrices
• `X` initial conditions [optional]

Returns: a System object

```//A second-order system with one input and two outputs.
A=[[ 0  ,1],
[-1,-.1]];

B=[[1,0]];

C=[[0,0],
[1,0],
[0,1]];

D=[,
,
];

X=[10,0];

sys=system(A,B,C,D,X);
```

### `System.tMax(tMax)`

Makes the simulation stop at a given time. If tMax is 0, the simulation never stops.

When the system stops, the control button becomes a "reset" button.

Default: 0

• `tMax` maximum time, in simulation units

Returns: the System

`sys.tMax(10);`

### `System.h(h)`

Sets the simulation step-size.

Default: 0.01

• `h` new step-size

Returns: the System

`sys.h(.005);`

### `System.spf(spf)`

Sets the numbers of steps calculated each animation frame.

Default: 15

• `spf` steps per frame

Returns: the System

`sys.spf(10);`

### `System.fps(fps)`

Sets the animation framerate (frames per second).

Default: 30

• `h` new framerate

Returns: the System

`sys.fps(20);`

### `System.setP(nA,nB,nC,nD,nXi)`

Sets new system parameters.

• `nA`, `nB`, `nC`, `nD` new system matricies.
• `nXi` new initial conditions (optional).

### `System.initial(nXi,go)`

Resets a system to initial conditions.

• `nXi` new initial conditions (optional).
• `go` starts the simulation if true.

### `System.input(v,func)`

Attaches an input function to the system.

U[v]=func(t).

• `v` the index of U to apply the function to.
• `func` the function. Can be a function of t. Must return a number.

Returns: the System

```//add a sinusoidal input to U
//with amplitude 5 and frequency 2
sys.input(0,function(t){
return 5*Math.sin(2*t);
});
```

## Plot

### `plot(size,sys,vars,limits,labels,colors)`

Creates a new Plot and adds it to the page.

Double-click a plot to see the numbers, double-click to return.

• `size` pixel dimensions of the plot in the form [x,y]
• `sys` the System object to plot data from
• `vars` the Y variables to plot. (plots all by default)
• `limits` plot limits in the form [xMin,xMax,yMin,yMax], [xMax,yMin,yMax], or [xMax,yMax]. (defaults to [50,20])
• `labels` the names to use in the legend (no legend by default)
• `colors` the colors to paint the lines. Default colors: blue, red, green, yellow, magenta, cyan

Returns: a Plot object

```sys=system([[-1]],[],[,],[,]);
sys.input(0,function(t){return t%12<6 });//square wave
sys.tMax(36);
sys.spf(40);

plot([500,150],sys,[0,1],[36,0,1],['in','out'],['green','red']);
```

## Diagram

A Diagram draws shapes to illustrate various linear systems. Some of these may be associated with outputs (Y values) of a System, and will animate accordingly.

### `diagram(size,sys)`

Creates a new blank Diagram and adds it to the page. Provide a System if animation is desired.

• `size` the pixel dimensions of the diagram, in the form [x,y]
• `sys` the associated system object [optional]

Returns: a Diagram object

```dia=diagram([200,100],sys);
```

### Labeling Syntax

Diagram elements use a uniform labeling syntax. Each element has a default label location, a secondary default, and Noth, South, East, and West positions. An explicit offset from a central point may also be defined, along with a text alignent (defaults to centered). Text is centered for Norh and South, aligned right for East, left for West, and default positions vary. The following are valid labeling methods: `txt`, `[txt]`, `[txt,n]`, `[txt,Q]`, `[txt,[offsX,offsY]]`, `[txt,[offsX,offsY],aln]`

• `txt` label text
• `n` 0 for default, not 0 for the secondary default
• `Q` cardinal location: `'N'`, `'S'`, `'E'`, or `'W'` (case insensitive)
• `offsX, offsY` offset from center
• `aln` text alignment. `0` for centered, `1` for right, `-1` for left

### `Diagram.lScale(scl)`

Set the diagram's linear scaling factor.

• `scl` new lScale value

Returns: the Diagram

`dia.lScale(50); //translate masses 50 pixels per system unit`

### `Diagram.rScale(scl)`

Set the diagram's rotating scaling factor.

• `scl` new rScale value

Returns: the Diagram

`dia.rScale(60); //rotate cylinders 60 degrees per system unit`

### `Diagram.axis(p,dir)`

Creates a linear axis. Translating elements will move along this axis.

• `p` the origin, in the form [x,y]
• `dir` the angle (direction) of the axis, in degrees. Zero points to the right, 90 points down, etc.

Returns: an Axis object

`ax=dia.axis([0,100],0); //horizontal axis starting at the left edge`

### `Diagram.wall(p,s,borders)`

Creates a diagonally-striped rectangle with optional borders on any side.

Used to indicate walls, floors, ceilings in translating systems and the boundaries of thermal systems. Often 10 pixels wide.

• `p` the upper-right corner, in the form [x,y]
• `s` the size, in the form [width,height].
• `borders` a string specifying which borders to draw. Use the letters N, E, S, and W (case insensitive)

Returns: a HashBox object

```dia.wall([ 15,25],[ 10,50],'e'); //Left wall
dia.wall([ 15,75],[ 10,10]);     //Left corner piece
dia.wall([ 25,75],[150,10],'n'); //Floor
dia.wall([175,75],[ 10,10]);     //Right corner piece
dia.wall([175,25],[ 10,50],'w'); //Right wall

dia.wall([ 50,20],[100,30],'nsew'); //Block```

### `Diagram.mass(v,label,axis,rest,wheel,w,h,flabel)`

Creates translating Mass.

• `v` System output Y[v] to move by. Use `-1` for a stationary mass.
• `label` label
• `axis` Axis along which to move.
• `rest` resting location of the mass center, along the axis.
• `wheel` wheel radius. Negative for surface friction 'xxxxx'. Zero for none.
• `w` dimension along the axis (width if horizontal).
• `h` dimension perpendicular to the axis (height if horizontal).
• `flabel` friction label

Returns: a Mass object

`m1=dia.mass(-1,'M',ax,100,-8,70,40,'B',1);`

### `Diagram.rope(label,axis,mA,mB,off)`

Creates a spring, dashpot, or line segment (rope) between two masses or fixed points.

• `label` label
• `axis` Axis along which to move.
• `mA, mB` Connected mass on each end, or location along axis.
• `off` Offset from axis, for parallel elements. [Optional]

Returns: a Linkage object

```dia.spring('K',ax,25,175,-20);
dia.dash(  'B',ax,25,175, 20);
dia.rope(   '',ax,25,175,  0);
```

### `Diagram.sourceV(p1,p2,label)`

Create a circuit element between two points.

• `p1`, `p2` Endpoints of element, in the form [x,y].
• `label` label

Returns: an Element2 object

```dia.wire(     [ 50, 50],[150, 50],'wire');
dia.resistor( [ 50,100],[150,100],'resistor');
dia.capacitor([ 50,150],[150,150],'capacitor');
dia.inductor( [ 50,200],[150,200],'inductor');
dia.terminal( [200, 50],[300, 50],'terminal');
dia.source(   [200,100],[300,100],'source');
dia.sourceI(  [200,150],[300,150],'sourceI');
dia.sourceV(  [200,200],[300,200],'sourceV');
```

### `Diagram.terminal(p,label)`

Create a circuit element at one point.

• `p` the point, in the form [x,y]
• `label` label

Returns: an Element1 object

```dia.terminal([20,25]);
dia.node(    [50,25]);
dia.ground(  [80,12]);
```

### `Diagram.opAmp(p1,p2,label,spacing)`

Creates an Op-Amp. The size is scaled relative to the `spacing` argument.

• `p1` the point between the input terminals, in the form [x,y]
• `p2` the point at the output terminal, in the form [x,y]
• `label` label
• `spacing` space between input terminals. Negative values reverse polarity. Default=30; `-1` becomes -30.

Returns: an OpAmp object

```dia.opAmp([10,40],[130,40],'a',-1);
```

### `Diagram.meter(v,loc,range,label)`

A general-purpose meter.

• `v` the system Y[v] value to indicate.
• `loc` locaiton of center, in the form [x,y].
• `range` either min/max value, or array of checks, in the form [min,n,…,n,max]
• `label` label

Returns: a Meter object

```sys=system([[0,1],[-1,-.0015]],[],[[1,0],[0,1]],[],[10,0]);
dia=diagram([120,60],sys);
dia.meter(0,[30,32],[-10,0,10]);
dia.meter(1,[90,32],[-10,0,10]);
```

### `Diagram.text(p,label)`

Text. Useful for labeling thermal capacitance, and so much more!

• `p` center point of the text.
• `label` label

Returns: a Text object

```dia.text([50,15],'Hello World!');
```

### `Diagram.line(p1,p2,w)`

A general purpose line. Useful for indicating a plate with fixed temperature.

• `p1`, `p2` endpoints, in the form [x,y].
• `w` line width. [Optional: defaults to 4]

Returns: a Line object

```dia.line([10,10],[90,10],2);
dia.line([10,20],[90,20]);
```

### `Diagram.block(p,s,label)`

A grey rectangle, for illustrating a thermal resistance.

• `p` upper-left point, in the form [x,y].
• `s` dimensions (size), in the form [x,y].
• `label` label

Returns: a Block object

```dia.block([20,10],[60,80],'R');
```

### `Diagram.arrow(v,A,rest,off,scale,label)`

A thick arrow, for indicating applied force, heat flow, current, etc. Becomes a diamond when length is near 0.

Can be called in two ways. The second is for translating systems and uses an Axis.

• `v` associated Y[v] index. If negative, the constant number -1-v (~v) is used.
• `loc` tail location, in the form [x,y].
• `angle` angle in which to point.
• `A` the axis along which to move.
• `rest` the point along the axis to call home.
• `scale` value scaling factor. [Optional: defaults to 2]
• `label` label

Returns: an Arrow object

```dia.arrow(0,[60,25],0,4,'q');
```

### `Diagram.lArrow(p1,p2,label)`

A thinner arrow, for indicating direction, constant flow, etc.

Drawn between p1 and p2, with the head at p2.

• `p1` first point, in the form [x,y].
• `p2` second point, in the form [x,y].
• `label` label
• `dashed` makes the arrow dashed

Returns: a LinArrow object

```dia.lArrow([20,25],[100,25],'f');

dia.wall([20,40],[10,30],'e');
dia.lArrow([30,55],[90,55],'y',1);```

### `Diagram.coil(p1,p2,w)`

A coil, for illustrating a heat source.

• `p1` point between terminals, in the form [x,y].
• `p2` center of coil, in the form [x,y].
• `w` distance between wires. [Optional: defaults to 35]

Returns: a Coil object

```dia.coil([10,30],[80,30]);
```

### `Diagram.vessel(p,s,open,label)`

A vessel for holding water in mass-flow systems.

Can be open at the top, or closed

• `p` top-left corner, in the form [x,y].
• `s` dimensions, in the form [w,h].
• `open` open? Default: not open.
• `label` label

Returns: a Vessel object

```dia.vessel([170,100],[80, 50],1,'open\nvessel');
dia.vessel([ 50, 50],[80,100]);
```

### `Diagram.pipe(p1,p2,w,label)`

A pipe for connecting vessels in mass-flow systems.

• `p1` start, in the form [x,y].
• `p2` end, in the form [x,y].
• `w` width. Default: 8
• `label` label

Returns: a Pipe object

```dia.vessel([ 50,100],[80, 50],1);
dia.vessel([170, 50],[80,100]);
```

### `Diagram.mixer(p1,p2,w)`

An animated mixing propeller, for keeping those vessels of water well-mixed.

• `p1` center of propeller, in the form [x,y].
• `p2` end of shaft, in the form [x,y].
• `w` width of propeller. Default: 16

Returns: a Mixer object

```dia.mixer([20,30],[80,30]);
```

### `Diagram.axisR(origin,proj)`

Rotation Axis, for rotating systems. All rotating things rotate around an Axis.

• `origin` the "origin" point of the axis, in the form [x,y].
• `proj` the projection factor. 0 is side-view, >5 looks funny. .25 is default.

Returns: an AxisR object

```ax1=fig1.axisR([0,150],.3);
```

### `Diagram.cylinder(v1,v2,label,A,loc,w,r,f,flabel)`

The cylinder is used to depict wheels, shafts, and torsional springs (twistable shafts).

• `v1,v2` the Y values to which the cylinder is associated. If they differ, the shaft is flexible. If they are negative, the constant number -1-v (~v) is used.
• `label` label
• `A` the rotational axis.
• `loc` location of left edge along axis.
• `w` width of cylinder.
• `r` radius.
• `f` adds friction hashes to the bottom of height f.
• `flabel` friction label

Returns: a Cylinder object

```dia=diagram([300,150]);
ax=dia.axisR([0,85]);

dia.cylinder(~0,~0,['J','n'],ax,50,20,40,7,'B');
dia.cylinder(~0,~720,['K','n'],ax,70,200,8);
```

### `Diagram.pad(label,A,loc,w,r)`

A semi-transparent dark band (just the front). Place between two Cylinders to indicate friction.

• `label` label
• `A` the rotational axis.
• `loc` location of left edge along axis.
• `w` width of cylinder.
• `r` radius.

Returns: a Pad object

```dia=diagram([126,150]);
ax=dia.axisR([0,85]);

dia.cylinder(~0,~0,'',ax,50,8,40);
dia.pad('B',ax,58,10,40);
dia.cylinder(~0,~0,'',ax,68,8,40);
```

### `Diagram.aArrow(label,c,r,va,vl,lScale,w)`

An arrow drawn in an arc around a rotaitonal axis. Use for indicating direciton, torque, etc.

• `label` label
• `A` the rotational axis.
• `loc` location along axis.
• `c` center point: [x,y].
• `r` radius. If not using axis, can also be [rx,ry].
• `va` angle of tail. Y index or use ~val for static number
• `vl` angular length.
• `lScale` length scale factor. Defaults to 1.
• `w` Tail width. Defaults to 1. Negative for dashed.

Returns: an ArcArrow object

```dia=diagram([275,150]);
ax=dia.axisR([0,80],.35);

dia.wall([35,65],[30,30]);
dia.cylinder(~0,~200,'K',ax,50,150,6);
dia.cylinder(~200,~200,['','J'],ax,200,10,25);

dia.aArrow('',ax,205,50, ~45,~1,-90,-1);
dia.aArrow('',ax,205,50,~225,~1,-90,-1);
```

### `Diagram.wheel(vt,vr,label,A,rest,r,bracket)`

A wheel that translates along a translational axis and rotates. Also makes an excellent pulley.

• `vt` variable for translating (or `-1` for stationary).
• `vr` variable for rotating (degrees).
• `label` label
• `A` a translational axis.
• `rest` resting location along axis.
• `r` wheel radius.
• `bracket` indicates a bracket: `'n'`, `'e'`, `'s'`, `'w'`, `'h'`, or `'v'` (case insensitive)

Returns: a Wheel object

```dia=diagram([500,150]);
ax=dia.axis([0,85],0);

w1=dia.wheel(-1,-1,'w₁',ax, 75,30,'e');
w2=dia.wheel(-1,-1,'w₂',ax,250,40,'h');
w3=dia.wheel(-1,-1,'w₃',ax,425,30,'w');
dia.spring('',ax,w1,w2);
dia.spring('',ax,w2,w3);
```

### `Diagram.galv(vr,vi,p,s,dir)`

A motor or galvanometer.

• `vr` variable for rotation (degrees).
• `vi` variable for current direction.
• `p` center point; [x,y]
• `s` size; [w,h]
• `dir` magnetic field direction; 0: S->N, 1:N<-S

Returns: a Motor object

```sys=system([[0,1],[-1,0]],[],[[1,0],[0,1]],[],[1,0]).h(.005);
dia=diagram([550,200],sys).rScale(40);

dia.galv (0,1,[150,100],[200,70]);
dia.terminal([150,170],[150,30]);

dia.motor(0,1,[400,100],[200,70]);
dia.terminal([400,170],[400,30]);
```

### `Diagram.speaker(vm,vb,vi,p,s,angle)`

A speaker, accelerometer or similar electromagnetic linear actuator.

• `vm` variable for magnet.
• `vb` variable for base.
• `vi` variable for current direction.
• `p` center point; [x,y]
• `s` size; [w,h]
• `angle` 0 puts the magnet on top, 90 makes it to the right, etc.<-S
• `dir` magnetic field direction; 0: NSN, 1:SNS

Returns: a Motor object

```sys=system([[0,1],[-1,0]],[],[[1,0],[0,1]],[],[1,0]);
dia=diagram([300,300],sys).rScale(40);

dia.speaker(0,1,1,[200,150],[200,220],0,1);
dia.terminal([350,125],[350,175]);

```

## Slider

A Slider provides a device by which the user may specify a number.

Technically, a slider is a very long [or high] div placed within a smaller div. The div itself has a height [width] of 1, but the will become visible. The position of the scrollbar is used to obtain a value. Beside the slider are a static label and a number box for manual entry.

Each slider corresponds to an index of an array (both passed at creation). An optional callback function will fire when the value is changed.

### `slider(vars,v,chf,title,limits)`

Creates a new Slider. The necissary elements will be added to the page.

• `vars` The array containing the value of interest.
• `v` the index of the value
• `chf` a function called on change
• `title` title text that appears to the left
• `limits` value limits, in the form [min,max]

Returns: a Slider object

```theVars=[1,2];
mySlider=slider(theVars,0,0,'A: ',[0,3]);
mySlider=slider(theVars,1,0,'B: ',[0,3]);
```

## TBox

A TBox is a dynamic text box consisting of a span within a div.

### `tBox(text)`

Creates a new tBox and adds it to the page.

• `text` The text in the box.

Returns: a Slider object

```myBox1=tBox("Here is some text");
myBox2=tBox("Here is more text");
```

### `TBox.place()`

Places the tBox at the current location on the page. Useful if the tBox needs to be created before being added.

Returns: the TBox

```myBox2.place();
```

### `TBox.set()`

Replaces the text of a TBox.

Returns: the TBox

```myBox2.set("Dynamic!");
```