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	

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.