# 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
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=[[1],
[0],
[0]];

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[0]
//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]],[[1]],[[0],[1]],[[1],[0]]);
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]

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.
• 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);

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.

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

dia.cylinder(~0,~0,'',ax,50,8,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.
• 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!");