GBgraph is used to plot sequences. The sequence definition, denoted a[n], is given by a JavaScript expression. GBgraph can display integer sequences (a[n] is integer) or real sequences (a[n] not integer). See gInt parameter. GBgraph can display on the same graph two sequences : a[n] and b[n]; If you do not like integer sequences, GBgraph allows you to plot y =f(x) curves, or parametric (x=fx(t), y=fy(t)) curves, or polar parametric curves (rho = f(theta)) For example : a[n] = n * n ; // simple sequence if( n <=1) a[n] = 1 ; else a[n] = a[n-1] + a[n-2] ; // recursive sequence interval(-1.2,2.4) ;a[n] = sin(n); // not integer a[n] = sin(n/7); b[n] = cos(n/13); To plot a sequence, enter its definition, and click on the "Draw" button. You can set various drawing parameters (colors, marks, ...) in the sequence definition. (see below : Parameters) Warning : GBgraph uses the HTML5 <canvas> tag. Currently not supported by IE8, but slowly emulated by the excanvas.js library. Firefox, Google Chrome, etc. will provide better and FASTER rendering, especially when animating.GBgraph uses the RGgraph library. All credits to the author.
GBgraph engine - algorithm
Let jExpr the JavaScript expression defining a[n] (b[n]) and setting some globals. The engine runs as follow jExpr = transform(jExpr); // replace a[n] by an_ , etc. inInit=1; n = nMin ; eval(jExpr); inInit = 0; // PROLOGUE inFinish = 0; for(var i=0; i <= nSteps;i++) { if(i == nSteps) inFinish =1; // EPILOGUE n = nMin + i; eval(jExpr); // gives a value to an_, bn_ adata[i] = scale(an_,yMin,yScale,yLog) ; bdata[i] = scale(bn_,yMin,yScale,yLog) ; // if defined } compute yMax if needed ; draw(adata,bdata) ;programming tips
a[n] is implemented as a function. You can write the equivalent : a[n] = some expression of n a(n) = some expression of n Shortcut : you can write an_ in place of a[n] or a(n) Shortcut : you can write bn_ in place of b[n] or b(n) You cannot write a[0] = 666 ; write instead : if(n == 0) a[n] = 666 else .... GBgraph uses a cache to store values of a[n],a[n-1], .. Recursive sequences are quite fast.
[,gee] denotes an optional parameter You can use any JavaScript function to define a[n], or the following :math functions
var fPrec = 4; Set the precision output for decimal(floating) numbers. Default = 4 : PI=3.1416 var EPS = 0.0001; Set the precision value for solving equations. var gMaxIter = 100; Set the number of maximum interations. Both used by solve(), integrate(), deriv() ... abs(a) the absolute value of a acos(a) arc cosine of a asin(a) arc sine of a atan(a) arc tangent of a atan2(a,b) arc tangent of a/b ceil(a) integer closest to a and not less than a cos(a) cosine of a. cos(PI)=-1. exp(a) exponent of a floor(a) integer closest to and not greater than a log(a) log of a base E. log(E)= 1. max(a,b) the maximum of a and b min(a,b) the minimum of a and b pow(a,b) a to the power b random() pseudorandom number in the range 0 to 1 round(a) integer closest to a sin(a) sine of a. sqrt(a) square root of a tan(a) tangent of a gauss(a[,m[,s]]) returns (1/(s*sqrt(2*PI))) * exp (- ((x-m)/s) * ((x-m)/s) / 2) default values are m=0 , s=1 integrate(f,a,b[,depth]) integrates f in [a..b]. uses Simpsons' adaptive method and EPS for precision depth is max level of recursion (default 10) EX : a[n] = integrate(sin,0,PI) --> 2 EX : a[n] = integrate(function(x) {return x;},0,n) --> n*n deriv(f,x0) returns f'(x0) inv(f,x[,ymin[,ymax]]) inverse function returns y such as x = f(y) . y in [ymin..ymax] default ymin is 0 default ymax is yMax global if != 0 ; see demo scriptinterpolation
var gReg = 0; If 1, draws the linear regression over a[n] values. var gSpline = 0; If gSpline == 1 a[n] := linear interpolation of a[n] b[n] := cubic spline interpolation of a[n]. See demo 'Cubic splines' var nSlices = 10 ; is the number of interpolation points between a[i] and a[i+1] Ex : gSpline = 1; interval(-1,1,5); gInt=0; a(n) = exp(-n*n); If gSpline == 2 a[n] := cubic spline interpolation of a[n]. tangent(f,x0); Computes and draws the tangent of n at x0. The computed points are stored in b[n] Warning You cannot write : a[n]=n*n ; tangent(a,10) ; // recursive stack overflow Write instead : if(inInit) function f(x) {return x*x;} a[n]= f[n] ; tangent(f,10); See 'tangent' demo script.GB integer functions
fact(a) a! = factorial(a) - 0! = 1 cbin(a,k) binomial coefficient = a! / (k! * (a-k)! ) gcd(a,b) greatest common divisor isprime(a) 0 or 1. isprime(101) --> 1 isint(a) 1 if a is an integer; else 0. nextprime(a) next prime > a numdiv(a) numbers of divisors (including 1 and a) numprimes(a) number of primes <= a nthprime(a) nthprime(1)= 2; nthprime(10) = 29; powmod(base,exponent,m) returns base^exponent modulus(m) sumdiv(a) sum of divisors (including 1 and a) sigma(nmin,nmax,f) f is a function - returns sum[n=nmin to n=nmax] f(n) Ex : sigma(0,n,function(x) {return x*x;}) product(nmin,nmax,f) f is a function - returns product[n=nmin to n=nmax] f(n) diff(n,f) first difference. returns f(n+1)-f(n) . Ex: a[n] = diff(n,function (x) {return x*x;}) diff(n,f,k) k-th difference = diff(n+1,f,k-1) - diff(n,f,k-1) use(u) Flag the integer u as 'used' notused(s) Returns the least integer > s and not used Eratosthene's sieve : use(0);use(1); a[n] = notused(n); for(var i = a[n];i<=1000;i+=a[n]) use(i)Math constants
PI 3.14159.... E 2,71828.... GAMMA 0.57721566.. Euler gamma constanttimer
mtime(0); resets timer (Clicking on DRAW button resets the timer, too) mtime(); returns number of milliseconds since last resetmisc
trace(v); trace of value v: trace(nFrame), ... nprompt(q,default) asks for an integer value and returns this value or default if cancelled. nprompt("enter a value for a[0]",17)solving equations
a[n] = solve(expr1(n,a[n]) == expr2(n,a[n]),aMin,aMax) aMin and aMax are min and max values for a[n] expr1/2 are any expressions in n,a[n] , valid in the interval [aMin...aMax] Ex: gInt = 1 ; nMin=1 ; a[n] = solve(isprime(a[n]*a[n]+n) == 1,1,100) Ex: gInt = 0 ; yMax=3 ; a[n] = solve(log(a[n]) == sin(n/3),0.001,10)
Buttons and user interface functions
reset() : resets timer and math params to default values reset(1) : resets ALL params (math,style,color,..) to default values init() : reset() and computes a[nMin] .. a[nMin+nSteps] DRAW draw() : init() and (re)draws the graph A[N] : adds (pastes) a[n] as a comment into the definition box /* aList = [value1,value2...] */ You may then select all (Ctrl-A), copy (Ctrl-C) and paste (Ctrl-V) into your favorite tool. [X,Y] : pastes a[n] or plotted sequence (gList) as array of [x,y] coordinates /* gList= [[x0,y0],[x1,y1],...] */ PARAMS params() : show parameters values ANIMATE animate() : scrolling(default) or frame mode . var nFrameMax = 0; if(not 0) max number of frames to animate. var nFrame = 0; Frame number You can see nFrame as the 'time' parameter of the graph. See demo scripts. var gFrame = 0; Framing style : 0 = scrolling, 1= redrawing if(gFrame == 0) : while(not stopped) do {nMin++;nFrame++ ;scrolls } if(gFrame == 1) : while(not stopped) do {nFrame++; (re)draws the graph} pulse(p) : returns an oscillating value, in [1-1/p..1+1/p] useful for animating. See demo 'Pulse' var gAnim=1; If 0, do not allow graph animation (disable buttons) SPEED+ speed(1) : accelerates (tInterval /= 2;) - tInterval default = 256 msec SPEED- speed(-1) : slows down (tInterval *= 2;) STOP stops animation STEP animates step by stepread-only
var inInit = 0; if (inInit) {do something} inInit is set to 1 ONCE when computing a[nMin] Useful to set global parameters var inFinish = 0; if (inFinish) {do something} inFinish is set to 1 ONCE when computing a[nMax] See 'tangent' demo script.user settings and default values
var nSteps = 100; How many values to display in the interval ? var nMin = 0; Starting value for n display interval is [nMin .. nMin+nSteps] interval(xMin,xMax[,nSteps]); display interval is [xMin ...xMax] default is : interval(0,100,100) EX. interval(-3,42) EX. interval(0,10000,100) --> draw a[0],a[100],a[200],..a[10000] var gInt = 1; GBgraph tries to guess if the sequence is integer (gInt = 1), or not (gInt = 0). You can force gInt to the wanted sequence type. var yMax = 0; sets yMax (not scaled) display value - if(yMax==0) yMax is computed var yMin = 0; display y[n] = a[n] - yMin (vertical translation) var yScale = 0; if(yScale > 0) display y[n] = a[n] / yScale var yLog = 0; if (yLog == 1) display y[n] = log(a[n]) var xMax = 0; max value on xAxis. Only used in plotting. Default= yMax var xAxis = 0; if(xAxis == 1) draw x axis centered (negative values of y) var yAxis = 0; if(yAxis == 1) draw y axis centered (negative values of x)drawing
var gTitle = ''; title for the graph var gStyle = 1; graph style. 1 = LINE - 2 = BAR var gCross= 0; 1 if wants cross hairs (always 0 for IE) var lWidth = 1; line width var gColor = 'red' ; graph color ('red', 'green',..) or '#rrggbb' RGB hexa string var bColor = '#ffffee' ; background color '#rrggbb' RGB hexa string var gStepped = 0; 1 to draw steps - chairs - (LINE graph only) var gFilled = 0; 1 to fill graph (LINE graph only) var fColor = 'yellow'; fill color ('red', 'green',..) or '#rrggbb' RGB hexa string var lColor = array(512) a list of 512 colors as shown here. var gTick = 'cross' ; What kind of tickmarks to use on a LINE graph. This can be one of : var lTick = ['dot', 'circle', 'filledcircle', 'endcircle', 'square', 'endsquare', 'filledsquare','filledendsquare', 'tick', 'halftick', 'endtick', 'cross', 'borderedcircle', 'arrow', 'filledarrow'] ; var gVariant = 'dot'; What kind of tickmarks to use on a BAR graph. This can be: bar, dot, pyramid, arrow, 3d, sketch, glass. mark(x,y); Add a mark at location (x,y) x >=nMin and y <= yMax Ex: a[n]= n*n ; if(isprime(a[n]+1)) mark(n,a[n]); var gMarkColor = 'blue'; mark color ('red', 'green',..) or '#rrggbb' RGB hexa string var gMark ='filledcircle'; What kind or marks to use on a LINE graph. See gTick for allowed values.plotting - here we forget a[n] and b[n]
Do not forget to set xMax and yMax (mandatory) plotf(f,xmin,xmax[,steps]) starts a new plot subgraph. plots f(x) in [xmin,xmax]; default steps is 100 paramf(fx,fy,tmin,tmax[,steps]) starts a new plot subgraph plots (fx(t),fy(t)) int [tmin,tmax]; default steps is 100 see demo script : bedane polarf(rho,[x0[,y0[,tmin[,tmax[,steps]]]]]) starts a new plot subgraph. plots the function rho(t) at (x0,y0), t in[tmin..tmax] defaults : x0=y0=0; tmin=0; tmax= 2*PI ; steps= 100 ; see demo : Three body problem var gList ; The plotted sequence is stored in the global gList. gList =[[x0,y0],[x1,y1],.....] You can also directly enter gList into the definition box.plotting - advanced features - canvas API
moveto(x,y) starts a new plot subgraph (= path) at (x,y) this allows to have several curves in the plane plot(x,y) plot(x,y) to define all points of a path random walk : xMax=yMax=1; for(var i=0; i<100;i++) plot(random(),random()) ; polar(r,t[,x0,y0]) plot(x0+r*cos(t)/2,y0+r*sin(t)) default : x0=y0=0;
GB0001 Firefox
For some reason the following does not work :
if (inInit) function foo(x) {return integrate(gauss,-W,x);}
Replaced by :
/*if(inInit) BUG Firefox */ function foo(x) {return integrate(gauss,-W,x);}
- Is it possible to draw two sequences ?
Yes. Provide definitions for a[n] and b[n] and use LINE style (gStyle = 1;)
Ex : nMin= 100 ; a[n] = numprimes(n); b[n] = n / (log(n)-1);
- Is it possible to define a function ?
Yes. Ex : if(inInit) function foo(n){return sin(n/7)+cos(n/13);} a(n) = integrate(foo,0,n)
- Can I enter (paste) a list of numbers to define the beginning of a sequence ?
Yes. Use the global aList which defines a[n]
Ex : aList = [10,9,8,7,6,5] ; // see aList demo script
- Is is possible to draw anywhere in the plane ?
Yes. Use the mark(x,y) function, or the plot(x,y) function.
- problem ?
Check the global gInt (1 = integer sequence; 0 = not integer)
Or check yMax,xMax when plotting
Or click on the 'Draw' button
Or, reload (F5 or CTRL-F5) the page
Or, if Javascript error 'not an object', check spelling
Or, last hope, mail to echolalie@echolalie.com (Subject : GBgraph)