- Doctor Who Strax Quote Image Generator
- 22 Mar 2015 11:30:01 am
- Last edited by Alex on 01 Apr 2015 06:47:11 pm; edited 1 time in total
Forum member tifreak created an awesome program, The Potato One, for the TI-84+CSE that randomly generates a quote from the infamous Doctor Who Character, Strax. Strax is known to offer outlandish battle advice and calls all women "boy." It was when I saw tifreaks program that I remembered a while back where one of our members had a random fake fact about a celebrity that changed each time the page was loaded. I decided to replicate this idea for Strax.
I created this in PHP because it's the language I know and am familiar with. I started out googling functions and settled on imagecreatetruecolor(). This allowed me to create an image by defining the width and height. The image created was always black so I had to use the function imagefilledrectangle() to create a white background. After creating the canvas, per say, that the text would go on it was time to layer the text to the background I had created. I used imagettftext(), gave X and Y coords on where to put the text, the text to use and other variables. The generated string was now on my image but it didn't always fit.
So, I had to either make the image long enough to hold the longest possible combination - which is "An traditional Sontaran bombardment with energy-drink-fuelled reporposed cybermats and a memory worm for afterwards." - or somehow create the image background to the length I need every time. I opted to adjust the length every time. I used imagettfbox() to get the length, in pixels, of the text before creating the background. I used the length part of the returned array to set the length for imagecreatetruecolor(). I found an image of Strax online, cropped it to a 75 pixel square and went about prefixing the photo to the generated image.
I used imagecreatefromjpeg() to load the photo into memory so it can be saved to the generated image. I then pushed the values of my text and background by 75 pixels - essentially if the text was 400 pixels wide the canvas was 475 pixels and if my text started at the 5th pixel in, it now starts at the 80th. - and used imagecopymerge() to place the photo of Strax on the left hand side. The result was great but could be much better.
I set out to create a PNG version but just couldn't get it down. The transparency in the PNG images were always black and no matter what tutorial I looked up I couldn't get it to go away. So I settled on JPEG again. I created a composite background so the generated image wasn't just a white box and put the text on top. I was able to remove imagecreatetruecolor() and imgagefilledrectangle() from my code. Since the background was a bit dark I needed to add a stroke around it, I found a wonderful function online and used it. A little bit of tweaking later and I had my final image.
Now, to go over what I already knew how to do: Generating the string to use for the image.
I thought about using a MySQL database but decided against it for a few reasons. I wanted the code to be portable and simple. So, I set up each section of the quote as an array. As follows:
Code:
I then needed to pick a random number between 0 and the length of the array. When I first did this I got an occasional error. Being that my random number is between 0 and Y, where Y will be 12. Essentially I had 13 numbers to choose from but the array only count up to 11. Why? Well, 0 is the first element of the array and 11 is the last, but when it's counted the total is 12. So a simple -1 at the end of the count was all I needed:
Code:
Once I had part 2 picked, I had to figure out if the word started with a vowel. I used a simple regular expression to determine that and save "a" or "an" to the $one variable. Now, Parts 5 and 6 both have the same word, acid, as a selectable option. So to eliminate a double word, I added a simple while loop around the whole thing, while($six != $five) {}. So I didn't get an undefined variable error, I simply had to define $six at the start of the document. Saving the results to a string was as simple as $string = "Might I suggest $one $two $three $four $five $six $seven $eight."; I've modified that a bit, created three strings, so that I can fit the result into the limited space I have for the image, since I don't adjust the width based on the result here.
The rest is where the image functions take over. Take a look at the source! Some behind the scenes work allows me to point the strax.jpg to strax.php via the .htaccess file. which is simply:
Code:
Feel free to use this in your signatures and I'd also love to see what you guys can adapt this code into. Make your own random quote image generator and share your results!
I created this in PHP because it's the language I know and am familiar with. I started out googling functions and settled on imagecreatetruecolor(). This allowed me to create an image by defining the width and height. The image created was always black so I had to use the function imagefilledrectangle() to create a white background. After creating the canvas, per say, that the text would go on it was time to layer the text to the background I had created. I used imagettftext(), gave X and Y coords on where to put the text, the text to use and other variables. The generated string was now on my image but it didn't always fit.
So, I had to either make the image long enough to hold the longest possible combination - which is "An traditional Sontaran bombardment with energy-drink-fuelled reporposed cybermats and a memory worm for afterwards." - or somehow create the image background to the length I need every time. I opted to adjust the length every time. I used imagettfbox() to get the length, in pixels, of the text before creating the background. I used the length part of the returned array to set the length for imagecreatetruecolor(). I found an image of Strax online, cropped it to a 75 pixel square and went about prefixing the photo to the generated image.
I used imagecreatefromjpeg() to load the photo into memory so it can be saved to the generated image. I then pushed the values of my text and background by 75 pixels - essentially if the text was 400 pixels wide the canvas was 475 pixels and if my text started at the 5th pixel in, it now starts at the 80th. - and used imagecopymerge() to place the photo of Strax on the left hand side. The result was great but could be much better.
I set out to create a PNG version but just couldn't get it down. The transparency in the PNG images were always black and no matter what tutorial I looked up I couldn't get it to go away. So I settled on JPEG again. I created a composite background so the generated image wasn't just a white box and put the text on top. I was able to remove imagecreatetruecolor() and imgagefilledrectangle() from my code. Since the background was a bit dark I needed to add a stroke around it, I found a wonderful function online and used it. A little bit of tweaking later and I had my final image.
Now, to go over what I already knew how to do: Generating the string to use for the image.
I thought about using a MySQL database but decided against it for a few reasons. I wanted the code to be portable and simple. So, I set up each section of the quote as an array. As follows:
Code:
## Begin part 2
$part2 = array(
"full-frontal",
"pincer",
"surprise",
"brutally excessive",
"suicide",
"multi-pronged",
"glorious",
"acid-heavy",
"immediate",
"violent",
"traditional Sontaran",
"devasting");
I then needed to pick a random number between 0 and the length of the array. When I first did this I got an occasional error. Being that my random number is between 0 and Y, where Y will be 12. Essentially I had 13 numbers to choose from but the array only count up to 11. Why? Well, 0 is the first element of the array and 11 is the last, but when it's counted the total is 12. So a simple -1 at the end of the count was all I needed:
Code:
$select = rand(0,(count($part2)-1));
$two = $part2[$select];
Once I had part 2 picked, I had to figure out if the word started with a vowel. I used a simple regular expression to determine that and save "a" or "an" to the $one variable. Now, Parts 5 and 6 both have the same word, acid, as a selectable option. So to eliminate a double word, I added a simple while loop around the whole thing, while($six != $five) {}. So I didn't get an undefined variable error, I simply had to define $six at the start of the document. Saving the results to a string was as simple as $string = "Might I suggest $one $two $three $four $five $six $seven $eight."; I've modified that a bit, created three strings, so that I can fit the result into the limited space I have for the image, since I don't adjust the width based on the result here.
The rest is where the image functions take over. Take a look at the source! Some behind the scenes work allows me to point the strax.jpg to strax.php via the .htaccess file. which is simply:
Code:
RewriteRule ^strax.jpg$ /path/to/strax.php [L]
Feel free to use this in your signatures and I'd also love to see what you guys can adapt this code into. Make your own random quote image generator and share your results!