New TileLand prototype

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 link on the side bar 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.
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...  

Revisiting an unravelling

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 back in 2007 and 2006 but this one has a bit more of a twist.
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 here).

Zig, Zag, Zog

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.

This picture of the code shows a as zig, b as zag, and c as zog. It's pretty clear that a calls b which calls a making a zig-zag loop; and similarly that b calls c which calls b making the zag-zog loop. But the zig-zog loop takes a bit of though--in the code for b since it calls both an a and a c. But essentially c results in a cbcbcb loop with that last b also calling an a so the first c essentially calls an a. Similarly a essentially calls an c thus resulting in the zig-zog loop. There's a bit of twisting calling going on.

Google driving...

This apparently won't work by September 2016--so I'm migrating my files to dropbox... 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 googledrive.com/host/0BwD1YaggiIIAY1gxNEJEa2JKNlU. 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!!!

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.

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...

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 spacers 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".

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...

Embedding my broccoli

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.

Expo 2020!

Need I say more (this is a very small svg file 130ish lines of code.)

Html 5 play

I'm always trying to coming up with some compelling reasons to code for my classes. The argument I try to make is that you can save time by making flexible and short code that does amazing things. I'm still only having limited success but maybe one day I'll have hit just the right code that lights a spark....

I did keep it relatively simple until I started to mess with the text...oops. The code tag doesn't seem to work within Blog spot...hmmm

 
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="230px" 
     height="360px" viewBox="0 0 230 360" enable-background="new 0 0 230 360" xml:space="preserve"> 

<!-- A bit of play with html 5 --> 
<defs> 
  <g id="Chev"> 
    <path id="C" transform="skewX(30) scale(1,0.8660)" d="M 0,0 0,80 80,80 80,0 60,0 60,60 20,60 20,0 z"/> 
    <path id="revC" opacity="0.4" transform="scale(1,-1) skewX(30) scale(1,0.8660)" d="M 0,0 0,80 80,80 80,0 60,0 60,60 20,60 20,0 z"/> 
  </g> 
</defs> 

<!-- HTML text --> 
<g>  <!-- incase I want to play with the colour --> 
  <g transform="translate(4,115)" >  <!-- had to position it here so that the skews were easier to figure out--> 
    <g> 
      <animateTransform id="breathIn" attributeName="transform" additive="sum" dur="2.5s" type="translate" values="80 0"/> 
      <animateTransform attributeName="transform" additive="sum" dur="2.5s" type="skewY" from="30" to="0"/> 
      <animateTransform attributeName="transform" additive="sum" dur="2.5s" type="translate" values="-80 0"/> 
      <text transform="skewY(-30) scale(1.42,1)" font-family="sans-serif" font-weight="bold" font-size="80" x ="0" y="0">H</text> 
    </g> 
  </g> 
  <g transform="translate(81,70)" >  <!-- had to position it here so that the skews were easier to figure out--> 
    <g> 
      <animateTransform attributeName="transform" attribueType="xml" dur="2.5s" type="skewY" from="-30" to="0"/> 
      <text transform="skewY(30) scale(0.85,1)" font-family="sans-serif" font-weight="bold" font-size="80" >TML</text> 
    </g> 
  </g> 
</g> 

<!-- the chevrons --> 
<g> 
  <g>  <!-- bottom red chevron (pointing down) --> 
    <animateMotion path="M 0,-400  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "red" transform="translate(150,115) rotate(-60,0,0) rotate(-30,0,0) translate(-200,-69.282)" /> 
  </g> 
  <g>  <!-- top red chevron (pointing up) --> 
    <animateMotion path="M 0,400  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "red" transform="translate(150,115) rotate(-60,0,0) rotate(150,0,0)" /> 
  </g> 
  <g>  <!-- top orange chevron (pointing up left) --> 
    <animateMotion path="M 346,200  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "orange" transform="translate(150,115) rotate(-60,0,0) rotate(90,0,0) translate(-120,69.282)" /> 
  </g> 
  <g>  <!-- bottom orange chevron (pointing down right) --> 
    <animateMotion path="M -346,-200  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "orange" transform="translate(150,115) rotate(-60,0,0) rotate(270,0,0) translate(-160,-138.564)" /> 
  </g> 
</g> 
</svg>