Google Answers Logo
View Question
 
Q: how to use "javascript" to draw an ellipse ( Answered,   0 Comments )
Question  
Subject: how to use "javascript" to draw an ellipse
Category: Science > Technology
Asked by: jackshu-ga
List Price: $5.00
Posted: 02 Nov 2002 17:50 PST
Expires: 02 Dec 2002 17:50 PST
Question ID: 96923
i want use javascript to draw an ellipse and line,can someone tell me how to do?

Request for Question Clarification by gan-ga on 02 Nov 2002 18:20 PST
Hello jackshu,

There are a few different ways of doing this. It all depends on what
your application is.

I could show you how to do it in the Microsoft Internet Explorer 5
browser, using a very small .gif image, and place the ellipse and line
wherever you wanted on the page; you could in fact move them around in
response to user actions.

Perhaps that wasn't what you had in mind.. can you tell us a little
more about what you want to do, so that myself or another researcher
can provide you with an answer that closely fits your requirement?

Best regards,

gan

Request for Question Clarification by gan-ga on 02 Nov 2002 20:25 PST
Hello again jackshu,

The following URL displays some nice JavaScript code which will
provide coordinates for plotting an ellipse, given the position of the
two foci and the semi-minor axis length (half the 'squashed' width).

The code is testable at the URL, however it exists only in Google's
cache. The URL is therefore long, and may break after posting - if so,
you may need to copy-paste it into your browser's address: bar, rather
than click on it:

Scripting: The Circle and Ellipse makers:
http://216.239.51.100/search?q=cache:4Q2BcLDtpTwC:www.unitedscripters.com/scripts/math2.html+ellipse+javascript&hl=en&ie=UTF-8#2

Let me know if this code would be acceptable in an answer, or wether
you would like further information regarding drawing an ellipse.

Request for Question Clarification by gan-ga on 02 Nov 2002 20:34 PST
Unfortunately that link will not work, it redirects immediately.

Use this:

http://www.unitedscripters.com/scripts/math2.html

Best regards

gan

Clarification of Question by jackshu-ga on 03 Nov 2002 02:23 PST
hello,gan
may you tell me how can i put a small .gif image with an ellipse?
i know this idea about it but i dont know how to do , can you teach me?
THX

Request for Question Clarification by gan-ga on 03 Nov 2002 13:15 PST
Hello jackshu,

I'm working on something for you; I will post back as soon as possible.

Best regards,

gan

Request for Question Clarification by gan-ga on 03 Nov 2002 21:42 PST
Hello jackshu,

Here is a page I have put together for you, which will draw an ellipse
using a single-pixel black bitmap (.bmp) image, which you will need to
provide and place in the same directory as the page for it to work.

Copy and paste the code into an empty plain-text document, save it as
an .html file, and try it out - it is only an example, a little 'rough
around the edges', but if it is something like the kind of code you
are looking for, I shall try and explain it for you.

Let me know, if it is useful,

best regards,

gan








<HTML>
<HEAD>
<TITLE>
Ellipse example drawn to the screen, using a one-pixel black .bmp
image, for jackshu-ga
</TITLE>
</HEAD>
<BODY>
<H3>Fill out the information in the boxes, then click 'draw'</H3>
Note: you need a 1 x 1 pixel black bitmap (.bmp) image in the same
directory as this file, for it to work.<p>
<FORM id="dataIn">
<table cellspacing="0" cellpadding="0">
<tr><td>Pixels down the screen, leftmost ellipse tip:  </td><td><input
type="text" length=5 value="200" id="foci2Top"></td>
<tr><td>Pixels across the screen, leftmost ellipse tip: 
</td><td><input type="text" length=5 value="100" id="foci2Left"></td>
<tr><td>Pixels down the screen, rightmost ellipse tip: 
</td><td><input type="text" length=5 value="200" id="foci1Top"></td>
<tr><td>Pixels across the screen, rightmost ellipse tip: 
</td><td><input type="text" length=5 value="300" id="foci1Left"></td>
<tr><td>Enter half the 'squashed' width of the ellipse: 
</td><td><input type="text" length=5 value="130"id="semiMinor"></td>
<tr><td><input type=button value="Draw the ellipse" onClick =
"draw()"></td><td></td>
</tr>
</form>

<script>

