Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Plot a line using given variables

1. ## Plot a line using given variables

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 !!!

Code:
```<html>
<body>
<script language="javascript" type="text/javascript">

function PolarConvert(){

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;
}

</script>
<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>```

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

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

• Originally Posted by DrDOS
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 ?

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

• 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.

• 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

Code:
```<html>
<body>
<script language="javascript" type="text/javascript">

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(){

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;
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>
<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>```

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•