Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Just generate 2px square divs and position them with inline style. Use a gridded background if you need precision.

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

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    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 ?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    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".
    Last edited by jmrker; 12-13-2010 at 05:57 PM.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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>
    <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>
    Last edited by TinyScript; 12-13-2010 at 07:39 PM.


  •  

    Posting Permissions

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