pixel_object.html
Delivered as text/html
[ hide source ] | [ make this the default ]
File Contents
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Diagram Builder - The Pixel object</title>
<link rel=stylesheet type="text/css" href="diagram.css" />
<SCRIPT Language="JavaScript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0px"></DIV>
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR><TD>
<H3>JavaScript Diagram Builder - The Pixel object</H3>
</TD></TR><TR><TD>
The Pixel object is used to display a pixel on the screen, especially to draw it in a diagram area. In order to
find the appropriate screen position of a pixel, the diagram functions ScreenX, ScreenY, RealX and
RealY can be used. It is also possible, to move, hide and delete a pixel after it has been drawn. Take care
not to draw too many pixels, because this will slow down your webpage.
</TD></TR></TABLE>
<SCRIPT Language="JavaScript">
function MyXScale(xx)
{ var vv=Math.round(xx*4/Math.PI);
if (vv==0) return(0);
if (vv==4) return("<img src=\"pi.gif\">");
if (vv==8) return("2 <img src=\"pi.gif\">");
if (vv%2==0) return(eval(vv/2)+"/2 <img src=\"pi.gif\">");
return(vv+"/4 <img src=\"pi.gif\">");
}
document.open();
var D=new Diagram();
D.SetFrame(80, 160, 540, 460);
D.SetBorder(0, eval(2*Math.PI), -1, 1);
D.SetText("", "", "<B>some functions</B>");
D.XGridDelta=Math.PI/4;
D.XScale="function MyXScale";
D.YGridDelta=0.2;
D.YSubGrids=2;
D.SetGridColor("#FFFFFF", "#EEEEEE");
D.Draw("#DDDDDD", "#000000", false);
var i, j, x;
for (i=80; i<=540; i++)
{ x = D.RealX(i);
j= D.ScreenY(Math.sin(x));
new Pixel(i, j, "#FF0000");
j= D.ScreenY(Math.cos(x));
new Pixel(i, j, "#0000FF");
}
new Bar(560, 200, 680, 220, "#0000FF", "f(x)=cos(x)", "#FFFFFF");
new Bar(560, 260, 680, 280, "#FF0000", "f(x)=sin(x)", "#000000");
document.close();
</SCRIPT>
<DIV STYLE="position:absolute; top:490px">
<B>This diagram was generated by</B><BR /><BR />
<SCRIPT Language="JavaScript"><BR />
function MyXScale(xx)<BR />
{ var vv=Math.round(xx*4/Math.PI);<BR />
if (vv==0) return(0);<BR />
if (vv==4) return("<img src=\"pi.gif\">");<BR />
if (vv==8) return("2 <img src=\"pi.gif\">");<BR />
if (vv%2==0) return(eval(vv/2)+"/2 <img src=\"pi.gif\">");<BR />
return(vv+"/4 <img src=\"pi.gif\">");<BR />
}<BR />
document.open();<BR />
var D=new Diagram();<BR />
D.SetFrame(80, 160, 540, 460);<BR />
D.SetBorder(0, eval(2*Math.PI), -1, 1);<BR />
D.SetText("", "", "<B>some functions</B>");<BR />
D.XGridDelta=Math.PI/4;<BR />
D.XScale="function MyXScale";<BR />
D.YGridDelta=0.2;<BR />
D.YSubGrids=2;<BR />
D.SetGridColor("#FFFFFF", "#EEEEEE");<BR />
D.Draw("#DDDDDD", "#000000", false);<BR />
var i, j, x;<BR />
for (i=80; i<=540; i++)<BR />
{ x = D.RealX(i);<BR />
j= D.ScreenY(Math.sin(x));<BR />
new Pixel(i, j, "#FF0000");<BR />
j= D.ScreenY(Math.cos(x));<BR />
new Pixel(i, j, "#0000FF");<BR />
}<BR />
new Bar(560, 200, 680, 220, "#0000FF", "f(x)=cos(x)", "#FFFFFF");<BR />
new Bar(560, 260, 680, 280, "#FF0000", "f(x)=sin(x)", "#000000");<BR />
document.close();<BR />
</SCRIPT>
<BR /><BR />
<B>You can use the following methods:</B>
<UL>
<LI><B>var P = new Pixel(theX, theY, theColor)</B> //Constructor and Display</LI>
<LI><B>P.SetColor(theColor)</B> //Color</LI>
<LI><B>P.SetVisibility(isVisible)</B> //Show or Hide</LI>
<LI><B>P.MoveTo(theX, theY)</B> //Move</LI>
<LI><B>P.Delete()</B> //Delete DIV object of P from the document</LI>
<LI><B>delete P</B> //Destructor</LI>
</UL><BR />
<BR />
<TABLE NOBORDER CELLPADDING=2 CELLSPACING=2 WIDTH=720><TR>
<TD ALIGN=LEFT><A HREF="dot_object.html">« The Dot object</A></TD>
<TD ALIGN=RIGHT><A HREF="line_object.html">The Line object »</A></TD>
</TR></TABLE>
</DIV>
</body>
</html>