function draw()
{
coords=ellipseMaker(dataIn.foci1Top.value,dataIn.foci1Left.value,dataIn.foci2Top.value,dataIn.foci2Left.value,dataIn.semiMinor.value)

for(i=0;i<coords.length;i++)
   {
   document.write("<img src='blackpixel.bmp' id='pixel"+i+"'
style='container: positioned; position: absolute; top: 50; left:
800'>")
   }

for(j=1;j<coords.length;j++)
   {
   document.images[j].style.top=coords[j][0]
   document.images[j].style.left=coords[j][1]
   }
}

function ellipseMaker(foci1Top, foci1Left, foci2Top, foci2Left,
semiMinor, jumpBy, streamline, increaseUnit, dontPopOutLast){
/* Requires gen 4 browsers: using concat(), shift(), pop()
* My thanks to G.E. Ivey from the sci/sci.math newsgroup 
* who helped with the (for me) complex ellipse translation/rotation
formula.
*/
//validate:
semiMinor=(semiMinor && !isNaN(parseFloat(semiMinor)) &&
parseFloat(semiMinor)>0)?
parseFloat(semiMinor):0.5;
foci1Top=(foci1Top && !isNaN(parseFloat(foci1Top)))?
parseFloat(foci1Top):0;
foci1Left=(foci1Left && !isNaN(parseFloat(foci1Left)))?
parseFloat(foci1Left):0;
foci2Top=(foci2Top && !isNaN(parseFloat(foci2Top)))?
parseFloat(foci2Top):0;
foci2Left=(foci2Left && !isNaN(parseFloat(foci2Left)))?
parseFloat(foci2Left):0;
increaseUnit=(increaseUnit && !isNaN(parseFloat(increaseUnit)))?
Math.abs( parseFloat(increaseUnit) ):0.5;
jumpBy=(jumpBy && !isNaN(parseFloat(jumpBy)))? parseFloat(jumpBy):0;
streamline= (streamline+""=="0")?0:1;
//initialize:
var major=Math.round( (Math.sqrt(
Math.pow(
(Math.max(foci1Top, foci2Top)-Math.min(foci1Top, foci2Top))
,2)+
Math.pow(
(Math.max(foci1Left, foci2Left)-Math.min(foci1Left, foci2Left))
,2)
))*1000 )/1000;
  /* an exception: no major axis length! : */
  var noMajor=0;
  if(!major){major=Math.round( (semiMinor*2)*100 )/100;
  noMajor=1;};
var center=new Array(
Math.round( (((foci1Top+foci2Top)*0.5)) *100)/100,
Math.round( (((foci1Left+foci2Left)*0.5)) *100)/100
);
var semiMajor=Math.round((major/2)*1000)/1000;
while(increaseUnit>semiMajor){/*validate more*/
increaseUnit-=semiMajor;
increaseUnit=Math.round( increaseUnit*10 )/10;
};
var quadrant1=new Array(0);
var quadrant2=new Array(0);
var quadrant3=new Array(0);
var quadrant4=new Array(0);
var output=new Array(0);
//sine, cosine: are ratios/a side length:
var thetaCos=(Math.max(foci1Left,foci2Left) -
Math.min(foci1Left,foci2Left))/major;
var thetaSin=(Math.max(foci1Top,foci2Top) -
Math.min(foci1Top,foci2Top))/major;
var SMsm=semiMajor/semiMinor;
var smSM=semiMinor/semiMajor;
var prevY=0;
//run:
for(var x=semiMajor, y=0; x>=0; x-=increaseUnit, y+=increaseUnit){
if(x<0){x=0;};
if(y>semiMinor){y=semiMinor;};
  /* used formula for Y: | (b/h) * SQRT( POW(h)-POW(x) ) | */
  var Y=Math.round(
Math.abs(
(smSM)*(Math.sqrt( Math.pow(semiMajor,2) - Math.pow(x,2) ))
)*1000
)/1000;
  var X=Math.round((x*1000))/1000;
  //streamline?  
  if(!noMajor && streamline && ( (Y-prevY)>increaseUnit) ){
  Y=Math.round((y*1000))/1000;
  X=Math.round(
Math.abs(
(SMsm)*(Math.sqrt( Math.pow(semiMinor,2) - Math.pow(y,2) ))
)*1000
)/1000;
x=X;
  }
  prevY=Y;
  //build path:
var q1=++quadrant1.length-1;
var q2=++quadrant2.length-1;
var q3=++quadrant3.length-1;
var q4=++quadrant4.length-1;
  /* formulas used below for ellipse position translation from center
in Origin (G.E. Ivey):
     x'= x*cos(theta)+ y*sin(theta)
  y'= -x*sin(theta)+ y*cos (theta)
   then, I reversed signs accordingly to the 4 quadrants.
  */
var xSin=X*thetaSin;
var ySin=Y*thetaSin;
var xCos=X*thetaCos;
var yCos=Y*thetaCos;
quadrant1[q1]=new Array(2);
  quadrant1[q1][0]= Math.round( (( (-xSin) + yCos) + center[0])
*10)/10;
  quadrant1[q1][1]= Math.round( ((xCos + ySin) + center[1]) *10)/10;
quadrant2[q2]=new Array(2);
  quadrant2[q2][0]= Math.round( ( ( xSin + yCos) + center[0]) *10)/10;
  quadrant2[q2][1]= Math.round( (( (-xCos) + ySin) + center[1])
*10)/10;
quadrant3[q3]=new Array(2);
  quadrant3[q3][0]= Math.round( (( xSin + (-yCos)) + center[0])
*10)/10;
  quadrant3[q3][1]= Math.round( (( (-xCos) + (-ySin)) + center[1])
*10)/10;
quadrant4[q4]=new Array(2);
  quadrant4[q4][0]= Math.round( (( (-xSin) + (-yCos)) + center[0])
*10)/10;
  quadrant4[q4][1]= Math.round( ((xCos + (-ySin)) + center[1])
*10)/10;
}
quadrant2=quadrant2.reverse();
quadrant2.shift();
quadrant3.shift();
quadrant4=quadrant4.reverse();
quadrant4.shift();
output=output.concat(quadrant1, quadrant2, quadrant3, quadrant4);
if(!dontPopOutLast){output.pop();};
if(jumpBy){
  if(jumpBy>output.length){
  var fakeOutput=new Array(0);
  fakeOutput[++fakeOutput.length-1]=output[output.length-1];
  return fakeOutput;};
var jumpedOutput=new Array(0);
  for(var j=0; j<output.length; j+=jumpBy){
    if((j+jumpBy) > output.length-1){
    jumpedOutput[++jumpedOutput.length-1]=output[output.length-1];
    break;
    }
  jumpedOutput[++jumpedOutput.length-1]=output[j];
  }
return jumpedOutput;}
return output;
/*keep this comment to reuse freely
http://www.unitedscripters.com */} 
</script>

</body>
</html>

Request for Question Clarification by gan-ga on 03 Nov 2002 22:08 PST
Apologies jackshu, in the last posting, some lines in the code became
truncated, rendering the code unusable.

I am hoping the following, pre-truncated code will not break on
posting:





<HTML>
<HEAD>
<TITLE>
Ellipse example drawn to screen, using one-pixel black .gif image
</TITLE>
</HEAD>
<BODY>
<H3>Fill out the information, then click 'draw'</H3>
Note: you need a 1 x 1 pixel black bitmap (.bmp) 
image in the same directory as this file.<p>
<FORM id="dt">
<table cellspacing="0" cellpadding="0">
<tr><td>Pixels down the screen, leftmost ellipse tip:  </td>
<td><input type="text" length=5 value="200" id="f2T"></td>
<tr><td>Pixels across the screen, leftmost ellipse tip:  </td>
<td><input type="text" length=5 value="100" id="f2L"></td>
<tr><td>Pixels down the screen, rightmost ellipse tip:  </td>
<td><input type="text" length=5 value="200" id="f1T"></td>
<tr><td>Pixels across the screen, rightmost ellipse tip:  </td>
<td><input type="text" length=5 value="300" id="f1L"></td>
<tr><td>Enter half the 'squashed' width of the ellipse:  </td>
<td><input type="text" length=5 value="130"id="sM"></td>
<tr><td><input type=button value="Draw the ellipse" onClick =
"draw()">
</td>
<td>&nbsp;</td>
</tr>
</form>



<script>



function draw()
{
coords=eM(dt.f1T.value,dt.f1L.value,dt.f2T.value,dt.f2L.value,dt.sM.value)

for(i=0;i<coords.length;i++)
   {
stylestring="style='container: positioned; position: absolute; top:
50; left: 800'"
document.write("<img src='blackpixel.bmp'
id='pixel"+i+"'"+stylestring+">")
   }


for(j=1;j<coords.length;j++)
   {

document.images[j].style.top=coords[j][0]
document.images[j].style.left=coords[j][1]
   }
}

function eM(f1T, f1L, f2T, f2L, sM, jB, sln, incU, dpol){
/* Requires gen 4 browsers: using concat(), shift(), pop()
* My thanks to G.E. Ivey from the sci/sci.math newsgroup 
* who helped with the (for me) complex ellipse
* translation/rotation formula.
*/
//validate:
sM=(sM && !isNaN(parseFloat(sM)) && parseFloat(sM)>0)?
parseFloat(sM):0.5;
f1T=(f1T && !isNaN(parseFloat(f1T)))? parseFloat(f1T):0;
f1L=(f1L && !isNaN(parseFloat(f1L)))? parseFloat(f1L):0;
f2T=(f2T && !isNaN(parseFloat(f2T)))? parseFloat(f2T):0;
f2L=(f2L && !isNaN(parseFloat(f2L)))? parseFloat(f2L):0;
incU=(incU && !isNaN(parseFloat(incU)))?
Math.abs( parseFloat(incU) ):0.5;
jB=(jB && !isNaN(parseFloat(jB)))? parseFloat(jB):0;
sln= (sln+""=="0")?0:1;
//initialize:
var major=Math.round( (Math.sqrt(
Math.pow(
(Math.max(f1T, f2T)-Math.min(f1T, f2T))
,2)+
Math.pow(
(Math.max(f1L, f2L)-Math.min(f1L, f2L))
,2)
))*1000 )/1000;
  /* an exception: no major axis length! : */
  var noMajor=0;
  if(!major){major=Math.round( (sM*2)*100 )/100;
  noMajor=1;};
var center=new Array(
Math.round( (((f1T+f2T)*0.5)) *100)/100,
Math.round( (((f1L+f2L)*0.5)) *100)/100
);
var semiMajor=Math.round((major/2)*1000)/1000;
while(incU>semiMajor){/*validate more*/
incU-=semiMajor;
incU=Math.round( incU*10 )/10;
};
var quadrant1=new Array(0);
var quadrant2=new Array(0);
var quadrant3=new Array(0);
var quadrant4=new Array(0);
var output=new Array(0);
//sine, cosine: are ratios/a side length:
var thetaCos=(Math.max(f1L,f2L) - Math.min(f1L,f2L))/major;
var thetaSin=(Math.max(f1T,f2T) - Math.min(f1T,f2T))/major;
var SMsm=semiMajor/sM;
var smSM=sM/semiMajor;
var prevY=0;
//run:
for(var x=semiMajor, y=0; x>=0; x-=incU, y+=incU){
if(x<0){x=0;};
if(y>sM){y=sM;};
  /* used formula for Y: | (b/h) * SQRT( POW(h)-POW(x) ) | */
  var Y=Math.round(
Math.abs(
(smSM)*(Math.sqrt( Math.pow(semiMajor,2) - Math.pow(x,2) ))
)*1000
)/1000;
  var X=Math.round((x*1000))/1000;
  //sln?  
  if(!noMajor && sln && ( (Y-prevY)>incU) ){
  Y=Math.round((y*1000))/1000;
  X=Math.round(
Math.abs(
(SMsm)*(Math.sqrt( Math.pow(sM,2) - Math.pow(y,2) ))
)*1000
)/1000;
x=X;
  }
  prevY=Y;
  //build path:
var q1=++quadrant1.length-1;
var q2=++quadrant2.length-1;
var q3=++quadrant3.length-1;
var q4=++quadrant4.length-1;
  /* formulas used below for ellipse
 position translation from center in Origin (G.E. Ivey):
     x'= x*cos(theta)+ y*sin(theta)
  y'= -x*sin(theta)+ y*cos (theta)
   then, I reversed signs accordingly to the 4 quadrants.
  */
var xSin=X*thetaSin;
var ySin=Y*thetaSin;
var xCos=X*thetaCos;
var yCos=Y*thetaCos;
quadrant1[q1]=new Array(2);
quadrant1[q1][0]= Math.round((((-xSin)+yCos)+center[0])*10)/10;
quadrant1[q1][1]= Math.round(((xCos+ySin)+center[1])*10)/10;
quadrant2[q2]=new Array(2);
quadrant2[q2][0]= Math.round(((xSin+yCos)+center[0])*10)/10;
quadrant2[q2][1]= Math.round((((-xCos)+ySin)+center[1])*10)/10;
quadrant3[q3]=new Array(2);
quadrant3[q3][0]= Math.round(((xSin+(-yCos))+center[0])*10)/10;
quadrant3[q3][1]= Math.round((((-xCos)+(-ySin))+center[1])*10)/10;
quadrant4[q4]=new Array(2);
quadrant4[q4][0]= Math.round((((-xSin)+(-yCos))+center[0])*10)/10;
quadrant4[q4][1]= Math.round(((xCos+(-ySin))+center[1])*10)/10;
}
quadrant2=quadrant2.reverse();
quadrant2.shift();
quadrant3.shift();
quadrant4=quadrant4.reverse();
quadrant4.shift();
output=output.concat(quadrant1,quadrant2,quadrant3,quadrant4);
if(!dpol){output.pop();};
if(jB){
if(jB>output.length){
var fakeOutput=new Array(0);
fakeOutput[++fakeOutput.length-1]=output[output.length-1];
return fakeOutput;};
var jumpedOutput=new Array(0);
for(var j=0; j<output.length; j+=jB){
if((j+jB) > output.length-1){
jumpedOutput[++jumpedOutput.length-1]=output[output.length-1];
break;
}
jumpedOutput[++jumpedOutput.length-1]=output[j];
}
return jumpedOutput;}
return output;
/*keep this comment to reuse freely
http://www.unitedscripters.com */} 
</script>

</body>
</html>

Clarification of Question by jackshu-ga on 10 Nov 2002 19:47 PST
gan, thank you tell me the java code,but i test it,and i cant run it
,it has some problem i couldnt solve.
i cant find where the problem is , could help me one more time, test
it again?

Request for Question Clarification by gan-ga on 11 Nov 2002 03:47 PST
Hello again jackshu,

I'm working on a step-by-step for you, so that you should find it
easier to obtain a working copy of the javascript code to study.

I'm aware that you must be having problems running the code as posted
- this is due to the posting process itself having cut some lines of
code in two, where they need to be all on one line.

I shall post back as soon as I'm confident that I have a method you
can easily follow.

Best regards,

gan.

Request for Question Clarification by gan-ga on 12 Nov 2002 08:58 PST
Hello jackshu,

You may like to visit the following page:

Demonstration: Using JavaScript to draw an ellipse:
http://www.beginnerprogrammer.com/jackshu.html

If you use your browser's 'View > Souce' menu, you should be
able to examine the code and functions used to create and 
display the ellipse. Also, a link is provided to the original
author's page, where he provides a discussion of his ellipseMaker()
javascript function.

I hope this helps; let me know if it brings you success in your 
application.

Best regards,

gan
Answer  
Subject: How to use "javascript" to draw an ellipse
Answered By: skorba-ga on 13 Nov 2002 05:43 PST
 
Dear Jackshu -

I hope you were not intimidated by the long (and very excellent, I
assure you) postings above.

But I think they may have been slightly more in-depth than you need.

Here is a simple way of generating an ellipse with some Javascript
code embedded inside a HTML document. Please copy this code into a
textfile, name it ellipse.html, and open that text file in Internet
Explorer (or Mozilla or Opera or any other browser that supports
javascript):


<html>
<head>
<title>the google answers ellipse</title>
<script type="text/javascript"><!--

// set the color
var inside_color  = "#ff0000";
var outside_color = "#000000";

// set the 'size' of the final image
// NB Javascript is slow compared to other techniques,
// so do not make the image too large!
var image_width  = 80;
var image_height = 40;

// remember the formula for an ellipse x2 / a2 + y2 / b2 = c2
// or if we type it out so that javascript understands it:
// x * x / (a * a) + y * y / (b * b) = c * c

// here are an example of a,b,c that produces an ok ellipse:
// (you can of course try other values for a,b,c ...)
var a = 6;
var b = 3;
var c = 6;





// is our pixel 'inside' the ellipse ?
function pixelColor (x, y)
{
	x = x - (image_width  / 2); // shift the coordinates so that the
	y = y - (image_height / 2); // elipse in centered on our 'image'

	if (x*x/(a*a) + y*y/(b*b) < c*c) return inside_color;
	else return outside_color;
}

// we represent our 'image' as a html table with colored table cells

var ellipse_html = '<table cols="' + image_width;
ellipse_html += '" cellpadding="0" cellspacing="0" border="0">';
for (y = 0; y < image_height; y++)
{
   ellipse_html += '<tr>';
   for (x = 0; x < image_width; x++)
   {
	   ellipse_html += '<td width="1" height="1" bgcolor="';
	   ellipse_html += pixelColor (x, y);
	   ellipse_html += '" nowrap></td>';
   }
   ellipse_html += "</tr>";
}
ellipse_html += '</table>';

//--></script>

</head>
<body>
<script language="javascript"><!--
// here we embed the code generated above
document.writeln (ellipse_html);
//--></script>
</body>
</html>


Final notes:

1)
For a nice disussion of ellipses and formulas, see:
http://home.att.net/~numericana/answer/ellipse.htm

2) Javascript is a VERY INEFFICIENT teqhnique to use when generating
graphics. If you plan to do a lot of graphic stuff, please be advised
to look into flash or java.

3) The technique described above does not require any gif, but please
be advised that some older versions of Netscape will not render the
background color of an empty table cell. In that case, please modify
the code to insert a transparent gif in each table cell.

Good luck!
Comments  
There are no comments at this time.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  


Google Home - Answers FAQ - Terms of Service - Privacy Policy