Adasiax Posted June 9, 2013 Share Posted June 9, 2013 I have a lissajous figure write in PHP but i want to dynamically change a1,a2 T1,T2 value by implementing a slider that when released, posts to the server, updates the values and recreates the image. Can someone help me to do that? Here is a similar example of what I mean http://www.scottlogic.co.uk/blog/colin/2009/06/dependency-property-performance-and-lissajous-figures/ Here is the code: <?php header ("Content-type: image/png"); ///x = a1 * cos(t/T1); /// y = a2 * sin(t/T2); $T1 = 20; $T2 = 30; $myImage = @imagecreatetruecolor(640, 480) or die("Cannot Initialize new GD image stream"); $text_color = imagecolorallocate($myImage, 255, 255, 224); $poly_color = imagecolorallocate($myImage, 124, 120, 224); //calculate x-value and y-value point by point $points = array(); for ($i=0; $i<1000; $i=$i+1) { //define curve's function $x = 310*cos($i/$T1); //define x-value $y = 230*sin($i/$T2);//define y-value //move the coordinate, append a point's x-value and y-value $points[] = 320+$x; //x-value $points[] = 240-$y; //y-value } //count points $totalPoints = count($points)/2; //drawing title $title = "Final Plot ($totalPoints points)"; imagestring($myImage, 3, 5, 5, $title, $text_color); /** drawing points one by one, notice if there * are 10 points, we need to draw 9 lines: * 1) point 0 to 1; * 2) point 1 to 2; * ... * ... * 9) point 8 to 9; */ for ($i=0; $i<$totalPoints-1; $i++) { imageLine($myImage, $points[2*$i], $points[1+2*$i], $points[2+2*$i], $points[3+2*$i], $poly_color); } //finalizing imagepng($myImage); imagedestroy($myImage); ?> Link to comment https://forums.phpfreaks.com/topic/278956-lissajous-figure-php/ Share on other sites More sharing options...
kicken Posted June 9, 2013 Share Posted June 9, 2013 Make your $T1 and $T2 variables reference a $_GET variable rather than be static: $Values = $_GET + array( 'T1' => 20 //Default values , 'T2' => 30 //Used if nothing is given ); $T1 = $Values['T1']; $T2 = $Values['T2']; Then you just need to implement the sliders and use some Javascript to update the source of an image tag whenever they change their value. jQuery UI has a slider widget you could use fairly easily. <img src="lissajous.php" id="lissajousOutput"> <div id="T1Slider"></div> <script type="text/javascript"> $(function(){ $('#T1Slider').slider({ change: function(){ var T1 = $(this).slider('option','value') $('#lissajousOutput').attr('src', 'lissajous.php?T1='+T1) } }); }); </script> Link to comment https://forums.phpfreaks.com/topic/278956-lissajous-figure-php/#findComment-1434960 Share on other sites More sharing options...
Adasiax Posted June 9, 2013 Author Share Posted June 9, 2013 Thanks: ) But can you do at least one slider for me? I will see how it works on example and it would be easier for me to do the rest:) Link to comment https://forums.phpfreaks.com/topic/278956-lissajous-figure-php/#findComment-1434964 Share on other sites More sharing options...
Adasiax Posted June 9, 2013 Author Share Posted June 9, 2013 I've got something like this but it's not working <html> <body> <head> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> </head> <script> <?php $(function(){ $('#T1Slider').slider({ change: function(){ var T1 = $(this).slider('option','value') $('#lissajousOutput').attr('src', 'lissajous.php?T1='+T1) } }); }); header ("Content-type: image/png"); ///x = a1 * cos(t/T1); /// y = a2 * sin(t/T2); $Values = $_GET + array( 'T1' => 20 //Default values , 'T2' => 30 //Used if nothing is given ); $T1 = $Values['T1']; $T2 = $Values['T2']; $myImage = @imagecreatetruecolor(640, 480) or die("Cannot Initialize new GD image stream"); $text_color = imagecolorallocate($myImage, 255, 255, 224); $poly_color = imagecolorallocate($myImage, 124, 120, 224); //calculate x-value and y-value point by point $points = array(); for ($i=0; $i<1000; $i=$i+1) { //define curve's function $x = 310*cos($i/$T1); //define x-value $y = 230*sin($i/$T2);//define y-value //move the coordinate, append a point's x-value and y-value $points[] = 320+$x; //x-value $points[] = 240-$y; //y-value } //count points $totalPoints = count($points)/2; //drawing title $title = "Final Plot ($totalPoints points)"; imagestring($myImage, 3, 5, 5, $title, $text_color); /** drawing points one by one, notice if there * are 10 points, we need to draw 9 lines: * 1) point 0 to 1; * 2) point 1 to 2; * ... * ... * 9) point 8 to 9; */ for ($i=0; $i<$totalPoints-1; $i++) { imageLine($myImage, $points[2*$i], $points[1+2*$i], $points[2+2*$i], $points[3+2*$i], $poly_color); } //finalizing imagepng($myImage); imagedestroy($myImage); ?> </script> <img src="lissajous.php" id="lissajousOutput"> <div id="T1Slider"> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/278956-lissajous-figure-php/#findComment-1434968 Share on other sites More sharing options...
kicken Posted June 9, 2013 Share Posted June 9, 2013 Your script to generate the image has to be separate from the one with the HTML and sliders. When you generate an image as output then the only output that script can produce is the image, no HTML or even excess whitespace can be present in the output. Link to comment https://forums.phpfreaks.com/topic/278956-lissajous-figure-php/#findComment-1434997 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.