<?xml version="1.0" encoding="UTF-8" standalone="yes"?><oembed><version><![CDATA[1.0]]></version><provider_name><![CDATA[The Osmosian Order of Plain English Programmers Welcomes You]]></provider_name><provider_url><![CDATA[http://osmosianplainenglishprogramming.blog]]></provider_url><author_name><![CDATA[gerryrzeppa]]></author_name><author_url><![CDATA[https://osmosianplainenglishprogramming.blog/author/gerryrzeppa/]]></author_url><title><![CDATA[Plain English Programming — Is a Picture Worth 1000&nbsp;Words?]]></title><type><![CDATA[link]]></type><html><![CDATA[<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
<div class="entry-content">
<p>It’s been said that a picture is worth a thousand words. Let’s find out.</p>
<p>We start with a picture of a famous person. In this case, I chose a photo of the famous athiest Richard Dawkins:</p>
<p><img loading="lazy" class="alignnone size-full wp-image-336128" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/1000-words-screenshot-1a.jpg" alt="" width="770" height="767" /></p>
<p>Then using this type definition…</p>
<p><span style="color:#00ccff;">A block is a thing with a box and a brightness.</span></p>
<p>…and this routine…</p>
<p><span style="color:#00ccff;">To create a list of brightness blocks from a picture:</span><br />
<span style="color:#00ccff;"> Center the picture on the screen.</span><br />
<span style="color:#00ccff;"> Draw the picture.</span><br />
<span style="color:#00ccff;"> Put the picture&#8217;s left-top into a spot.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Allocate memory for a block. Append the block to the list.</span><br />
<span style="color:#00ccff;"> Put the spot and the spot plus 12 pixels into the block&#8217;s box.</span><br />
<span style="color:#00ccff;"> Put the block&#8217;s average brightness into the block&#8217;s brightness.</span><br />
<span style="color:#00ccff;"> Add 12 pixels to the spot&#8217;s left. If the spot&#8217;s left is less than the picture&#8217;s right, repeat.</span><br />
<span style="color:#00ccff;"> Put the picture&#8217;s left into the spot&#8217;s left.</span><br />
<span style="color:#00ccff;"> Add 12 pixels to the spot&#8217;s top. If the spot&#8217;s top is less than the picture&#8217;s bottom, repeat.</span></p>
<p>…I divided the photo into 12 pixel by 12 pixel blocks, calculated the average brightness of each block, and saved the blocks on a list. This is the function-style routine that calculates the average brightness for each block:</p>
<p><span style="color:#00ccff;">To put a block&#8217;s average brightness into a brightness:</span><br />
<span style="color:#00ccff;"> Put the block&#8217;s left-top into a spot.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Get a color given the spot.</span><br />
<span style="color:#00ccff;"> Add the color&#8217;s brightness to a total brightness. Add 1 to a count.</span><br />
<span style="color:#00ccff;"> Add 1 pixel to the spot&#8217;s left. If the spot is in the block&#8217;s box, repeat.</span><br />
<span style="color:#00ccff;"> Put the block&#8217;s left into the spot&#8217;s left.</span><br />
<span style="color:#00ccff;"> Add 1 pixel to the spot&#8217;s top. If the spot is in the block&#8217;s box, repeat.</span><br />
<span style="color:#00ccff;"> Put the total divided by the count into the brightness.</span></p>
<p>At this point, at least in my mind, the photo now looked something like this (imaginary grids in my head are always sky blue):</p>
<p><img loading="lazy" class="alignnone size-full wp-image-336129" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/1000-words-screenshot-3a.jpg" alt="" width="770" height="767" /></p>
<p>Then I picked a bold, monospaced font that had uppercase letters approximately 12 pixels square, and chose an appropriately ironic sentence (with the spaces removed so the resulting picture would have a uniform “texture”). Finally, I drew the sentence over and over, one letter in each block in the shade of gray indicated by the block’s brightness. This is the routine:</p>
<p><span style="color:#00ccff;">To draw a list of brightness blocks given a string and a font:</span><br />
<span style="color:#00ccff;"> Get a letter from the string (wrapping at the end).</span><br />
<span style="color:#00ccff;"> Get a block from the list.</span><br />
<span style="color:#00ccff;"> If the block is nil, break.</span><br />
<span style="color:#00ccff;"> Put 0 and 0 and the block&#8217;s brightness into a color.</span><br />
<span style="color:#00ccff;"> Draw the letter in the center of the block&#8217;s box with the color and the font.</span><br />
<span style="color:#00ccff;"> Repeat.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span></p>
<p>And this is the result I got on the screen:</p>
<p><img loading="lazy" class="alignnone size-full wp-image-336130" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/1000-words-screenshot-4a.jpg" alt="" width="770" height="767" /></p>
<p>The picture is 8 inches square. Plain English uses 96 pixels per inch, and our blocks are 12 pixels square, so there are 64 blocks (or letters) per square inch; 4096 in all. The average length of a word in English is 5 letters, so it looks like, in this case, a picture is only worth about 819 words!</p>
<p>This is the entire program in case you want to type it in yourself and run it using our Plain English development system (www.osmosian.com/cal-4700.zip) with any picture and string of your choice:</p>
<p><span style="color:#00ccff;">A block is a thing with a box and a brightness.</span><br />
<span style="color:#00ccff;"> A list is some blocks.</span></p>
<p><span style="color:#00ccff;">To run:</span><br />
<span style="color:#00ccff;"> Start up.</span><br />
<span style="color:#00ccff;"> Fetch a picture from &#8220;c:\g4g articles\1000 words\dawkins.png&#8221;.</span><br />
<span style="color:#00ccff;"> Create a list of brightness blocks from the picture.</span><br />
<span style="color:#00ccff;"> Clear the screen.</span><br />
<span style="color:#00ccff;"> Put &#8220;courier new bold&#8221; and 1/4 inch into a font.</span><br />
<span style="color:#00ccff;"> Draw the list of brightness blocks </span><span style="color:#00ccff;">using &#8220;INTHEBEGINNINGGODCREATEDTHEHEAVENSANDTHEEARTH&#8221; and the font.</span><br />
<span style="color:#00ccff;"> Wait for the escape key.</span><br />
<span style="color:#00ccff;"> Destroy the picture.</span><br />
<span style="color:#00ccff;"> Destroy the list.</span><br />
<span style="color:#00ccff;"> Shut down.</span></p>
<p><span style="color:#00ccff;">To draw a list of brightness blocks given a string and a font:</span><br />
<span style="color:#00ccff;"> Get a letter from the string (wrapping at the end).</span><br />
<span style="color:#00ccff;"> Get a block from the list.</span><br />
<span style="color:#00ccff;"> If the block is nil, break.</span><br />
<span style="color:#00ccff;"> Put 0 and 0 and the block&#8217;s brightness into a color.</span><br />
<span style="color:#00ccff;"> Draw the letter in the center of the block&#8217;s box with the color and the font.</span><br />
<span style="color:#00ccff;"> Repeat.</span><br />
<span style="color:#00ccff;"> Refresh the screen.</span></p>
<p><span style="color:#00ccff;">The byte pointer is a byte pointer.</span></p>
<p><span style="color:#00ccff;">To get a letter from a string (wrapping at the end):</span><br />
<span style="color:#00ccff;"> If the byte pointer is not nil, add 1 to the byte pointer.</span><br />
<span style="color:#00ccff;"> If the byte pointer is greater than the string&#8217;s last</span><br />
<span style="color:#00ccff;"> put the string&#8217;s first into the byte pointer.</span><br />
<span style="color:#00ccff;"> If the byte pointer is nil, put the string&#8217;s first into the byte pointer.</span><br />
<span style="color:#00ccff;"> Put the byte pointer&#8217;s target into the letter.</span></p>
<p><span style="color:#00ccff;">To draw a letter in the center of a box with a color and a font:</span><br />
<span style="color:#00ccff;"> Put the letter into a string.</span><br />
<span style="color:#00ccff;"> Draw the string in the box with the color and the font and &#8220;center&#8221;.</span></p>
<p><span style="color:#00ccff;">To create a list of brightness blocks from a picture:</span><br />
<span style="color:#00ccff;"> Center the picture on the screen.</span><br />
<span style="color:#00ccff;"> Draw the picture.</span><br />
<span style="color:#00ccff;"> Put the picture&#8217;s left-top into a spot.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Allocate memory for a block. Append the block to the list.</span><br />
<span style="color:#00ccff;"> Put the spot and the spot plus 12 pixels into the block&#8217;s box.</span><br />
<span style="color:#00ccff;"> Put the block&#8217;s average brightness into the block&#8217;s brightness.</span><br />
<span style="color:#00ccff;"> Add 12 pixels to the spot&#8217;s left. If the spot&#8217;s left is less than the picture&#8217;s right, repeat.</span><br />
<span style="color:#00ccff;"> Put the picture&#8217;s left into the spot&#8217;s left.</span><br />
<span style="color:#00ccff;"> Add 12 pixels to the spot&#8217;s top. If the spot&#8217;s top is less than the picture&#8217;s bottom, repeat.</span></p>
<p><span style="color:#00ccff;">To put a block&#8217;s average brightness into a brightness:</span><br />
<span style="color:#00ccff;"> Put the block&#8217;s left-top into a spot.</span><br />
<span style="color:#00ccff;"> Loop.</span><br />
<span style="color:#00ccff;"> Get a color given the spot.</span><br />
<span style="color:#00ccff;"> Add the color&#8217;s brightness to a total brightness. Add 1 to a count.</span><br />
<span style="color:#00ccff;"> Add 1 pixel to the spot&#8217;s left. If the spot is in the block&#8217;s box, repeat.</span><br />
<span style="color:#00ccff;"> Put the block&#8217;s left into the spot&#8217;s left.</span><br />
<span style="color:#00ccff;"> Add 1 pixel to the spot&#8217;s top. If the spot is in the block&#8217;s box, repeat.</span><br />
<span style="color:#00ccff;"> Put the total divided by the count into the brightness.</span></p>
<p><span style="color:#00ccff;">To fetch a picture from a path:</span><br />
<span style="color:#00ccff;"> Read the path into the picture.</span><br />
<span style="color:#00ccff;"> Resize the picture to 8 inches by 8 inches.</span></p>
<p>If you prefer a different language, just think of the above as pseudo-code.</p>
</div>
]]></html><thumbnail_url><![CDATA[https://i0.wp.com/cdncontribute.geeksforgeeks.org/wp-content/uploads/1000-words-screenshot-1a.jpg?fit=440%2C330&ssl=1]]></thumbnail_url><thumbnail_width><![CDATA[331]]></thumbnail_width><thumbnail_height><![CDATA[330]]></thumbnail_height></oembed>