Plot a line using given variables

killykilly

12-13-2010, 04:54 PM

Hi ! I am trying to plot a line using the variables that I have derived in this "rectangular to polar" conversion program. I am just new to javascript and to programming generally. But with the help of sample codes here, I have managed to deal with some easy problems.

I have read that drawing in javascript isn't so easy. Could you give me some hints on how to draw the following variable in polar coordinates. Do I need to use another programming language aside from javascript ?

Thank you very much !!!

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">

function PolarConvert(){
num_1=Number(document.addition.entry_1.value);
num_2=Number(document.addition.entry_2.value);

valNum1=Math.pow(num_1,2);
valNum2=Math.pow(num_2,2);
valNum3=Math.sqrt(valNum1 + valNum2);

valNum4=Math.atan(num_2/num_1);
valNum5=(valNum4*180)/Math.PI;
document.addition.endVal.value=valNum3;
document.addition.endVal2.value=valNum5;
}

</script>
<form name="addition">
<input type="text" name="entry_1">+ j
<input type="text" name="entry_2"> =
<input type="text" name="endVal"> angle
<input type="text" name="endVal2"><br>
<input type="button" value="Convert to polar" onclick="PolarConvert()">
<input type="reset" value="Clear">
</form>
</body>
</html>

DrDOS

12-13-2010, 05:19 PM

Just generate 2px square divs and position them with inline style. Use a gridded background if you need precision.

style="left: 921px; top: 1001px;"

killykilly

12-13-2010, 05:21 PM

Just generate 2px square divs and position them with inline style. Use a gridded background if you need precision.

style="left: 921px; top: 1001px;"

Please bear with me, I'm new to programming. Where do I place it ?

jmrker

12-13-2010, 05:54 PM

You don't need another language, just a way to manipulate the one your have.
See: http://gualtierozorni.altervista.org/jsgraphics/jsgraphics_e.htm
as a start point or google "javascript graphics".
:)

DrDOS

12-13-2010, 06:09 PM

Here's an example that plots a rocket launch, it uses 2x2 divs inside of spans. It needs to be converted to polar coordinates too.

http://ronbeau.50webs.com/rocket.html

If you use Firefox, right click on the body of the page and select all, then again and choose view selection source you can see all the code generated by javascript.

TinyScript

12-13-2010, 07:21 PM

I don't really know what the plotting should look like. I just guessed at what the numbers would be used for, so I know it's probably wrong, but I just wanted to demonstrate how to use the canvas element to plot

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">

window.onload=function(){
canvas=document.getElementById("canvas") //reference to the html element with id canvas
ctx=canvas.getContext("2d") //reference to the drawing API of element with id canvas
center={x:100,y:100} //object for center
canvas.width=canvas.height=center.x*2

}

function PolarConvert(){

num_1=Number(document.addition.entry_1.value);
num_2=Number(document.addition.entry_2.value);

valNum1=Math.pow(num_1,2);
valNum2=Math.pow(num_2,2);
valNum3=Math.sqrt(valNum1 + valNum2);

valNum4=Math.atan(num_2/num_1);
valNum5=(valNum4*180)/Math.PI;
document.addition.endVal.value=valNum3;
document.addition.endVal2.value=valNum5;
ctx.strokeRect(.5,.5,199,199)//outer rectangle
ctx.lineWidth=1
ctx.strokeStyle="red"//sets stroke color
ctx.beginPath()
ctx.moveTo(0,center.y)
ctx.lineTo(center.x*2,center.y)//center grid horz
ctx.closePath()
ctx.stroke()
ctx.beginPath()
ctx.moveTo(center.x,0)
ctx.lineTo(center.x,center.y*2)//center grid vert
ctx.closePath()
ctx.stroke()
ctx.fillStyle="blue"//sets fill color

ctx.fillRect( center.x + Math.cos(valNum5)*valNum3 , center.y + Math.sin(valNum5)*valNum3, 2, 2) //fills rect at (x,y,width,height)

}

</script>
<form name="addition">
<input type="text" name="entry_1">+ j
<input type="text" name="entry_2"> =
<input type="text" name="endVal"> angle
<input type="text" name="endVal2"><br>
<input type="button" value="Convert to polar" onclick="PolarConvert()">
<input type="reset" value="Clear">
</form>
<canvas id="canvas"></canvas>
</body>
</html>