possien Posted May 5, 2014 Share Posted May 5, 2014 I have tasking to produce graphs that convert polar coordinates to x,y and spherical trig plots. Since GD and SVG origins are inverted or backwards from a normal xy graph, is there a way to convert xy to GD or SVG using math? The calculations to plot in normal xy are relatively easy and some have negative values but I am not having success at putting the output to a usable display. Any suggestions? <!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Plot Polar to XY Line</h2> <?php $rad = 25; $x = round($rad*cos(45)); $y = round($rad*sin(45)); echo "Value of x: ".$x."<br>"; echo "Value of y: ".$y."<br>"; echo "Plot of a 45 deg's with PHP in red, correct plot in blue"; ?> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <svg width="100" height="100"> <circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" /> <line x1="50" y1="50" x2="<?php $x;?>" y2="<?php $y;?>" style="stroke:red;stroke-width:2"/> <line x1="50" y1="50" x2="100" y2="0" style="stroke:blue;stroke-width:2"/> </svg> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/ Share on other sites More sharing options...
Barand Posted May 6, 2014 Share Posted May 6, 2014 (edited) try <?php $rad = 125; $x = 50 + round($rad*cos(deg2rad(45))); $y = 50 - round($rad*sin(deg2rad(45))); echo "Value of x: ".$x."<br>"; echo "Value of y: ".$y."<br>"; echo "Plot of a 45 deg's with PHP in red, correct plot in blue"; ?> edit : PS <?php $x ?> should be <?php echo $x ?> Edited May 6, 2014 by Barand Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/#findComment-1478350 Share on other sites More sharing options...
gizmola Posted May 6, 2014 Share Posted May 6, 2014 FWIW, while Barand's code is probably right, because.. well it's Barand and he wrote a bunch of libraries that do graphing (see links in his signature), I feel you might also benefit from just reading about how you can do this purely in SVG, covered fairly completely here: http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/#findComment-1478456 Share on other sites More sharing options...
possien Posted May 6, 2014 Author Share Posted May 6, 2014 I think I am getting there, I changed the origin to x=0 and y=max of the plot area and for negative values origins are x=max and y = max of the plot area (separate SVG graphic). Thanks for the math help and links. I do believe SVG is much easier. Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/#findComment-1478477 Share on other sites More sharing options...
gizmola Posted May 6, 2014 Share Posted May 6, 2014 Well those links suggest you just plot the item using your cartesian coordinates and then transform the Y coordinate. But whatever works for you Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/#findComment-1478485 Share on other sites More sharing options...
possien Posted May 7, 2014 Author Share Posted May 7, 2014 Ok, I finally got it now, understanding transform: function compass(){ $angle = array(0,45,90,135,180,225,270,315); for ($i = 0; $i <= 7; $i++) { $a = $angle[$i]; $Ox1 = 50; $Oy1 = 50; $rad = 40; $x = 50 + round($rad*cos(deg2rad($a))); $y = 50 - round($rad*sin(deg2rad($a))); //echo 'x= '.$x.' | y= '.$y.'<= for angle '.$a.'<br>'; $html = '<line x1="'.$Ox1.'" y1="'.$Oy1.'" x2="'.$x.'" y2="'.$y.'" style="stroke:red;stroke-width:2"/>'; $html = $html++; echo $html; } } ?> <svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg"> <svg width="100" height="100"> <g transform="translate(0,100) scale(1,-1)"> <circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" /> <?php compass();?> </svg> Thanks gizmola and Barand! Now to spherical trig... Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/#findComment-1478636 Share on other sites More sharing options...
Barand Posted May 8, 2014 Share Posted May 8, 2014 I haven't used SVG and your post has piqued my interest in using it. A couple of things confuse me though. 1. What is this line supposed to achieve... $html = $html++; 2. If I remove the line containing the transform I get exactly the same output as with the line. Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/#findComment-1478793 Share on other sites More sharing options...
dragonmom0 Posted January 12, 2018 Share Posted January 12, 2018 (edited) The original problem presented includes an error in how to integrate the value of PHP variables inside SVG code. Since the point of the posting was to solve this problem, I debugged the original code and present the solution below. As Barand points out, the "final" correct code posted by Possien has a no operation line "$html = $html++;" and doesn't clearly "correct" his original problem which is how to integrate PHP variables within SVG code. The coder needed to "echo" the variables $x and $y not just reference them. Let me explain Barand's correction first and then mine. Barand first corrects mathematical errors: Barand changes the size of the radius from 25 to 125. In actuality the size has to be > 48 to reach the edge of the size-50 radius circle with a stroke size of 2. Barand also corrects the calc for $x and $y. The addition of the number 50 in each x and y calculation is to take into consideration the center point of the circle which is x=50, y=50. Cosine and Sine functions require parameters in radians not degrees hence the deg2rad() function which translates the number 45 degrees to radians. The "Final" code Possien posted changes how he references variables but I felt it confused the point. He was so close originally, I thought I would point out the small correction for other's benefit. My correction is the fourth changed line. Echo the variables don't just reference them. From the first set of code, change only these four lines: $rad = 25; $x = round($rad*cos(45)); $y = round($rad*sin(45)); <line x1="50" y1="50" x2="<?php $x;?>" y2="<?php $y;?>" style="stroke:red;stroke-width:2"/ to these lines: $rad = 48; $x = 50+round($rad*cos(deg2rad(45))); $y = 50-round($rad*sin(deg2rad(45))); <line x1="50" y1="50" x2="<?php echo $x;?>" y2="<?php echo $y;?>" style="stroke:red;stroke-width:2"/ Final Code which works is as follows: <!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Plot Polar to XY Line</h2> <?php $rad = 48; $x = 50+round($rad*cos(deg2rad(45))); $y = 50-round($rad*sin(deg2rad(45))); echo "Value of x: ".$x."<br>"; echo "Value of y: ".$y."<br>"; echo "Plot of a 45 deg's with PHP in red, correct plot in blue"; ?> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <svg width="100" height="100"> <circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" /> <line x1="50" y1="50" x2="<?php echo $x;?>" y2="<?php echo $y;?>" style="stroke:red;stroke-width:2"/> </svg> </body> </html> Edited January 12, 2018 by dragonmom0 Quote Link to comment https://forums.phpfreaks.com/topic/288268-gd-or-svg-graphing-math/#findComment-1555273 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.