Lissajous figure PHP

Adasiax · 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);
?>

Edited June 9, 2013 by Adasiax

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

Adasiax · 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:)

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

kicken · 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.

Sign In

Lissajous figure PHP

Recommended Posts

Adasiax

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

Adasiax

Link to comment

Share on other sites

Adasiax

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information