{"id":34801,"date":"2017-12-12T03:01:10","date_gmt":"2017-12-11T17:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34801"},"modified":"2017-12-12T15:44:41","modified_gmt":"2017-12-12T05:44:41","slug":"php-gd-image-at-pixel-level-animation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-animation-tutorial\/","title":{"rendered":"PHP GD Image at Pixel Level Animation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.jpg\" title=\"PHP GD Image at Pixel Level Animation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Animation Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP GD Image at Pixel Level Outputs Tutorial' href='#phpgdiplot'>PHP GD Image at Pixel Level Outputs Tutorial<\/a> was a tilt back to getting the &#8220;hard working duck&#8221; PHP child process more user friendly, and don&#8217;t know if the PHP&#8217;s newfound &#8230;<\/p>\n<blockquote><p>\n&#8220;parent&#8221; &#8220;body&#8221; (<b>or other<\/b>) element background image\n<\/p><\/blockquote>\n<p> &#8230; clang any bells in your head regarding possibilities, but it did for us regarding how to start using that PHP &#8220;child&#8221; iframe functionality in terms of an animation (effectively).  Supposing we &#8220;start&#8221; (and, no doubt &#8220;start&#8221; is just that) with an HTML &#8220;parent&#8221; web application that just consists of &#8230;<\/p>\n<ul>\n<li>table element with one row and three columns for now &#8230; and (a bank of) &#8230;<\/li>\n<li>iframe elements<\/li>\n<\/ul>\n<p> &#8230; respectively providing &#8230;<\/p>\n<ul>\n<li>where to place animation &#8230; and &#8230;<\/li>\n<li>means by which to create the animation<\/li>\n<\/ul>\n<p> &#8230; because when you consider what &#8220;animation&#8221; consists of, we now have the wherewithal to do it in that &#8230;<\/p>\n<ul>\n<li>an &#8220;animation&#8221; is a set of &#8230;\n<ol>\n<li>moving<\/li>\n<li>images<\/li>\n<\/ol>\n<p> &#8230; where &#8230;<\/li>\n<li>the &#8220;moving&#8221; is worked by timed (via Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> method) creation of (table) cellular background<\/li>\n<li>&#8220;images&#8221; pixellated by the &#8220;child&#8221; iframe PHP &#8220;tool&#8221; web application (unchanged from yesterday&#8217;s work)<\/li>\n<\/ul>\n<p> &#8230; moved fast enough to help the human mind recognize it as &#8220;animation&#8221;, whose HTML supervisory &#8220;parent&#8221; code can be downloaded as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.html_GETME\" title=\"build_night_sky.html\">build_night_sky.html<\/a> and tried with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/build_night_sky.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='phpgdiplot'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Outputs Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-outputs-tutorial\/'>PHP GD Image at Pixel Level Outputs Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Outputs Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.png\" title=\"PHP GD Image at Pixel Level Outputs Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Outputs Tutorial<\/p><\/div>\n<p>On a (web application) &#8220;tool&#8221; project, is it the chicken or the egg that drives you?  Sometimes, for us, we jump around.  For us, depending on the nature of the &#8220;tool&#8221; we enjoy trying to &#8230;<\/p>\n<ul>\n<li>make the &#8220;child&#8221; generic &#8230; the &#8220;egg&#8221; above<\/li>\n<li>interface interestingly from the &#8220;parent&#8221; usefully &#8230; the &#8220;chicken&#8221; above<\/li>\n<\/ul>\n<p>You could class yesterday&#8217;s <a href='#pgiaplbt' title='PHP GD Image at Pixel Level Background Tutorial'>PHP GD Image at Pixel Level Background Tutorial<\/a> as a <font size=1>(baark, baark baark baark)<\/font> &#8220;chicken&#8221; moment, enjoying writing a quirky &#8220;parent&#8221; for the &#8220;Image Pixellating&#8221; &#8220;child&#8221; iframe PHP code, even prompting an (important) improvement in its abilities &#8220;opacity&#8221; wise.<\/p>\n<p>Today, though, you may think of it as stepping back to the &#8220;Primer&#8221; tutorial, but to us is sometimes the way projects &#8220;roll&#8221;, in that we think of a whole lot more functionality parts for the &#8220;egg&#8221; (&#8220;child&#8221; iframe PHP image pixellator).  These new functionalities can all be classed as &#8230;<\/p>\n<p><code><br \/>\nforms of output<br \/>\n<\/code><\/p>\n<p> &#8230; changes, where we can envisage &#8220;parent&#8221; web applications that will demand far more flexibility than just offering the &#8220;parent&#8221; yesterday&#8217;s sole &#8220;output&#8221; (mode) option of &#8230;<\/p>\n<p><code><br \/>\nimage data in a \"child\" iframe created via PHP's<br \/>\n<br \/>\nheader('Content-Type: image\/png');<br \/>\nimagepng($gd);<br \/>\n<\/code><\/p>\n<p> &#8230; line of thinking.  With incredibly useful help from <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/8551754\/convert-gd-output-to-base64'>this useful link<\/a>, thanks (which, incidentally, appeared up the top of the list of this <a target=_blank title='Google search' href='https:\/\/www.google.com.au\/search?q=php+gd+image+to+datauri&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=NagsWuq4NIzp8weU-Y_wCw'>Google search<\/a>) we were reminded of how that PHP code lines above could be &#8220;melded&#8221; into &#8230;<\/p>\n<p><code><br \/>\n\/\/ header('Content-Type: image\/png');<br \/>\n<a target=_blank title='PHP ob_start method information' href='http:\/\/php.net\/manual\/en\/function.ob-start.php'>ob_start<\/a>();<br \/>\nimagepng($gd);<br \/>\n$image_data = <a target=_blank title='PHP ob_get_contents method information' href='http:\/\/php.net\/manual\/en\/function.ob-get-contents.php'>ob_get_contents<\/a>();<br \/>\n<a target=_blank title='PHP ob_end_clean method information' href='http:\/\/php.net\/manual\/en\/function.ob-end-clean.php'>ob_end_clean<\/a>();<br \/>\n$image_data_base64 = base64_encode($image_data);<br \/>\n<\/code><\/p>\n<p> &#8230; to end up with, in the PHP var<font size=1>iable<\/font> $image_data_base64 above a <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>dataURI<\/a> of the image pixellated by our (&#8220;child&#8221; iframe supervised, perhaps) PHP web application, and opening the door to all manner of (additional &#8220;output&#8221; driven) interfacing (or standalone) possibilities like &#8230;<\/p>\n<ul>\n<li>&#8220;standalone&#8221; &#8220;image&#8221; data presented in an HTML <a target=_blank title='HTML img tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> element, as in &#8230;<br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=image&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;standalone&#8221; &#8220;div&#8221; image data encased in an HTML <a target=_blank title='HTML div tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> element, as in &#8230;<br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=div&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;standalone&#8221; &#8220;canvas&#8221; image data placed into in an HTML <a target=_blank title='HTML canvas tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_canvas.asp'>canvas<\/a> element, as in &#8230;<br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;standalone&#8221; &#8220;body&#8221; element background image<\/li>\n<li><span style='border:2px solid orange;'>&#8220;parent&#8221; &#8220;image&#8221;<\/span> data presented in an HTML <a target=_blank title='HTML img tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> element, as in &#8230;<br \/>\n<img style='border:2px solid orange;' id=pimg src='' style='height:600px;width:590px;'><\/img><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=imagepimg&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=imagepimg&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='display:none;width:590px;height:610px;'><\/iframe>\n<\/li>\n<li><span style='border:2px solid orange;'>&#8220;parent&#8221; &#8220;div&#8221;<\/span> image data encased in an HTML <a target=_blank title='HTML div tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> element, as in &#8230;\n<div style='border:2px solid orange;height:600px;width:590px;' id=pdiv><\/div>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=divpdiv&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=divpdiv&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='display:none;width:590px;height:610px;'><\/iframe>\n<\/li>\n<li><span style='border:2px solid orange;'>&#8220;parent&#8221; &#8220;canvas&#8221;<\/span> image data placed into in an HTML <a target=_blank title='HTML canvas tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_canvas.asp'>canvas<\/a> element, as in &#8230;<br \/>\n<canvas style='border:2px solid orange;height:600px;width:590px;' id=pcanvas height=600 width=590><\/canvas><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvaspcanvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvaspcanvas&#038;height=600&#038;width=590&#038;size=8&#038;zeroes=2' style='display:none;width:590px;height:610px;'><\/iframe>\n<\/li>\n<li>&#8220;parent&#8221; &#8220;body&#8221; (or other) element background image<\/li>\n<\/ul>\n<p>You can try this for yourself at this &#8220;child&#8221; &#8220;standalone&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?mode=canvas\" title='Click picture (in canvas output mode)'>live run<\/a> link for the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php--GETME\" title=\"pixellate.php\">pixellate.php<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php--GETME\" title=\"pixellate.php\">this way<\/a> for today&#8217;s extended &#8220;output&#8221; choices.<\/p>\n<hr>\n<p id='pgiaplbt'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Background Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-background-tutorial\/'>PHP GD Image at Pixel Level Background Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Background Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.gif\" title=\"PHP GD Image at Pixel Level Background Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Background Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP GD Image at Pixel Level Primer Tutorial' href='#phpgdiplpt'>PHP GD Image at Pixel Level Primer Tutorial<\/a> had us musing &#8230;.<\/p>\n<blockquote><p>\nDo you feel this web application has the genericity to be a &#8220;tool&#8221;?  Spoiler alert &#8230; we think so.\n<\/p><\/blockquote>\n<p> &#8230; and so here we are, today, with the first idea regarding using that PHP code as a &#8220;tool&#8221;, a &#8220;background image iframe&#8221; tool, using two (of the usual &#8220;three amigos&#8221;, <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a> having gone walkabout due to &#8220;relevance deprivation syndrome&#8221;, today) of our usual <a target=_blank title='Overlay tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> suspects &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property (teamed with top:0px and left:0px)<\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p>We encase yesterday&#8217;s PHP work into an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8220;child&#8221; element, and rather than relying on the &#8220;parent&#8221; supervisory (and new) HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.html_GETME\" title=\"pixellate.html\">pixellate.html<\/a> to control <i>opacity<\/i> via the opacity of the HTML iframe element (which we may still allow for &#8230; we&#8217;ll see) we opt to make the &#8220;child&#8221; HTML iframe PHP be that little more flexible by allowing for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php-GETME\" title=\"pixellate.php\">pixellate.php<\/a> change in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php-GETME\" title=\"pixellate.php\">this way<\/a> to allow for a tailored calling mechanism regarding &#8220;opacity&#8221; via &#8230;<\/p>\n<ul>\n<li><strike><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolorallocate.php'>imagecolorallocate<\/a><\/strike> <a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolorallocatealpha.php'>imagecolorallocatealpha<\/a>&#8216;s fifth &#8220;alpha&#8221; (ie. 127=transparent, 0=opaque) parameter<\/li>\n<\/ul>\n<p> &#8230; that is user controllable via &#8220;&#038;opacity=1.0&#8221; type of URL bit where (1.0=opaque, 0.0=transparent) usage.<\/p>\n<p>The parent&#8217;s job using this PHP &#8220;child&#8221; would be to set some transparency to an HTML &#8220;iframe&#8221; call of the PHP to cover the window, where we call into play the Javascript window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> method to resize the PHP &#8220;child&#8221; to full window dimensions, on the proviso that any parameters the user uses to call the &#8220;parent&#8221; HTML don&#8217;t override this &#8220;default&#8221; <i>width<\/i> and <i>height<\/i> of background image (ie. PHP &#8220;child&#8221; iframe) settings.<\/p>\n<p>Guess the other job of the &#8220;parent&#8221; is to &#8220;mean&#8221; something, and so we write some content on the &#8220;theme&#8221; of &#8220;Lyrics of Songs about Stars&#8221; because the background image effects you get with the &#8220;pixellated&#8221; PHP GD calls remind us of the nighttime sky, and stars, and you can see this in action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='phpgdiplpt'>Previous relevant <a target=_blank title='PHP GD Image at Pixel Level Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-primer-tutorial\/'>PHP GD Image at Pixel Level Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP GD Image at Pixel Level Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.jpg\" title=\"PHP GD Image at Pixel Level Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">PHP GD Image at Pixel Level Primer Tutorial<\/p><\/div>\n<p>A great place to start learning about the serverside language PHP is to read the webpage <a target=_blank title='PHP GD Image library information' href='http:\/\/php.net\/manual\/en\/book.image.php'>Image Processing and GD<\/a> because PHP is great in so many ways regarding image creation and manipulation.<\/p>\n<p>The GD methods (down to the pixel level, with the first one) we use are &#8230;<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagesetpixel.php'>imagesetpixel<\/a><\/li>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecreatetruecolor.php'>imagecreatetruecolor<\/a><\/li>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolorallocate.php'>imagecolorallocate<\/a><\/li>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagepng.php'>imagepng<\/a><\/li>\n<\/ul>\n<p>What we parameterize is &#8230;<\/p>\n<ul>\n<li>width of image<\/li>\n<li>height of image<\/li>\n<li>density of pixels created<\/li>\n<li>size of conglomeration of pixel (rectangular &#8220;blob&#8221;)<\/li>\n<\/ul>\n<p>Today&#8217;s PHP code you can download via this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php_GETME\" title=\"pixellate.php\">pixellate.php<\/a> link and try it via this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php\" title=\"Click picture\">live run<\/a> link.  We kind of like some of the images as below &#8230;<\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=6&#038;zeroes=4' style='width:100%;height:610px;'><\/iframe><\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=890&#038;size=8&#038;zeroes=2' style='width:100%;height:610px;'><\/iframe><\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490'>http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490<\/a><br \/>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490' title='http:\/\/www.rjmprogramming.com.au\/PHP\/pixellate.php?height=600&#038;width=490' style='width:100%;height:510px;'><\/iframe><\/p>\n<p>Do you feel this web application has the genericity to be a &#8220;tool&#8221;?  Spoiler alert &#8230; we think so.<\/p>\n<p>You can see this, also, at WordPress 4.1.1&#8217;s <a target=_blank title='PHP GD Image at Pixel Level Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-primer-tutorial\/'>PHP GD Image at Pixel Level Primer Tutorial<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34717' onclick='var dv=document.getElementById(\"d34717\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gd\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34717' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34739' onclick='var dv=document.getElementById(\"d34739\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34739' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34766' onclick='var dv=document.getElementById(\"d34766\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34766' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34801' onclick='var dv=document.getElementById(\"d34801\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34801' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s PHP GD Image at Pixel Level Outputs Tutorial was a tilt back to getting the &#8220;hard working duck&#8221; PHP child process more user friendly, and don&#8217;t know if the PHP&#8217;s newfound &#8230; &#8220;parent&#8221; &#8220;body&#8221; (or other) element background image &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-image-at-pixel-level-animation-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,37],"tags":[84,126,127,184,224,1654,1923,342,1550,1801,513,2258,576,587,590,652,853,876,894,2411,932,1918,997,1126,1319,2257,1827],"class_list":["post-34801","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animation-2","tag-background","tag-background-image","tag-canvas","tag-colour","tag-data-uri","tag-density","tag-div","tag-gd","tag-getcomputedstyle","tag-google","tag-height","tag-html","tag-iframe","tag-image","tag-javascript","tag-ob_start","tag-opacity","tag-overlay","tag-parent","tag-php","tag-pixel","tag-programming","tag-settimeout","tag-tutorial","tag-width","tag-window-getcomputedstyle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34801"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=34801"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34801\/revisions"}],"predecessor-version":[{"id":34828,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34801\/revisions\/34828"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}