All about flooble | fun stuff | Get a free chatterbox | Free JavaScript | Avatars    
perplexus dot info
Discussion Forums
Login: Password:Remember me: Sign up! | Forgot password

Forums > Reference
This is a place to ask questions about math terminology, and to post links to other resources out on the web.
brianjn
2009-11-18 22:44:55
Graphics on Perplexus - More

Geometric Graphics






A Javascript Vector Graphics library has been installed on Perplexus. Its small range of functions allows scope for some X,Y coordinate possibilities. (approximations for curves like the sine, parabola and hyperbola can be made but with a bit of work).


Note: No significant javascript is required, use as much as you really desire which may be none, the problem Floating Tangent only uses it to create the grid (and that code appears below) but the grid was not absolutely necessary.


It comes from http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm and is available for free download under GNU License.

Walter Zorn places the path to the library within the HEAD tags of HTML but we can't do that at Perplexus, I include that as the first line of my problem.


<center>-------------------------------------<center>


SCRIPT type="text/javascript" src="path" SCRIPT.

CENTER
TABLE width="x%" TR TD
(Text appearing above graphic can be added here.)
DIV id="name" style="position:relative;" DIV
(add 'padding' BR tags to the area to ensure lower text is not obscured by graphic.)
TD TR TABLE
CENTER

The graphic coding goes in this next section.
SCRIPT type="text/javascript"
var nm = new jsGraphics("name");
Further functions and follow with:<font>
nm.paint( );This is absolutely necessary.

SCRIPT

<center>-------------------------------------<center>



(Note that the syntaxof the tags lacks the "greater/less than" symbols and the closing slash from the second of each Html tag couple.)




This order is important (but the center and table taggings are for the cosmetic purpose of locating the DIV).
* The first SCRIPT references the Library with 'path' being the address of "wz_jsgraphics.js" or "jvg.js" on Perplexus.

* Adjust the value of 'x' to locate the graphic properly.

* The Library writes to a DIV element and this needs an id_name.

* The style="position:relative;" is important to ensure that the top left corner of the display screen is not the origin (0,0), ie, we can locate it as we choose within our document.

* The var declaration is critical, note its syntax; the italics are however your choice.



Each call to one of the Library functions must be prefixed by the variable value of 'nm', eg nm.drawLine(a,b,c,d). While the numeric arguments assigned to the functions must be integers they may be addressed with variables,
the listing below draws a grid with lines 30 pixels apart (and note that this defaults to a style position:absolute, ie the screen window's [0,0] position).




SCRIPT type="text/javascript" src="wz_jsgraphics.js" SCRIPT
DIV id="myCanvas" DIV
SCRIPT type="text/javascript"
var jg=new jsGraphics("myCanvas");
jg.setColor("#000000");
jg.setStroke(1);
x=30;
for(a=0;a<7;a++){
jg.drawLine(0,a*x,5*30,a*x);
}
for(a=0;a<6;a++){
jg.drawLine(a*x,0,a*x,6*30);
}
jg.paint();
SCRIPT On Perplexus the src text is
SCRIPT src="http://perplexus.info/jvg/jvg.js" SCRIPT.

It helps to understand that each item is drawn within a virtual rectangle with its origin (X,Y) at the top left of that rectangle whether or not that setting is expressed in the fuction. The available functions are:

setColor("#xxxxxx" or "name"); fillEllipse(X, Y, width, height);
setStroke(X); fillArc(X, Y, width, height, start-angle, end-angle);
drawLine(X1, Y1, X2, Y2); setFont("font-family", "size+unit", Style);
drawPolyLine(Xpoints, Ypoints); drawString("Text", X, Y);
drawRect(X, Y, width, height); drawStringRect("Text", X, Y, Width, Alignment);
fillRect(X, Y, width, height); drawImage("src",X, Y, width, height);
drawPolygon(Xpoints, Ypoints); paint();
fillPolygon(Xpoints, Ypoints); clear();
drawEllipse(X, Y, width, height); setPrintable(true);

Please see the Walter Zorn page for more about the Library functions and their arguments.


Should you decide to use this technique to compose a problem for Perplexus please ask a scholar to submit the problem on your behalf. This means that you allocate the name, category, etc on Perplexus as you would normally do, leave some text in the Problem body area (it could be complete text without code if you wish). Then email either the complete problem with code, or just the code, depending on how you choose to do it. That will mean that we should not have a problem appearing in some corrupt format.
Copyright © 2002 - 2017 by Animus Pactum Consulting. All rights reserved. Privacy Information