A System simulates a system of linear differential equations of the form:
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 matricesX 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 unitsReturns: the System
sys.tMax(10);
System.h(h)Sets the simulation step-size.
Default: 0.01
h new step-sizeReturns: the System
sys.h(.005);
System.spf(spf)Sets the numbers of steps calculated each animation frame.
Default: 15
spf steps per frameReturns: the System
sys.spf(10);
System.fps(fps)Sets the animation framerate (frames per second).
Default: 30
h new framerateReturns: 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(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 fromvars 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, cyanReturns: 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']);
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);
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 textn 0 for default, not 0 for the secondary defaultQ cardinal location: 'N', 'S', 'E', or 'W' (case insensitive)offsX, offsY offset from centeraln text alignment. 0 for centered, 1 for right, -1 for leftDiagram.lScale(scl)Set the diagram's linear scaling factor.
scl new lScale valueReturns: 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 valueReturns: 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 labelaxis 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 labelReturns: a Mass object
m1=dia.mass(-1,'M',ax,100,-8,70,40,'B',1);
Diagram.spring(label,axis,mA,mB,off)Diagram.dash(label,axis,mA,mB,off)Diagram.rope(label,axis,mA,mB,off)Creates a spring, dashpot, or line segment (rope) between two masses or fixed points.
label labelaxis 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.wire(p1,p2,label)Diagram.resistor(p1,p2,label)Diagram.capacitor(p1,p2,label)Diagram.inductor(p1,p2,label)Diagram.terminal(p1,p2,label)Diagram.source(p1,p2,label)Diagram.sourceI(p1,p2,label)Diagram.sourceV(p1,p2,label)Create a circuit element between two points.
p1, p2 Endpoints of element, in the form [x,y].label labelReturns: 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.node(p,label)Diagram.ground(p,label)Diagram.terminal(p,label)Create a circuit element at one point.
p the point, in the form [x,y]label labelReturns: 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 labelspacing 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 labelReturns: 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 labelReturns: 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 labelReturns: a Block object
dia.block([20,10],[60,80],'R');
Diagram.arrow(v,loc,angle,scale,label)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 labelReturns: 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 labeldashed makes the arrow dashedReturns: 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 labelReturns: 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: 8label labelReturns: 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: 16Returns: 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 labelA 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 labelReturns: 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 labelA 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,A,loc,r,va,vl,lScale,w)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 labelA 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 numbervl 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 labelA 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.motor(vr,vi,p,s,dir)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<-SReturns: 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.<-Sdir magnetic field direction; 0: NSN, 1:SNSReturns: 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]);
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 valuechf a function called on changetitle title text that appears to the leftlimits 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]);
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!");