tag:blogger.com,1999:blog-308390092024-03-05T06:28:15.205-08:00PolygonCrazeThis blog is devoted to patterns made with polygons. I'll try to have something interesting posted regularly.Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.comBlogger167125tag:blogger.com,1999:blog-30839009.post-61257403113991985822022-01-13T07:07:00.003-08:002022-01-13T08:10:30.369-08:00D3 playing with data<p>Here's my take on <span class="TextRun SCXW237291356 BCX0" data-contrast="none" face="Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; font-size: 11pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 19.425px; margin: 0px; padding: 0px; user-select: text; white-space: pre-wrap;" xml:lang="EN-US"><span class="NormalTextRun SCXW237291356 BCX0" data-ccp-parastyle="heading 1" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; margin: 0px; padding: 0px; user-select: text;"><a href="https://en.wikipedia.org/wiki/G%C3%B6del,_Escher,_Bach" target="_blank">Gödel, Escher, Bach</a></span></span><span class="EOP SCXW237291356 BCX0" data-ccp-props="{"201341983":0,"335559738":240,"335559739":0,"335559740":259}" face="Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; font-size: 11pt; line-height: 19.425px; margin: 0px; padding: 0px; user-select: text; white-space: pre-wrap;"> cover in an attempt to start my new class, </span><span face="WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif" style="-webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-stroke-color: rgb(0, 0, 0); caret-color: rgb(0, 0, 0); font-size: 14.6667px; font-style: italic; font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual; white-space: pre-wrap;">DATA ANALYTICS: PRINCIPLES & TOOLS. </span></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiY5mfec3PJeVtd1kw0eJkEqk9LwQHOdi9pezMoociKgMaE45s4CdzRKZty8XbTsV0YdXJHLQKycuw-g6Nm99kVicYBbxaA6RVT2WxxfSTVXDztBLl3lUjApTrUJLsbF8pKNqyAl8yqHPM-iS_L63IK76aG7BKofzzSwlw8zVLX8cH22yrIlA=s1861" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="684" data-original-width="1861" height="118" src="https://blogger.googleusercontent.com/img/a/AVvXsEiY5mfec3PJeVtd1kw0eJkEqk9LwQHOdi9pezMoociKgMaE45s4CdzRKZty8XbTsV0YdXJHLQKycuw-g6Nm99kVicYBbxaA6RVT2WxxfSTVXDztBLl3lUjApTrUJLsbF8pKNqyAl8yqHPM-iS_L63IK76aG7BKofzzSwlw8zVLX8cH22yrIlA=s320" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjbv04AmZJoJ9lAqjIQrrEjwk_ZhOKFRsBPfggO2n4XJoEr1X6wX8EwZFv5FGyW0kkJdn44r2YgPddrAaCxZzGXKr3-ka_PQzB8z4B1fdR-RKmjcS4soH7Y-zmzX7obx9vG6Laht8ZNKcO34olGKEuoMeblLs_iKsDSOb1gnE-fwHTGnXjqaw=s1801" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="640" data-original-width="1801" height="114" src="https://blogger.googleusercontent.com/img/a/AVvXsEjbv04AmZJoJ9lAqjIQrrEjwk_ZhOKFRsBPfggO2n4XJoEr1X6wX8EwZFv5FGyW0kkJdn44r2YgPddrAaCxZzGXKr3-ka_PQzB8z4B1fdR-RKmjcS4soH7Y-zmzX7obx9vG6Laht8ZNKcO34olGKEuoMeblLs_iKsDSOb1gnE-fwHTGnXjqaw=s320" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg3zN_Af9kK5pE0ALc6tWkOuZmQr_JxQAigYdtoJ3pxTamuCnLBI2iYZxQxxqlrsZ7AO8Acw9D-KXkvHTPI2SVBzKTlVf7hAcd5YG1JLfxK2IEcmj7IDCugnxIdRRlAfOEBYpcNnYgdTMpe5f_AOCU6INT55h-XcWqiz4a_WnievF8dF4XPUw=s625" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="619" data-original-width="625" height="119" src="https://blogger.googleusercontent.com/img/a/AVvXsEg3zN_Af9kK5pE0ALc6tWkOuZmQr_JxQAigYdtoJ3pxTamuCnLBI2iYZxQxxqlrsZ7AO8Acw9D-KXkvHTPI2SVBzKTlVf7hAcd5YG1JLfxK2IEcmj7IDCugnxIdRRlAfOEBYpcNnYgdTMpe5f_AOCU6INT55h-XcWqiz4a_WnievF8dF4XPUw=w120-h119" width="120" /></a></div>These were generated with <a href="https://publish.uwo.ca/~jmorey2/DataToolit.html" target="_blank">DataToolit</a>. I probably went overboard on using arrow functions in the coding. What I found interesting in writing the code was that interconnected three different projections has some subtlety. I do not understand the constraints on data set, but I was very constrained on my last choice of projection, the y. Perhaps I'll give it some thought later. Also, D3 is not the best choice for 3D but I've recently be playing around with D3 in my course WEB TECHNOLOGIES, so I figured why not. <p></p><p>You may enjoy playing with the javascript. The interface needs work but I doubt I'll get around to fixing it until I have another need for something similar. </p><h3 style="text-align: left;"><span style="font-size: large;">Details</span></h3><div style="text-align: left;">The message I started with was<b> Data-Tool-it</b> but then I shifted more towards <b>Data-Tools-y: </b>partly because I had the missing sections of at least one of the shadows and partly to make an easier message of y which is "WHY do this course"<b>. </b>Constructing the points was simply a task of blanking out blocks that one of the directions had a zero. Enjoy this code constructig the basics blocks. The interface coding with D3 is more involved.</div><div style="text-align: left;"><b> </b></div><div style="text-align: left;"><span style="font-family: courier;">let data =[<br />[1,1,1,1,1,1,0,0,0,0,0,1,0,0,1,1,1,1,1,1,0,0,1,0,0,0],<br />[0,1,1,0,0,1,1,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0],<br />[0,1,1,0,0,0,1,1,0,0,1,0,1,0,0,0,1,1,0,0,0,1,0,1,0,0],<br />[0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,1,1,0,0,1,1,0,1,1,0],<br />[0,1,1,0,0,0,1,1,0,1,1,1,1,1,0,0,1,1,0,0,1,1,1,1,1,0],<br />[0,1,1,0,0,0,1,1,0,1,1,1,1,1,0,0,1,1,0,0,1,1,1,1,1,0],<br />[0,1,1,0,0,1,1,0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,0,1,1],<br />[1,1,1,1,1,1,0,0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,0,1,1]</span></div><div style="text-align: left;"><span style="font-family: courier;">]<br /></span></div><div style="text-align: left;"><span style="font-family: courier;">let tool =[<br />[1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0],<br />[0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0],<br />[0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1],<br />[0,0,0,1,1,0,0,1,1,1,1,0,0,1,1,1,1,0,0,1,1,0,1,0,0,0],<br />[0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1,1,1,0],<br />[0,0,1,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,1,0,0,0,0,1,1],<br />[0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,0,0,0,1,1],<br />[0,1,1,1,0,1,1,1,1,0,0,1,1,1,1,0,0,1,1,0,0,1,1,1,1,0]<br />]</span></div><div style="text-align: left;"><div><span style="font-family: courier;">let it = [</span></div><div><span style="font-family: courier;">[0,1,1,1,1,1,0,1],<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">[1,0,1,1,1,0,1,1],<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">[1,1,0,1,1,0,1,1],<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">[1,1,0,1,0,1,1,1],<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">[1,1,1,0,1,1,1,1],<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">[1,1,1,0,1,1,1,1],<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">[1,1,0,1,1,1,1,1],<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">[1,0,1,1,1,1,1,1]<span style="white-space: pre;"> </span></span></div><div><span style="font-family: courier;">]</span></div></div><p style="text-align: left;"></p><div style="text-align: left;"><div><span style="font-family: courier;">let block = </span></div><div><span style="font-family: courier;">Array.from({length:data[0].length},(_,i)=> Array.from({length:data.length},(_,j)=> Array.from({length:tool.length},(_,k)=> data[j][i] * tool[k][i] * it[k][j] )))</span> </div><div><br /></div></div><p style="text-align: left;"><span face="WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif" style="-webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-stroke-color: rgb(0, 0, 0); caret-color: rgb(0, 0, 0); font-size: 14.6667px; font-style: italic; font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual; white-space: pre-wrap;"><br /></span></p>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-23290324161258902772020-03-20T09:52:00.000-07:002020-03-20T09:53:38.019-07:00Content for now<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqP24TWt2-z-vkfp-6OWSteKYkMHhS7wNVHZICZ2HAA90X90gqSWxKyPUNiVYHe0XzAlDclvW6GBXtV8rh-ZGsGGACz-miGhibGtXzH0fEPQD432nJ9f97nzE312Bo0FnEIDE/s1600/Screenshot+2020-03-20+at+12.51.25.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="381" data-original-width="382" height="319" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqP24TWt2-z-vkfp-6OWSteKYkMHhS7wNVHZICZ2HAA90X90gqSWxKyPUNiVYHe0XzAlDclvW6GBXtV8rh-ZGsGGACz-miGhibGtXzH0fEPQD432nJ9f97nzE312Bo0FnEIDE/s320/Screenshot+2020-03-20+at+12.51.25.png" width="320" /></a>I'm going to fiddle with this later. The code is not that ugly. Aside from JQuery and math.js, it's under 200 lines of source half of which is Javascript. It still needs commenting but I'm off to 3D land to start working of a <i>tree </i>version of <a href="https://jimmorey.com/js/FibBox.html" target="_blank">FibBox</a> which is already a bit mind warping. Here's the latest version of the <a href="https://jimmorey.com/js/FibSimplerHov.html" target="_blank">Fibonnaci trees</a>.<br />
<br /></div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-77609477799359877942020-03-17T08:25:00.001-07:002020-03-17T08:25:22.400-07:00Solved but still plugging<div dir="ltr" style="text-align: left;" trbidi="on">
The issue was easier than I thought. It was the 45 degree rotation which I wanted to better emphasize the treeness of the structure.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVC3KdxOyCvZ5eIbtZ_iIJSo22RvBXOpSM-LdPSS44cYd8WEmAViBXx41iWtprRgkCHGOt58ZcFzishphL9OblNDb1Ss72OdPpIBfbQcF0uBNaK1ZxTeBeD2uCzGhCNNteetZD/s1600/Screenshot+2020-03-17+at+11.10.58.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="534" data-original-width="535" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVC3KdxOyCvZ5eIbtZ_iIJSo22RvBXOpSM-LdPSS44cYd8WEmAViBXx41iWtprRgkCHGOt58ZcFzishphL9OblNDb1Ss72OdPpIBfbQcF0uBNaK1ZxTeBeD2uCzGhCNNteetZD/s400/Screenshot+2020-03-17+at+11.10.58.png" width="400" /></a></div>
This has none of the unexpected lines. I'm still not loving some of the boundary colour meshing but these are just choices which I can now put some time to improve on.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh4SpL8vq7CFgjIjkxXPzR46ig-n1L_IhnBp4tdvu2O7lXEImIMk3-N7k5_TJ77XUkSnWHEWi3iMhGtrcgtbTkLXI48jgVsIqwYBzJtffgWcRZh9gDgQXTuJhKMAfrRYMo4EtD/s1600/Screenshot+2020-03-17+at+11.18.19.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="383" data-original-width="382" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh4SpL8vq7CFgjIjkxXPzR46ig-n1L_IhnBp4tdvu2O7lXEImIMk3-N7k5_TJ77XUkSnWHEWi3iMhGtrcgtbTkLXI48jgVsIqwYBzJtffgWcRZh9gDgQXTuJhKMAfrRYMo4EtD/s320/Screenshot+2020-03-17+at+11.18.19.png" width="319" /></a></div>
<a href="https://jimmorey.com/js/FibSimpleHov.html" target="_blank">This update</a> has some hoving CSS that allows you to see the Fibonacci connections of the pieces. So you can take a look at what is going on before I complete the version that may work as a decent teaching example for coding. Here is an example of seeing that that <b style="font-style: italic;">div </b>has a width of 144 and a height of 89 which are both Fibonacci numbers.</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-63730598545326809672020-03-04T17:42:00.000-08:002020-03-05T05:19:11.943-08:00Still plugging...<div dir="ltr" style="text-align: left;" trbidi="on">
This is close but not quite ready for prime time....<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Dt4cgD4MYvUqJ8K3aklw9qSQnG2lz5NuNmGt7SZu50433eeuq6c_Uro4oHYSZ7MFzFtAl8Rma5RkpPDifOzhL_Orv3HhEUczvTkbeJ6iDZfg0DYEWqnhtVPRuTTxU-TdDzq9/s1600/Screenshot+2020-03-04+at+20.10.02.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1162" data-original-width="1184" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Dt4cgD4MYvUqJ8K3aklw9qSQnG2lz5NuNmGt7SZu50433eeuq6c_Uro4oHYSZ7MFzFtAl8Rma5RkpPDifOzhL_Orv3HhEUczvTkbeJ6iDZfg0DYEWqnhtVPRuTTxU-TdDzq9/s400/Screenshot+2020-03-04+at+20.10.02.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">A collection of Fibonacci Trees</td></tr>
</tbody></table>
Although I've never heard of Fibonacci Trees, it seems like a reasonable name for this since it is made up of Fibonacci spirals. It's created with a bunch rectangles with integer coordinates that are Fibonacci numbers. I thought that I could easily use border-top-left radius:100% and conic-gradients... It's some finicky code that seems to produce a bunch of artifacts that I can't get rid of... Currently, the <a href="https://jimmorey.com/js/FibSimple.html" target="_blank">rough draft</a> of the code needs a lot of polish but I feel there is no point streamlining it until it can produce what I want without the artifacts.... I could fix a few of the colour issues that occur in the upper tree not nicely meshing but since the other problems can't be fixed I'll leave it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HUxSPe6KxlJf0EvsIOamqDA_2Zmwf0sw3AwTpjtVF0cPmiIB-H4l8XGBNY1GpA_HGR8BASLaBpQyEs-x8Gy61kSSbwYZoy6Uwf8_GWbbiePU4ndvhfYB97jLfdlsmXxbWCtk/s1600/Screenshot+2020-03-05+at+08.16.32.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="957" data-original-width="964" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HUxSPe6KxlJf0EvsIOamqDA_2Zmwf0sw3AwTpjtVF0cPmiIB-H4l8XGBNY1GpA_HGR8BASLaBpQyEs-x8Gy61kSSbwYZoy6Uwf8_GWbbiePU4ndvhfYB97jLfdlsmXxbWCtk/s320/Screenshot+2020-03-05+at+08.16.32.png" width="320" /></a></div>
<br />
There seems to be no issues with the sizes and placements so the artifacts are related to the conic-gradient and perhaps a browser thing... There is a better way to colour but not one that will be easy least using CSS. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOUnqgNP7qQaxpBsJZHKgQnM8uhBT9DEjxwjbs4_O1lbd2k5s_mKY2ULykYPNkt5LIyJ55QVY2Hu9EjNkJWMbcxmxYVNIe61nuvySksfaFZX5CITsACQ3NH3Jo6oPxgHPGIhKo/s1600/Screenshot+2020-03-05+at+07.05.09.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="974" data-original-width="1010" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOUnqgNP7qQaxpBsJZHKgQnM8uhBT9DEjxwjbs4_O1lbd2k5s_mKY2ULykYPNkt5LIyJ55QVY2Hu9EjNkJWMbcxmxYVNIe61nuvySksfaFZX5CITsACQ3NH3Jo6oPxgHPGIhKo/s320/Screenshot+2020-03-05+at+07.05.09.png" width="320" /></a></div>
Perhaps the 3D version of this tree will be more interesting and will fall together better.<br />
<div>
<br />
<div>
<br /></div>
</div>
</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-54459619318206459702020-02-23T12:35:00.003-08:002020-02-23T12:35:41.771-08:00Back to JQuery...<div dir="ltr" style="text-align: left;" trbidi="on">
I got beaten by CORS (cross-origin resource sharing). To really show the utility of using <i>div</i>s to construct fractals I wanted to use images. Being a lazy sort and less interested in picking the best set of images, I decided to use an somewhat arbitrary collection of images from a site like Flickr. And Boom I had a CORS issue. The cross-origin issue is not easy to solve without a library--a pure Javascript solution was far from pretty, intuitive, or readily available. I ended up retreating back to JQuery. Here's a what I ended up with:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cuHc8E3Yi5lo4M6zAGWcxCcQsILTKxK16GmuI8KpX32YKZMVW9NLS_GGJkzbazSjZk0REokwTS1xvzV4biQq8Zwxe4OZ88y-av8TkQIfVIsjYEpltuqzukeQ_WWvKlHSCXRA/s1600/Screenshot+2020-02-23+at+15.15.02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1074" data-original-width="1073" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cuHc8E3Yi5lo4M6zAGWcxCcQsILTKxK16GmuI8KpX32YKZMVW9NLS_GGJkzbazSjZk0REokwTS1xvzV4biQq8Zwxe4OZ88y-av8TkQIfVIsjYEpltuqzukeQ_WWvKlHSCXRA/s400/Screenshot+2020-02-23+at+15.15.02.png" width="398" /></a></div>
<br />
You can find <a href="https://jimmorey.com/js/Photopinski.html" target="_blank">this code</a> on my dumping site (<a href="https://jimmorey.com/" target="_blank">jimmorey.com</a>) or in this <a href="https://codepen.io/jimmorey/pen/wvaojrR" target="_blank">CodePen</a>. I'm cheating a bit with the image sizes--the Sierpinski carpet's holes aren't quite as big as these images but I wanted to show off the images more than accurately have a fractal. Generally, I've been thinking about using the fractal as more of an information display for images. Perhaps later.<br />
<br />
I'll explore a few more parameter tweaks to see if I can have some more fun with graphics. I may explore some rectangular ones but these were my first two.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG06SGUSvIg8wX3DwDUtwk_WqVT_M8Xn3JNP3Ftjmc4K8qaA2QqWW0xxlbyQQjLDFIEFSbKhPRhD_9aPMbr09LCBS4cZ2h9VDaHq9W4jvQJdKJthFKjkHkJIoC72LhJhVroRfy/s1600/Screenshot+2020-02-23+at+15.15.28.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1062" data-original-width="1066" height="397" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG06SGUSvIg8wX3DwDUtwk_WqVT_M8Xn3JNP3Ftjmc4K8qaA2QqWW0xxlbyQQjLDFIEFSbKhPRhD_9aPMbr09LCBS4cZ2h9VDaHq9W4jvQJdKJthFKjkHkJIoC72LhJhVroRfy/s400/Screenshot+2020-02-23+at+15.15.28.png" width="400" /></a></div>
<br />
These used "cat,cute" to find the Flickr images. Make sure to take a look at the active code--in total, it's under 150 lines. It allows you to hover over images to brighten and in the case of this later triangular one reshape to square images to better see the images. <br />
<br />
I will explore other libraries and photo sites like google photos to see if I can construct a better teaching example but probably I'll let it sit for a bit.</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-5406438130032193822020-02-10T09:13:00.000-08:002020-02-10T09:13:07.385-08:00Sierpinski with divs and CSS<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJqrHIsOzmBVVoqZN2wetFDFv7cTEcZbnXxCLExuQih6Z15FJQ2drEDdGI3cmhC2d1jSwfZ63LKV2Xbew7LDOkPaC46h1y-iMS70OfT0QkztDtL6NCIvTDWi2LnYMS3ZAEtZrD/s1600/Screenshot+2020-02-10+at+12.06.17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="520" data-original-width="607" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJqrHIsOzmBVVoqZN2wetFDFv7cTEcZbnXxCLExuQih6Z15FJQ2drEDdGI3cmhC2d1jSwfZ63LKV2Xbew7LDOkPaC46h1y-iMS70OfT0QkztDtL6NCIvTDWi2LnYMS3ZAEtZrD/s320/Screenshot+2020-02-10+at+12.06.17.png" width="320" /></a></div>
A simple construction with plain Javascript and CSS can be seen <a href="https://jimmorey.com/js/sierp.html" target="_blank">here</a>. It is part of my push to make examples that have a few prerequisites. In this case, ES6 Javascript, CSS, and HTML. I make use of <i><b>div</b></i>s as the main graphical elements. This chunk of code<br />
<pre><code>
function iterate(el){
[[1,1],[1,-1],[-1,1]].forEach(x=> {
let newEl = el.cloneNode();
newEl.style["transform"]=
`scale(0.5)
translate(${x[0]*el.offsetWidth/2}px,
${x[1]*el.offsetHeight/2}px)`;
el.appendChild(newEl);
});
}
</code></pre>
adds three shifted elements, a quarter of the original's size. Each shift is relative to the center of the original, corresponding to all the corners excluding the upper-left corner, which would be the [-1,-1] .<br />
<br />
After thee iterates, there are 27 equally small <i style="font-weight: bold;">div</i>s as seen below and to the left. To get the more attractive triangles on the right, a class, called <i>half</i>, transforms the appearance of the squares into triangles.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY8bySGlLV8QtwRpYQj4Ek6erkYC_wlZNatM0SsfMYORCulpJ2A52Rhjc-LfHjMejAz4Uo2EX1bNxyaATXvmwCat-CL7r-9ZihM28ynctySLIlQce2of0XYfeVuGfBRJ874t9B/s1600/Screenshot+2020-02-10+at+11.38.59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="606" data-original-width="605" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY8bySGlLV8QtwRpYQj4Ek6erkYC_wlZNatM0SsfMYORCulpJ2A52Rhjc-LfHjMejAz4Uo2EX1bNxyaATXvmwCat-CL7r-9ZihM28ynctySLIlQce2of0XYfeVuGfBRJ874t9B/s200/Screenshot+2020-02-10+at+11.38.59.png" width="199" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGHbRkcNJDHkvwIml4Aqt5P589QF68j2u8vmPaToidsIdGpbfC5-SuHD_F_D8FIILUdDIfE4kPc-wDGszq26YDbBRFgxraBT1jQNWLGa-wVX2UXHMhczhPtHP2kDhaAUW-ZfD/s1600/Screenshot+2020-02-10+at+11.41.09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="602" data-original-width="598" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGHbRkcNJDHkvwIml4Aqt5P589QF68j2u8vmPaToidsIdGpbfC5-SuHD_F_D8FIILUdDIfE4kPc-wDGszq26YDbBRFgxraBT1jQNWLGa-wVX2UXHMhczhPtHP2kDhaAUW-ZfD/s200/Screenshot+2020-02-10+at+11.41.09.png" width="198" /></a></div>
<br />
Essentially, the squares are 0x0 <i><b>div</b></i>s with a 100px border where as the triangles are divs with borders described in the CSS below<br />
<pre><code>
<span style="font-size: xx-small;"> .half{ /* the bottom right half of a 0x0 div */
border-bottom:100px solid rgba(0,0,255,0.3);
border-right:100px solid rgba(0,0,255,0.3);
border-left:100px solid transparent;
border-top:100px solid transparent;
}
</span></code></pre>
<div>
<code><span style="font-size: xx-small;"><br /></span></code>
<code><span style="font-size: xx-small;"><br /></span></code>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04jLggYxDkfICNSuziVksVOVImGygpHZlq45gVhxBwJ6rL2QX1Hg99gV7Mi-XSZgJfwFX_GAT9cu5r88lUXNYmU9y03fqkfOP29hV0e4FmnPAVakCGQfMfWR2XBnSIqBKMw3W/s1600/Screenshot+2020-02-10+at+12.12.18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="526" data-original-width="905" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04jLggYxDkfICNSuziVksVOVImGygpHZlq45gVhxBwJ6rL2QX1Hg99gV7Mi-XSZgJfwFX_GAT9cu5r88lUXNYmU9y03fqkfOP29hV0e4FmnPAVakCGQfMfWR2XBnSIqBKMw3W/s320/Screenshot+2020-02-10+at+12.12.18.png" width="320" /></a></div>
<code><span style="font-size: xx-small;"><br /></span></code></div>
A further bit of CSS transforms the outer square into a rhombus which transforms the blue part into an equilateral triangle. The class rhomb below skews the shape putting the vertical lines into a 30 degree lines going to the right and squashes the vertical so that the length of the skewed vertical lines are the same as the horizontal lines. The shift (translate) puts bottom horizontal line approximately where the original was.<br />
<br />
<pre><code> <span style="font-size: xx-small;">.rhomb {
transform:skew(30deg) scale(1,0.866) translate(-58px,0);
}</span>
</code></pre>
<br />
To further show off this <i><b>div</b></i> construction of this pattern, a <i>Button</i> is used to highlight how each <i style="font-weight: bold;">div</i> sits in other <i style="font-weight: bold;">div</i>s. The Button
<br />
<pre><code>
<span style="font-size: xx-small;"> <button onclick="show()">show divs</button>
</span></code></pre>
<br />
On button presses, the <i>highlight</i> class is either added or removed from special divs (div.<i>done</i>).<br />
<pre><code>
<span style="font-size: xx-small;">function show(){ // toggles whether the borders are shown in iterations
let toggle = document.getElementsByClassName("highlight").length > 0;
Array.from(document.getElementsByClassName("done")).forEach(x=>{
if (toggle) x.classList.remove("highlight");
else x.classList.add("highlight");
});
}
</span></code></pre>
<br />
Style can be used to suggest its construction. Above, the stacked shaded backgrounds reveal how many divisions a particular regions is included in. Adding a border to each <i><b>div </b></i>can better show how the construction was achieved.
<br />
<br />
<pre><code><span style="font-size: xx-small;"> .highlight {
border:2px red solid;
background:rgba(220,220,100,0.2);
}</span></code></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Y7Ngfs4ipFwZkaDMZimaM8nguyK4amob8jdPbqVTAASjJuUGwFct4_ZS-Az5gzFQH4xviLPAKViaqb4zgh2meCGxfyC-pANjRSoNOmjp0Z-9s6JyORES0n4xMGBNjTBaEOeK/s1600/sierpWithBord.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="545" data-original-width="929" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Y7Ngfs4ipFwZkaDMZimaM8nguyK4amob8jdPbqVTAASjJuUGwFct4_ZS-Az5gzFQH4xviLPAKViaqb4zgh2meCGxfyC-pANjRSoNOmjp0Z-9s6JyORES0n4xMGBNjTBaEOeK/s400/sierpWithBord.png" width="400" /></a></div>
<br />
This code can be a simplified by a Javascript library or framework with complication of having to something else to learn and potentially having to later switch if something better or more popular comes along.<br />
<br /></div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-48429454286461242202018-02-01T11:20:00.001-08:002018-10-15T10:01:49.436-07:00Weeping willows<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrK9dWY89VUWhuKmWEmBvDjtasDHcqsYkIDJwdKoeE0Hahlk3SJjkncYhNpDPbNaDOLJrMNVu-26DeDqbyyvQlzdbbxVTlF-303eNDBHbM3VfM_ayOn9g_l7rKktOdO8mLJOR9/s1600/Screenshot+2018-02-01+at+12.09.45.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="980" data-original-width="1125" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrK9dWY89VUWhuKmWEmBvDjtasDHcqsYkIDJwdKoeE0Hahlk3SJjkncYhNpDPbNaDOLJrMNVu-26DeDqbyyvQlzdbbxVTlF-303eNDBHbM3VfM_ayOn9g_l7rKktOdO8mLJOR9/s400/Screenshot+2018-02-01+at+12.09.45.png" width="400" /></a></div>
Earlier, I mentioned my visualizations the "<a href="https://jimmorey.com/js/willow.html">Weeping Willow</a>" that depicts the <a href="https://en.m.wikipedia.org/wiki/Collatz_conjecture">hailstone function</a> but I didn't explain it — I'll try to give a quick description now. <br />
In the picture, all of the red numbers are even and are above their halves. The odd black odd numbers are above numbers that are one more than triple their value (if the number is x then they are above 3x + 1). All number sequences starting with a red number can be traced down to 1. For example, if you start at the red number 212 (located directly above the 1) you can trace the sequence:
212 106 53 160 80 40 20 10 5 16 8 4 2 1. Notice how the numbers half until they reach an odd number (53 and 5) when they become one more than their triple. This behaviour sums up the tree aspect of the "willow". The weeping aspect comes from green numbers. Each of the green numbers are multiples of 3 and 2; these numbers are below their halves. So number sequences starting with green numbers can be trace up until they hit black numbers at which point they turn downward and also end up at the number 1. For example, if you start at the green number 288 (located along the left side of the tree) you can trace the sequence:
288 144 72 36 18 9 28 14 7 22 11 34 17 52 26 13 40 20 10 5 16 8 4 2 1. After 9 in the sequence, the sequence of numbers descend in the tree eventually reaching the base of one. The ascending green part forms linear structures which is very unlike the branching structure of the rest of the tree. <br />
Every sequence of numbers in the visualization is rigidly defined by iterating the hailstone function which is simply defined by f(x) = x/2 if it is even or 3x + 1 if it is odd. The question that many people ask is, does every sequence end in 1? In terms of this tree, is every number in this tree? It certainly is an interesting question to which I refer you to the <a href="https://en.m.wikipedia.org/wiki/Collatz_conjecture">link above</a>.<br />
I can't answer many questions about the sequences but I perhaps this visualization can shed some light on the problem. The picture comes from a Javascript tool that uses html's DOM with some added branch-lines provided by a dynamic SVG background. The program can generate any subtree of defined by its base number and a other parameters: start number, maximum number, and tree depth. The one below has 19 as its base (19,20000,200). It also has supplementary map at the bottom that helps show the numbers that are not in the tree: numbers like 27 which have has a particularly long sequence ending in 1 (27 .82 41 .124 62 31 94 47 .142 71 .214 107 .322 161 .484 242 121 364 182 91 274 137 412 206 103 310 155 466 233 .700 350 175 526 263 .790 395 .1186 593 .1780 890 445 1336 668 334 167 502 251 754 377 1132 566 283 850 425 1276 638 319 958 479 1438 719 .2158 1079 .3238 1619 .4858 2429 .7288 3644 1822 911 2734 1367 4102 2051 6154 3077 .9232 4616 2308 1154 577 1732 866 433 1300 650 325 976 488 244 122 61 184 92 46 23 70 35 106 53 160 80 40 20 10 5 16 8 4 2 1 — the "." here shows that the number is maximum value of the sequence so far). Try out the program. Hopefully, my program isn't to buggy to play with.
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_G5erovbzKMMSJPLDHkOeEihNh-huvd5PTofKsOLETneRQEMqIViQ-QE6YtT2b8a1llVVZm6DT9_2YFnLhYrbW5kvAefK8ZI7sS-hJMkhvSbrIgOL8Cq5YVnEzEtJoPzYb6G/s1600/Screenshot+2018-02-01+at+13.03.01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1111" data-original-width="1347" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_G5erovbzKMMSJPLDHkOeEihNh-huvd5PTofKsOLETneRQEMqIViQ-QE6YtT2b8a1llVVZm6DT9_2YFnLhYrbW5kvAefK8ZI7sS-hJMkhvSbrIgOL8Cq5YVnEzEtJoPzYb6G/s400/Screenshot+2018-02-01+at+13.03.01.png" width="400" /></a></div>
<br /></div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-5295710265829364572018-01-29T07:59:00.000-08:002018-10-15T10:01:23.581-07:00Back to Business<div dir="ltr" style="text-align: left;" trbidi="on">
That's small bee business. I'm aiming to create more regular posts. Partly, I was fighting with the Blogger platform; a battle I have been waging since I started using SVG files. The issue is that I can't upload SVG images. After a few forays of cutting and pasting the code into the html, I found it awkward and cumbersome. I should mention that there are plenty of solutions but I was looking for options that I could share with my students that would be free so that they could also do it on their own. I feel that it's important to show students free tools so that when they leave university they can still do things regardless of their situation. I would hate for my students to only be able to do things without expensive tools or services — for instance, if all they work on is CS7 or laser cutters, they start to think through these tools and will be crippled without access. Also, I'm pretty frugal.
<br />
To help remind me later of my contortions, I'll jot down a few highlights. My first solution: I figured out a way to link google drive files to the page. Essentially, google allowed you to serve up drive files as web pages to the world. This was worked well until google decided to change their policy on google drive. Before their policy change, I had served up a lot of my class examples through drive files — I prefer to also keep my class examples accessible so that after a class ends, they still retain access to the examples that help them later. My class wiki's (<a href="http://www.wikispaces.com/">wikispaces</a> — <a href="http://coderesources.wikispaces.com/">coderesources</a> is one of my public ones which isn't closed to a particular class like <a href="https://mmsun.wikispaces.com/">mmsun</a>) were littered with links to my google drive. After some scrambling I was on to my second solution. I was able to switch to dropbox only to realize after one semester that they too would discontinue their ability to serve up personal files as web resources. For my third solution, I ended up using a <a href="https://www.freehostia.com/">freehostia.com</a> site which I purchased the domain <a href="https://jimmorey.com/">jimmorey.com</a>. Unfortunately, the free version has a 250M limit and restricts individual files to 500k. Since most of my examples are code related, I have modest storage needs but some of my files exceed 500k: in particular, Brocolli.svg is a fractal images that is more than 1MB in size. So after attempting to use a gzip-ed version that <a href="https://jimmorey.com/images/Brocolli.svgz">failed</a>. I was finally found <a href="https://jakearchibald.github.io/svgomg/">svgomg </a>, which was able to reduce the file size to 493K — luckily under 500K.
<br />
I was able to then fix my old entry <a href="https://polygoncraze.blogspot.ca/2013/12/embedding-my-broccolli.html">Embedding my Broccolli</a> — a play on the embed tag that I'm not even using anymore....
<br />
<img src="https://jimmorey.com/images/Brocolli2.svg" />
As a further complication, Blogger doesn't like that my free site is unsecured. It complains and doesn't work for the summaries or previews but it seems to work otherwise. I may have to migrate again... Who knew that there would be so much maintenance with a blog?
</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-72554733867011523472017-10-18T16:15:00.000-07:002018-01-26T12:53:06.406-08:00My web woes
<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/SVG/squareDecent3.svg" width="200px" height="200px"/>
<p>I really like this small change. I wasn't expecting such a big difference. I was aiming to promote the octagram called the <a href="https://en.wikipedia.org/wiki/Star_of_Lakshmi">Star of Lakshmi</a> or khatam sulayman, which is two overlapping squares following the recent descending pentagons had two overlapping pentagons. I switched back to emphasizing the square rather than the triangles and ended up with this above pattern. I quite like the details in this pattern. Probably, it doesn't actually benefit that much from the animation. Or perhaps I need to work on a different animation...</p>
<p>...Polyproblems for this blog relate to the shifting sands of the web. When I was happily posting rasterized images of my tilings, I ran into no big issues. Blogger stored all my photos (screen captures in png format) transparently in some google place like picasso but didn't bother me about storage and such. But then I ran across SVG files and became quite drawn to the vector way (also my previous postscript skills were somewhat resurrected--although SVG files aren't nearly as powerful: no variables, loops etc). Anyway, finding a place to dump the files has been an issue I was solving with drive then dropbox and now after the services changed I have ended up resorting to <a href="jimmorey.com">jimmorey.com</a>--essentially free hosting in Germany with space limitations. But I now have to go back and fix this blog... </p><br />
<br />
</div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-16483588454784337982017-08-18T04:31:00.002-07:002017-08-18T04:31:53.847-07:00Back to Vagrancy<div dir="ltr" style="text-align: left;" trbidi="on">
Now that I'm out of ZU (my old employment), I'm back to vagrancy. So I'll have a bit more time for my blog. My first thing will be to redo all the links that use SVG files. I will probably just host my images on jimmorey.com but I'll do it when I have access to a real computer not my 7" tablet. We'll have to see if I extend the scope of my blog to include more than just polygons to some visualizations like my "<a href="http://jimmorey.com/js/willow.html" target="_blank">Weeping Willow" figure</a> that depicts the <a href="https://en.m.wikipedia.org/wiki/Collatz_conjecture" target="_blank">hailstone function.</a> I particularly like the meaningful drooping branches that happen to be composed of numbers that are multiples of three. I was probably thinking about using that resource to teach about CSS but it's current form is too complex. I'm not sure if I can simplify the example into something that would work well with novices.<br />
<br />
I guess since I can't fix the images yet, I'm stuck with writing about these less polygon things... Unless I can easily link it to polygoncraze.... More soon</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com1tag:blogger.com,1999:blog-30839009.post-83744633690527701292015-10-10T23:30:00.000-07:002018-01-26T20:32:01.600-08:00Opacity Changes<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<img src="http://jimmorey.com/SVG/squareDecent3.svg" />
<p>I really like this small change. I wasn't expecting such a big difference. I was aiming to promote the octagram called the <a href="https://en.wikipedia.org/wiki/Star_of_Lakshmi">Star of Lakshmi</a> or <a href="http://moroccandesign.com/eight-point-star">khatam sulayman</a>, which is two overlapping squares following the recent descending pentagons had two overlapping pentagons. I switched back to emphasizing the square rather than the triangles and ended up with this above pattern. I quite like the details in this pattern. Probably, it doesn't actually benefit that much from the animation. Or perhaps I need to work on a different animation...</p>
</div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-79792690016126497322015-10-10T21:54:00.000-07:002018-01-26T12:54:53.278-08:00Descending Squares<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img src="http://jimmorey.com/SVG/squareDecent.svg" /><img src="http://jimmorey.com/SVG/squareDecent2.svg" /> Unlike normal, I was able to deliver the square version of the descending pentagons quickly. There was no math to figure out. although there was one interesting choice that I looked into. The choice was to place the 45 triangles to be touching the previous square rather than the corner square. I guess it's simply a preference about complexity. I like both. </div>
<p>The first version is a simple analogue of the descending pentagons--actually it was the original doodle on my boogie board. I find the boogie board is a great exploratory tool because of it's impermanence. Somehow it helps me focus on process rather than product. The version of the <a href="http://www.amazon.com/Boogie-Board-Writing-Tablet-Black/dp/B002ZE4TDI">boogie board</a> I have doesn't save any of your work and there is no erase so you are stuck with any mistakes unless you erase the entire drawing. So I am tasked with focusing on the internalizing any thing that I do that I think is important. Perhaps this is a bit of a throw back to all the time I spent with chalk and blackboards. Regardless of the tools, the square doodle is a decorated version of drawing a square then using the midpoints of the square as a new square. The corners of the original square then get decorated with their own squares. The second version of this descending square alters the importance of the decorations by using them as a key functioning part. The decorative triangles determine the scale of another layer--it has to fit in the previous square.
<p>I'll look at variations for the pentagon. </p>
<img src="http://jimmorey.com/SVG/pentagonalDecent2.svg" />
<p>My intuition tells me that the hexagon won't be as interesting but I'll probably check it out anyway. If there is anything of note I'll post it.
</div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-5643383637038343982015-10-10T10:42:00.000-07:002018-01-27T06:55:24.567-08:00Descending Pentagon
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img src="http://jimmorey.com/SVG/pentagonalDecent.svg" /> You have to reload this page to see the animation ...perhaps I should put it on a bit of a repeat. It took a surprising amount of high school math to unravel how to make this. I guess I could have been content with just eyeballing it but that seems to take all the challenge away plus it makes it more difficult to augment later. Perhaps I should have used a better tool than Excel: maybe Geometer's Sketchpad. Next time. Perhaps I'll put up the square version of this pattern when I get the time. </div>
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
Essentially, it's a snazzy version of starting with a pentagon and using the sides midpoints to make a slightly smaller pentagon and descending forever (or in this case 12 levels?). The snazziness is was the time consuming part. Computing the lighter bands took a bit of effort--more of a stamina thing rather than a difficult thing.</div>
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<br /></div>
</div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-84432562640931511642015-03-07T22:04:00.001-08:002018-01-26T20:29:08.663-08:00Octagonal flowers<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/images/octPlay.svg" /><br />
This pattern has a few cute things: a right and left handed version of the flower and some structures that seem a little out of place. The green flower is the left and the purple is the right. What I find more interesting is the way the 4 octagons behave between the flowers--there is a diagonal slit between them that alternates its direction. The pentagons are just decorative but they make the white space more interesting.</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-48830121319468546702015-03-01T00:07:00.000-08:002018-01-26T13:03:20.797-08:00Quilt and wallpaper<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/images/quiltish.svg"/><br/>
I was going to try to get this into last month but alas February only has 28 days this year.
here is a toned down copy that works for wallpaper
<a href="http://jimmorey.com/images/quiltTile2.pdf">wall (colour)</a>,
<a href="http://jimmorey.com/images/quiltTile2blu.pdf">wall (blue)</a>,
and <a href="http://jimmorey.com/images/quiltTile2sep.pdf">wall (sepia)</a>.
I was a bit lazy using a tool to crop it so it's in pdf rather than svg...but my MacBook pro accepts it as my desktop background so I didn't pursue it.
<br /></div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-54504527697572917572015-02-01T19:48:00.001-08:002018-01-27T07:00:20.538-08:00from Pentagons to Heptagons<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/images/heptTriSq.svg"/><br/>
<img src="http://jimmorey.com/images/newPentTri7.svg"/><br/>
I needed to do a modification to go from pentagons to heptagons: add a square between the triangles. Without the square the heptagons would intersect. I wonder how close there pentagons are....
<br /></div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-86223120710140261092015-01-26T20:46:00.000-08:002018-01-27T07:01:40.327-08:00Elegant pairs<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/images/newPentTri5b.svg" /><br />
I was experimenting with the pervious post's pattern and the particular twist I was attempt wasn't fruitful but I did end up with this pattern. There two key pairs in this pattern: two purple rhombi (made with triangles) and the prominent pink/purple triangle-pentagons. I call this pattern elegant because of its fine lines: the slim dart gap between the rhombi, and the near touching pink polygons. Perhaps these fine features are also amplified by this type of symmetry.
<br />
I may have to augment my tool to help play with the colour choice and perhaps add in an easy centering tool. I guess these are less of a priority just a little of an annoyance...
<br />
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8cAvf45G1jZC_P0GQSiqhgkpAtoZIq5FSALyPMHSAyfdHFT8pZtYHDRmDdexD0Lu6mI20_BiiL5upUlrlBFdvhbf3qmU3koz-Iz3w6IhmI0B5mdiQ3bTq8g9oK1HubRCd-4_/s1600/newPentTri5bTile30sm-01.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8cAvf45G1jZC_P0GQSiqhgkpAtoZIq5FSALyPMHSAyfdHFT8pZtYHDRmDdexD0Lu6mI20_BiiL5upUlrlBFdvhbf3qmU3koz-Iz3w6IhmI0B5mdiQ3bTq8g9oK1HubRCd-4_/s320/newPentTri5bTile30sm-01.png"></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMNnLPcmjAYt41BZUbFWz4y9mz7vfzMgvptMmyFMmAEg9U3PGCCOuJ9zyGpmujuKKAtJ_exOAAaI6eEZjqaRtpwlTMMTIaB9Hc9dtY6AEYwZ-ntj3jJ35UEfyueXFxUgvFHMl/s1600/newPentTri5bTileSm-01.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMNnLPcmjAYt41BZUbFWz4y9mz7vfzMgvptMmyFMmAEg9U3PGCCOuJ9zyGpmujuKKAtJ_exOAAaI6eEZjqaRtpwlTMMTIaB9Hc9dtY6AEYwZ-ntj3jJ35UEfyueXFxUgvFHMl/s320/newPentTri5bTileSm-01.png"></a></div>
Here are some png wallpapers
</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-82744260744055082015-01-25T22:40:00.001-08:002018-01-27T07:07:13.229-08:00Nice 6-fold symmetry<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/images/newPentTri2.svg"/><br>
I like this one. Essentially, it's variations on a theme. Perhaps I add a twist and see if it will be as pretty.
<p><span style="text-decoration: line-through;">On a side issue, tinyurl.com/p3c6mdh/newPentTri2.svg didn't work when I put https which redirects to https://c3b8f482385fc05f71d246e2e23a26cb99a3c770.googledrive.com/host/0BwD1YaggiIIAY1gxNEJEa2JKNlU/newPentTri2.svg which needs the https. Not surprising but there certainly is a lot of details to juggle--at least when you are doing posting content on the cheap... Of course, if Blogger simply let me upload my svg files I wouldn't have to do any gymnastics...</span> I ended haven't to use my own host.
<br /></div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-45359063080754498422015-01-18T00:42:00.000-08:002018-01-27T07:10:25.396-08:00Pentagons and Triangles<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/images/NewPentTri.svg" /><br />
Here's a new pattern. I have been a bit too busy to post this last semester. Hopefully, next semester I'll have a bit more time to play with patterns. This one has a few variations that I may continue to play with... </div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-80933988170313491722014-09-13T09:25:00.001-07:002014-09-13T23:34:13.840-07:00Tileland+ code<div dir="ltr" style="text-align: left;" trbidi="on">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRUHTKkCComwdrSsXdXQBrPQkKS7_2XOLhwfJM-lA0F6Jx0Kb1zlusTwEV7cnQ_BTxLRbXyKwuVYbMNz_xZdyJ0dMeevOT4apfhjXAjx0FsRjaG01WdoSfdSmlQL57V3fCSh6/s1600/tilelandplus.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRUHTKkCComwdrSsXdXQBrPQkKS7_2XOLhwfJM-lA0F6Jx0Kb1zlusTwEV7cnQ_BTxLRbXyKwuVYbMNz_xZdyJ0dMeevOT4apfhjXAjx0FsRjaG01WdoSfdSmlQL57V3fCSh6/s1600/tilelandplus.png" height="259" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tileland+ interface</td></tr>
</tbody></table>
Along with an <a href="https://c3b8f482385fc05f71d246e2e23a26cb99a3c770.googledrive.com/host/0BwD1YaggiIIAY1gxNEJEa2JKNlU/tl/huh/tileland.html">interface update</a>, I added a some language extras. The native Tileland instructions remain (polygons, colours, and turning) but now I have added the environment instructions to the language. In particular, I have added clipboard manipulation instructions. Although somewhat hidden, this addition is a metalanguage or a preprocessing language. <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVFap4Gwyha0RiWHQshRwEco_E5x1cGGm-gPFgVBe2V3jq4rUan4eHqkpeO5m7tg7TIdFhQOARPVb9i3bGf1b2k-34RqX3Vqz9trsAR2WI0qu-EpcN2ZvAY1VjSP4q9pvZp1f/s1600/loopPiece64.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVFap4Gwyha0RiWHQshRwEco_E5x1cGGm-gPFgVBe2V3jq4rUan4eHqkpeO5m7tg7TIdFhQOARPVb9i3bGf1b2k-34RqX3Vqz9trsAR2WI0qu-EpcN2ZvAY1VjSP4q9pvZp1f/s1600/loopPiece64.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">6o4b></td></tr>
</tbody></table>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Ue_JkkiWknbvSznJI1zR2V5tEuZk3gVRrIdWsYYzmzt20P9o6gXq2KY7uGAn9t_3YZLxmZ1yBo6xzmPCWr0jL0hXe7VBxvtX7waBgWoHVkla-l5fwqR_nZA1X4v0hp4Y0mVI/s1600/loop64.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Ue_JkkiWknbvSznJI1zR2V5tEuZk3gVRrIdWsYYzmzt20P9o6gXq2KY7uGAn9t_3YZLxmZ1yBo6xzmPCWr0jL0hXe7VBxvtX7waBgWoHVkla-l5fwqR_nZA1X4v0hp4Y0mVI/s1600/loop64.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">6o4b>6o4b>6o4b>6o4b></td></tr>
</tbody></table>
<div style="text-align: left;">
<span style="font-family: inherit;">It's actually pretty simple when you see an example. An orange hexagon with a blue square would be 6 o 4 b. The picture below is a that with a right turn or 6o4b>. The colour follows the shape so that it has something to colour. Doing that 4 times is just 6o4b>6o4b>6o4b>6o4b>. Another way to make the pattern is to use the clipboard. I haven't yet introduced a concept of a cursor yet so the clips come from the entire current code. There are 5 instructions that affect the clipboard: x, v, n, m, and q. The first, x, simply transfers the current code into the clipboard. The second, v, adds the first clip to the current code. The next two n and m roll the clips left and right. The final one, q, clears all the clips. The other letter instruction, z, removes the last chunk from the current code (only really useful in an immediate situation). So, to make the loop of squares and hexagons using the clipboard you could type 6o4b>xvvvv or cut and paste that into the code textbox. The result of either action is [6o4b>][6o4b>][6o4b>][6o4b>] -- the brackets chunk the code but do not affect the resulting picture.</span><br />
<br /></div>
<div style="text-align: left;">
<span style="font-family: inherit;">The code in the Tileland+ image was produced by using 2 different clips -- this required using the n and m instructs to change the first clip back and forth. For instance, in this code, "<span style="background-color: white; color: #222222;">6o4>6p>>>4o>x 6o4>x vvvnvmvnvmvnvv"</span>, the first two chunks make the clips and the third chunk use the two clips. In terms of cutting and pasting sometimes it's best to start with a fresh clipboard so an initial q can make a fresh start -- so <span style="background-color: white; color: #222222;">q6o4>6p>>>4o>x6o4>xvvvnvmvnvmvnvvmvnvvmvnvvv </span>so makes the pattern in the image.</span><br />
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">Play around with this <a href="https://c3b8f482385fc05f71d246e2e23a26cb99a3c770.googledrive.com/host/0BwD1YaggiIIAY1gxNEJEa2JKNlU/tl/huh/tileland.html">version of Tileland</a> and tell me what you think.</span></div>
</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-48530008656966293532014-08-27T20:22:00.002-07:002014-08-27T22:29:50.373-07:00New TileLand prototype<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz9hmed9LqpAPPIIB1yrqqYEr3rlXe4jQpHlRt7v85gPGm0tE-5sKC-c05jpdmFuVzYl0WsFOGoPPK_K7U7ENzDTqEhxjLfrBXWecJtjNM7W0qZp5hxqm2nLo64wc0x84j1Y9U/s1600/Screen+Shot+2014-08-28+at+7.13.29+AM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz9hmed9LqpAPPIIB1yrqqYEr3rlXe4jQpHlRt7v85gPGm0tE-5sKC-c05jpdmFuVzYl0WsFOGoPPK_K7U7ENzDTqEhxjLfrBXWecJtjNM7W0qZp5hxqm2nLo64wc0x84j1Y9U/s1600/Screen+Shot+2014-08-28+at+7.13.29+AM.png" height="179" width="320" /></a></div>
This thing is "alpha" code. It's hot off the press with enough functionality to do interesting things but it's not very polished. I added the <b><a href="https://c3b8f482385fc05f71d246e2e23a26cb99a3c770.googledrive.com/host/0BwD1YaggiIIAY1gxNEJEa2JKNlU/tl/huh/tlList.html">link on the side bar </a></b>so it'll be easy to access. The programs come in graphical and textual forms which currently allows you to save your programs by cutting and pasting the text into a place to use later. I stripped down the instructions to one letter to make it more compact and uniform and ease of coding with a keyboard. I'm sure things will change when I get the time. <br />
There are some annoying bugs that I will fix soon: the one the is most irksome is that my collision detection has some issues that I believe are mainly occurring with triangles but I really haven't done any extensive testing... </div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-82687973420270553562014-06-07T03:46:00.002-07:002018-01-27T07:14:08.794-08:00Revisiting an unravelling<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jimmorey.com/images/fracture2.svg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://jimmorey.com/images/fracture2.svg" /></a></div>
This is based on an old pattern where I took a clockwise loop of 6 pentagons and combined them with two counter clockwise loops of 3 hexagons resulting in a clockwise loop of pentagons and hexagons. One way to think about the process is to imagine unravelling the loop of pentagons. I used this pattern back in <a href="http://polygoncraze.blogspot.ae/2007/01/unraveling-pentagon-loop.html">back in 2007</a> and <a href="http://polygoncraze.blogspot.ae/2006/08/this-one-began-as-simple-loop-of-six.html">2006</a> but this one has a bit more of a twist.
<br />
Perhaps I should come up with a visual of this unravelling. I was hoping I would find one in my blog but I didn't. I should make a better index for this thing...done. In this screen capture, you can see that the outside of the original pentagon loop is now the inside of the composed shape and the inside of the original loop corresponds to the 4 sides of the pentagons the are on the outside of the composed shape. Perhaps I'll play some more with this ‡(double dagger shape which I found its html code <a href="http://en.wikipedia.org/wiki/Cross_of_Lorraine">here</a>).
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSDTIpalxR7RSOw0E2zGMafmCShLAeBCaZ6MYLwzhIhBgAR-yNQf8eT0CHsbbZR1AALw-P-We60fuLPBGu1oeNdHtmFgKG3gg4_vp_HZsXWq3IbrGk_CWN_quhOC2GOpgIvrCh/s1600/unrav.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSDTIpalxR7RSOw0E2zGMafmCShLAeBCaZ6MYLwzhIhBgAR-yNQf8eT0CHsbbZR1AALw-P-We60fuLPBGu1oeNdHtmFgKG3gg4_vp_HZsXWq3IbrGk_CWN_quhOC2GOpgIvrCh/s320/unrav.png" /></a></div>
</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-32274734393493172222014-06-01T06:31:00.002-07:002018-01-27T07:22:24.178-08:00Zig, Zag, Zog<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<a href="http://jimmorey.com/images/moreSpin.svg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://jimmorey.com/images/moreSpin.svg"></a>
Here's just a bit of play before I head to Basketball. I call it zig, zag, zog because there are 3 chunks to the code. Usually, I have a standard zig-zag pattern alternating between to 2 chunks of code. But there are three loops: one if made of zig and zag, another is made from zig and zog, and the final is made of zag and zog. Not too deep but still nice with my new SVG output.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8G5YXXg_3Aea2pSfLz5QbShkXXcd6Z3NmKR6bGBRp91jSybW8G7zkJJjX7N3Y8j0xlEBGX81HoPc6GuSXhqwlGz2QofC3QXQEVrK5-hIcVJNjCnkPdC8whMYP_XjoKBWmNSKT/s1600/zigZagZog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8G5YXXg_3Aea2pSfLz5QbShkXXcd6Z3NmKR6bGBRp91jSybW8G7zkJJjX7N3Y8j0xlEBGX81HoPc6GuSXhqwlGz2QofC3QXQEVrK5-hIcVJNjCnkPdC8whMYP_XjoKBWmNSKT/s320/zigZagZog.png" height="200" width="80"></a></div>
This picture of the code shows <em>a</em> as zig, <em>b</em> as zag, and <em>c</em> as zog. It's pretty clear that <em>a</em> calls <em>b</em> which calls <em>a</em> making a zig-zag loop; and similarly that <em>b</em> calls <em>c</em> which calls <em>b</em> making the zag-zog loop. But the zig-zog loop takes a bit of though--in the code for <em>b</em> since it calls both an <em>a</em> and a <em>c</em>. But essentially <em>c</em> results in a <em>cbcbcb</em> loop with that last b also calling an <em>a</em> so the first <em>c</em> essentially calls an <em>a</em>. Similarly <em>a</em> essentially calls an <em>c</em> thus resulting in the zig-zog loop. There's a bit of twisting calling going on.
</div>
Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-43824727929330821432014-05-17T01:59:00.001-07:002018-01-27T07:27:16.564-08:00Google driving...<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<b>This apparently won't work by September 2016--so I'm migrating my files to dropbox...</b>
Well, I think I finally worked out how to easily get my files in my blog. It was a bit hairy to find the magic link <em>googledrive.com/host/0BwD1YaggiIIAY1gxNEJEa2JKNlU</em>. I should have guessed, right? My problem was playing with drive.google.com, fileview, #folder, file/d and many other combinations. But probably most of my issues were related to picassa web not storing my svg files... Now I can get to what I actually want to do...talk about polygons!!!
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggKejLAQy1s_mLnSNjSNCcsjAh6YTs4521pk-sVUNw22tu1Cf2UkYPjXIUrbu8HSZSrpOaA0qsd2NIWuT3O0XnT0NBzngw3eXR0mDxxsU-9RQxJlHqbDOKqNdeGEiP4aLUDjn6/s1600/mess4code.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggKejLAQy1s_mLnSNjSNCcsjAh6YTs4521pk-sVUNw22tu1Cf2UkYPjXIUrbu8HSZSrpOaA0qsd2NIWuT3O0XnT0NBzngw3eXR0mDxxsU-9RQxJlHqbDOKqNdeGEiP4aLUDjn6/s1600/mess4code.png" height="320" width="99"></a></div>
<image src="http://jimmorey.com/images/quilt.svg" width="320" ></image>
For simple patterns like these, I'll start including the PolygonR&D programs along side. This quilt like pattern has only one chunk of code. I used a few colours so that it would be easier to unravel how it works. Although it is constructed with hexagons, squares, and triangles, the white spaces are probably the more interesting features. The Xs and the compass-like (called compass rose or windroses) gaps probably offer more interest than the polygons. Tracing the code chunks means follow the "a" in clock-wise motion around the Xs and counter clock-wise motion around the windroses. The branching nature of the codes makes up for it's simplicity.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvYBcpHxVJdInPOTidKzuGmrE9qyxsdzu1yzaNEbrfLCQzeoEG_NiQHqnSqMzWGz2xYZ92-q8pWthnsQhfu1SHAK1l_Tw5SjWcernkxSyd5jws6xNWMzpLqUMjveGrHuZ132E/s1600/spin3Code.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvYBcpHxVJdInPOTidKzuGmrE9qyxsdzu1yzaNEbrfLCQzeoEG_NiQHqnSqMzWGz2xYZ92-q8pWthnsQhfu1SHAK1l_Tw5SjWcernkxSyd5jws6xNWMzpLqUMjveGrHuZ132E/s1600/spin3Code.png" height="320" width="84"></a>
</div>
<image src="http://jimmorey.com/images/spin3.svg" width="320" ></image>
<div>
I'm always enjoy playing with the odd-sided polygons. This pattern requires a branching factor of 3. The reason is that each of the olive triangles has more 6 paths going through it rather than only 3--so there is a bit of duplication required. Sometimes the evolution of a pattern comes from different ideas: here I started with combining 3 heptagons to make a sequence of edges to make a 180 rotation and undoing that rotation with 3 triangles to produce straight line. These "straight lines" are essentially the code chunk seen on the side. Although, you see the PolygonR&D code on the side, most of my play with local patterns come occurs in Tileland...I guess this means I may have to eventually either provide a bridge from Tileland to PolygonR&D or simply make PolygonR&D's interface a bit better at the intermediate...
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQePJBYdSlG64ngcwWalCkEF4Q-n9q9aAyTFDcqzCBJbfjbRYZNAHe2kdYZqBwOdn-n-3Of6WLS-XDpSk88iE9tC2hSc8EZ9HpBku8X6xLoR2kYP3RfFjgosPZlCYL7WJLyi19/s1600/bugZZcode2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQePJBYdSlG64ngcwWalCkEF4Q-n9q9aAyTFDcqzCBJbfjbRYZNAHe2kdYZqBwOdn-n-3Of6WLS-XDpSk88iE9tC2hSc8EZ9HpBku8X6xLoR2kYP3RfFjgosPZlCYL7WJLyi19/s320/bugZZcode2.png"></a></div>
<image src="http://jimmorey.com/images/bugs.svg" width="320" ></image>
<br />
I call this last pattern Bugs. I figure that even though it's a fairly simple pattern it has an interesting twist: it's has what I call a zig-zag. Imagine you have grid of squares that are separated by "spacers. These <em>spacers</em> have 2 hexagons and a square which have a slight twist--call is a zig. So to make the grid fit together, you need to undo that twist with a zag (the mirror action). This can be seen in the code by alternating from "a" to "b" and from "b" to "a".
</div>
<div>
Now that I know how to easily insert my SVG files into my blog entries, I will be making a few more entries. The SVG files look so much better than my screen captures of the past...I may have to revisit a few of my favourite patterns from before... As well, I should make a better index so that I can find my patterns more easily. Perhaps this is just a matter of updating my style preferences...
</div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0tag:blogger.com,1999:blog-30839009.post-56203486605364192013-12-28T00:16:00.002-08:002018-01-29T06:08:04.060-08:00Embedding my broccoli<div dir="ltr" style="text-align: left;" trbidi="on">
<img src="http://jimmorey.com/images/Brocolli2.svg"/>
Who needs a bed of roses when you can have embedded broccoli. Well, this may be the way I'll put my svg files in blogspot. It's not as convenient since I'll need a non-google site to load it...but it may have more predictable results. Here goes...publish.
<br /></div>Jim Moreyhttp://www.blogger.com/profile/02612292127458038870noreply@blogger.com0