Post on 07-Feb-2016
description
1
Media Software Design
DIG 3134Fall 2012
Lecture 15: Graphics
J. Michael MoshellUniversity of Central Florida
Original image* by Moshell et al .
-2 -Excerpt from DA Text
PHP GraphicsThe Coordinate System (for our example)
x 800
y
600
-3 -
PHP GraphicsMotivation: the RSL Pickup Graph
-4 -Excerpt from DA Text
PHP GraphicsThe Coordinate System (for our example)
x 0 800y 0 600
600 0 yup = 600-y (so y=600 – yup)
-5 -Excerpt from DA Text
PHP Graphics: The GD Libraryhttp://php.net/manual/en/ref.image.phpBasic example:$Imagewidth=800;$Imageheight=600;$image=imagecreate($Imagewidth, $Imageheight);$colorWhite=imagecolorallocate($image, 255, 255, 255);$colorGreen=imagecolorallocate($image, 0, 200, 0);
// x1 y1 x2 y2imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image,'graphout.png');imagedestroy($image);print '<img src="graphout.png?lastmod=1">';
-6 -Excerpt from DA Text
PHP Graphics: The GD Libraryhttp://php.net/manual/en/ref.image.phpBasic example:$Imagewidth=800;$Imageheight=600;$image=imagecreate($Imagewidth, $Imageheight);$colorWhite=imagecolorallocate($image, 255, 255, 255);$colorGreen=imagecolorallocate($image, 0, 200, 0);
// x1 y1 x2 y2imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image,'graphout.png');imagedestroy($image);print '<img src="graphout.png?lastmod=1">';
Do this to forcethe browser not to cache
the png file.If it is cached, you
won't see changes ... frustrating.
-7 -Excerpt from DA Text
PHP Graphics: The GD Libraryhttp://php.net/manual/en/ref.image.phpBasic example:$Imagewidth=800;$Imageheight=600;$image=imagecreate($Imagewidth, $Imageheight);$colorWhite=imagecolorallocate($image, 255, 255, 255);$colorGreen=imagecolorallocate($image, 0, 200, 0);
// x1 y1 x2 y2imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image,'graphout.png');imagedestroy($image);print '<img src="graphout.png?lastmod=1">';
Do this to forcethe browser not to cache
the png file.If it is cached, you
won't see changes ... frustrating.NOTE: This sometimes
sorta works
-8 -
markbeam.com
Project 4: Cowpies
Examine the cowpie1 prototype.
BehaviorCode
Examine the Requirements for Project 4
-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 examplecalled "address book" to build up your database skills, andalso 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 -Excerpt from DA Text
PHP Graphics: The GD LibraryCan we write the
image DIRECTLY tothe browser, instead ofinto a file? Docs saywe can, so we try it.
-11 -Excerpt from DA Text
PHP Graphics: The GD Libraryhttp://php.net/manual/en/ref.image.phpBasic example:$Imagewidth=800;$Imageheight=600;$image=imagecreate($Imagewidth, $Imageheight);$colorWhite=imagecolorallocate($image, 255, 255, 255);$colorGreen=imagecolorallocate($image, 0, 200, 0);
// x1 y1 x2 y2imageline($image, 300, 200, 300,550, $coloGreen); imagepng($image);imagedestroy($image);print '<img src="graphout.png?lastmod=1">';
Can we write theimage DIRECTLY tothe browser, instead ofinto a file? Docs saywe can, so we try it.
-12 -
GD direct to screen: ??
What's this?Any ideas?
-13 -
GD direct to screen: ??
What's this?Any ideas?
View Source
-14 -
GD direct to screen: ??
Once you've announced to the browser that HTML iscoming, it expects HTML.
So what if we tried a different header?
-15 -
So what if we tried a different header?PHP has a header function. We modify cowpie1.php:
function htmlheader(){
print "<html><body><form method='post'>";}//main program$angle=$_POST['angle']; $velocity=$_POST['velocity'];if (!$angle)
htmlheader(); //need HTML first time for formelse
header('Content-type: image/png');
-16 -
Result: yes, it "works" ... but now it's not an HTML formany more, so there are no inputs (controls). It's not interactive.
So ... we're better off embedding png in html.
-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.