1. 1 Media Software Design DIG 3134 Fall 2012 Lecture 15: Graphics J. Michael Moshell University of Central Florida Original image* by Moshell et al.

2. -2 - Excerpt from DA Text PHP Graphics The Coordinate System (for our example) x  800 y 600

3. -3 - PHP Graphics Motivation: the RSL Pickup Graph

4. -4 - Excerpt from DA Text PHP Graphics The Coordinate System (for our example) x  0800 y 0 600 600 0 yup = 600-y (so y=600 – yup)

5. -5 - Excerpt from DA Text PHP Graphics: The GD Library http://php.net/manual/en/ref.image.php Basic example: $Imagewidth=800;$Imageheight=600; $image=imagecreate($Imagewidth, $Imageheight); $colorWhite=imagecolorallocate($image, 255, 255, 255); $colorGreen=imagecolorallocate($image, 0, 200, 0); // x1 y1 x2 y2 imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image,'graphout.png'); imagedestroy($image); print ' ';

6. -6 - Excerpt from DA Text PHP Graphics: The GD Library http://php.net/manual/en/ref.image.php Basic example: $Imagewidth=800;$Imageheight=600; $image=imagecreate($Imagewidth, $Imageheight); $colorWhite=imagecolorallocate($image, 255, 255, 255); $colorGreen=imagecolorallocate($image, 0, 200, 0); // x1 y1 x2 y2 imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image,'graphout.png'); imagedestroy($image); print ' '; Do this to force the browser not to cache the png file. If it is cached, you won't see changes... frustrating.

7. -7 - Excerpt from DA Text PHP Graphics: The GD Library http://php.net/manual/en/ref.image.php Basic example: $Imagewidth=800;$Imageheight=600; $image=imagecreate($Imagewidth, $Imageheight); $colorWhite=imagecolorallocate($image, 255, 255, 255); $colorGreen=imagecolorallocate($image, 0, 200, 0); // x1 y1 x2 y2 imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image,'graphout.png'); imagedestroy($image); print ' '; Do this to force the browser not to cache the png file. If it is cached, you won't see changes... frustrating. NOTE: This sometimes sorta works

8. -8 - markbeam.com Project 4: Cowpies Examine the cowpie1 prototype. Behavior Code Examine the Requirements for Project 4

9. -9 - Project 4: Cowpies Requirements BEGIN with a database task: ** remember previous moves and replay them. So we will BEGIN (next week) with a tutorial database example called "address book" to build up your database skills, and also give you some code to steal / merge with cowpie1.php. Let's look at one more graphical issue. Can we write our.png DIRECTLY to browser?

10. -10 - Excerpt from DA Text PHP Graphics: The GD Library http://php.net/manual/en/ref.image.php Basic example: $Imagewidth=800;$Imageheight=600; $image=imagecreate($Imagewidth, $Imageheight); $colorWhite=imagecolorallocate($image, 255, 255, 255); $colorGreen=imagecolorallocate($image, 0, 200, 0); // x1 y1 x2 y2 imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image,'graphout.png'); imagedestroy($image); print ' '; Can we write the image DIRECTLY to the browser, instead of into a file? Docs say we can, so we try it.

11. -11 - Excerpt from DA Text PHP Graphics: The GD Library http://php.net/manual/en/ref.image.php Basic example: $Imagewidth=800;$Imageheight=600; $image=imagecreate($Imagewidth, $Imageheight); $colorWhite=imagecolorallocate($image, 255, 255, 255); $colorGreen=imagecolorallocate($image, 0, 200, 0); // x1 y1 x2 y2 imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image); imagedestroy($image); print ' '; Can we write the image DIRECTLY to the browser, instead of into a file? Docs say we can, so we try it.

12. -12 - GD direct to screen: ?? What's this? Any ideas?

13. -13 - GD direct to screen: ?? What's this? Any ideas? View Source

14. -14 - GD direct to screen: ?? Once you've announced to the browser that HTML is coming, it expects HTML. So what if we tried a different header?

15. -15 - So what if we tried a different header? PHP has a header function. We modify cowpie1.php: function htmlheader() { print " "; } //main program $angle=$_POST['angle'];$velocity=$_POST['velocity']; if (!$angle) htmlheader();//need HTML first time for form else header('Content-type: image/png');

16. -16 - Result: yes, it "works"... but now it's not an HTML form any more, so there are no inputs (controls). It's not interactive. So... we're better off embedding png in html.

17. -17 - FOR THURSDAY: The usual shoot-out model: GET your Group's BEST GAME ready to play! If you need help with Project 3, come SEE ME.