commit ad8e61ee2f6fda16656b61c5f23268bc41e88ee9
parent d1e775310d991ddf5e7876ef5a1c3668639a5de4
Author: mpizzzle <m@michaelpercival.xyz>
Date: Sat, 7 Nov 2020 14:23:28 +0000
correcting asset links
Diffstat:
2 files changed, 22 insertions(+), 22 deletions(-)
diff --git a/2020.html b/2020.html
@@ -36,8 +36,8 @@
<p>The rules for constructing penrose tilings are well documented, <a href="https://tartarus.org/~simon/20110412-penrose/penrose.xhtml">this</a> link in particular explains the iterative process in better detail than I ever could. The initial starting triangle shares it's geometry with a decagon (I will refer to this triangle type as 't123'). The easiest way to construct it is to draw a line of length 1, rotate it by π/5 radians with respect to the origin; optionally repeat nine times and you have a decagon. Conveniently (0, 0) is the middle of the screen when it comes to computer graphics, so arranging the triangles around the center is trivial. The simplest method is to start by taking each t123 triangle and dividing it into three sub triangles; you can calculate their geometry by finding two new vertices along the parent t123 triangle using the golden ratio. Doing this correctly you can fit two triangles of type t123 and one of t124 perfectly into the parent t123 triangle, and in a similar manner the rules for dividing t124 triangles is to fit one t123 and one t124. Boom, infinite Penrose tilings. Simple right? Check out the initial decagon and first t123 split below:
-<p><img src="assets/pizza.png" alt="" width="540" height="540" />
-<img src="assets/more_complicated_pizza.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/pizza.png" alt="" width="540" height="540" />
+<img src="blog/assets/more_complicated_pizza.png" alt="" width="540" height="540" /></p>
<p>I have used the <a href="https://www.sfml-dev.org/">sfml</a> library in the past as a wrapper for GLSL shading, but it turned out to be a pain to use for this project. I admit my knowledge of the library is poor, but in a marginally more complex project I found a few too many things to be restrictive, for example managing <a href="https://www.sfml-dev.org/documentation/2.5.1/classsf_1_1VertexBuffer.php">vertex buffers</a> (how do I handle my own element buffer objects?); in the end I'd rather just call the OpenGL functions myself, so I scrapped the library in favour of <a href="https://www.glfw.org/">glfw</a>. A little more work required in exchange for a little more control turned out to be the right balance.</p>
@@ -58,24 +58,24 @@
</ul></p>
<p>Once that was solved I ended up with this interesting pattern, from which the Penrose tilings can be carved out like a statue hidden in a block of marble:</p>
-<img src="assets/skeleton.png" alt="" width="540" height="540" /></p>
+<img src="blog/assets/skeleton.png" alt="" width="540" height="540" /></p>
<p>Despite being formed from only two different triangles the above is not a valid Penrose tiling. Some of the lines need to be removed, and at the time I was rendering whole triangles instead of individual lines which wasn't flexible enough in terms of design. Once I figured out which lines needed to be removed and how, I ended up with the following:</p>
-<p><img src="assets/p2.png" alt="" width="540" height="540" />
-<img src="assets/p3.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p2.png" alt="" width="540" height="540" />
+<img src="blog/assets/p3.png" alt="" width="540" height="540" /></p>
<p>Voila! That qualifies as a valid Penrose tiling, and with some careful tinkering I was able to generate the P3 tiling also. Next, using the triangle index data for shading (one element buffer for the t123 triangles, and one for t124):</p>
-<p><img src="assets/p2_two_colour.png" alt="" width="540" height="540" />
-<img src="assets/p3_two_colour.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p2_two_colour.png" alt="" width="540" height="540" />
+<img src="blog/assets/p3_two_colour.png" alt="" width="540" height="540" /></p>
<p>Then trying to be clever by using a six colour palette (including the lines and background). This was achieved by looking at the parent type of any given triangle giving us 2² colour options for the triangles. I think it turned out nicely:</p>
-<p><img src="assets/p3_four_colour_1.png" alt="" width="540" height="540" />
-<img src="assets/p2_four_colour_1.png" alt="" width="540" height="540" /></p>
-<p><img src="assets/p2_four_colour_2.png" alt="" width="540" height="540" />
-<img src="assets/p3_four_colour_2.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p3_four_colour_1.png" alt="" width="540" height="540" />
+<img src="blog/assets/p2_four_colour_1.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p2_four_colour_2.png" alt="" width="540" height="540" />
+<img src="blog/assets/p3_four_colour_2.png" alt="" width="540" height="540" /></p>
<p>I know there are better and more elegant ways of shading Penrose tilings but I feel happy that I've done what I set out to do, now the hard part is waiting for divine inspiration to kick in before I try and paint one for real.</p>
<p>Peace out.</p>
diff --git a/rss.xml b/rss.xml
@@ -20,8 +20,8 @@ Updates from Michael Percival. Give this file to your RSS feeder to receive blog
<p>The rules for constructing penrose tilings are well documented, <a href="https://tartarus.org/~simon/20110412-penrose/penrose.xhtml">this</a> link in particular explains the iterative process in better detail than I ever could. The initial starting triangle shares it's geometry with a decagon (I will refer to this triangle type as 't123'). The easiest way to construct it is to draw a line of length 1, rotate it by π/5 radians with respect to the origin; optionally repeat nine times and you have a decagon. Conveniently (0, 0) is the middle of the screen when it comes to computer graphics, so arranging the triangles around the center is trivial. The simplest method is to start by taking each t123 triangle and dividing it into three sub triangles; you can calculate their geometry by finding two new vertices along the parent t123 triangle using the golden ratio. Doing this correctly you can fit two triangles of type t123 and one of t124 perfectly into the parent t123 triangle, and in a similar manner the rules for dividing t124 triangles is to fit one t123 and one t124. Boom, infinite Penrose tilings. Simple right? Check out the initial decagon and first t123 split below:
-<p><img src="assets/pizza.png" alt="" width="540" height="540" />
-<img src="assets/more_complicated_pizza.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/pizza.png" alt="" width="540" height="540" />
+<img src="blog/assets/more_complicated_pizza.png" alt="" width="540" height="540" /></p>
<p>I have used the <a href="https://www.sfml-dev.org/">sfml</a> library in the past as a wrapper for GLSL shading, but it turned out to be a pain to use for this project. I admit my knowledge of the library is poor, but in a marginally more complex project I found a few too many things to be restrictive, for example managing <a href="https://www.sfml-dev.org/documentation/2.5.1/classsf_1_1VertexBuffer.php">vertex buffers</a> (how do I handle my own element buffer objects?); in the end I'd rather just call the OpenGL functions myself, so I scrapped the library in favour of <a href="https://www.glfw.org/">glfw</a>. A little more work required in exchange for a little more control turned out to be the right balance.</p>
@@ -42,24 +42,24 @@ Updates from Michael Percival. Give this file to your RSS feeder to receive blog
</ul></p>
<p>Once that was solved I ended up with this interesting pattern, from which the Penrose tilings can be carved out like a statue hidden in a block of marble:</p>
-<img src="assets/skeleton.png" alt="" width="540" height="540" /></p>
+<img src="blog/assets/skeleton.png" alt="" width="540" height="540" /></p>
<p>Despite being formed from only two different triangles the above is not a valid Penrose tiling. Some of the lines need to be removed, and at the time I was rendering whole triangles instead of individual lines which wasn't flexible enough in terms of design. Once I figured out which lines needed to be removed and how, I ended up with the following:</p>
-<p><img src="assets/p2.png" alt="" width="540" height="540" />
-<img src="assets/p3.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p2.png" alt="" width="540" height="540" />
+<img src="blog/assets/p3.png" alt="" width="540" height="540" /></p>
<p>Voila! That qualifies as a valid Penrose tiling, and with some careful tinkering I was able to generate the P3 tiling also. Next, using the triangle index data for shading (one element buffer for the t123 triangles, and one for t124):</p>
-<p><img src="assets/p2_two_colour.png" alt="" width="540" height="540" />
-<img src="assets/p3_two_colour.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p2_two_colour.png" alt="" width="540" height="540" />
+<img src="blog/assets/p3_two_colour.png" alt="" width="540" height="540" /></p>
<p>Then trying to be clever by using a six colour palette (including the lines and background). This was achieved by looking at the parent type of any given triangle giving us 2² colour options for the triangles. I think it turned out nicely:</p>
-<p><img src="assets/p3_four_colour_1.png" alt="" width="540" height="540" />
-<img src="assets/p2_four_colour_1.png" alt="" width="540" height="540" /></p>
-<p><img src="assets/p2_four_colour_2.png" alt="" width="540" height="540" />
-<img src="assets/p3_four_colour_2.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p3_four_colour_1.png" alt="" width="540" height="540" />
+<img src="blog/assets/p2_four_colour_1.png" alt="" width="540" height="540" /></p>
+<p><img src="blog/assets/p2_four_colour_2.png" alt="" width="540" height="540" />
+<img src="blog/assets/p3_four_colour_2.png" alt="" width="540" height="540" /></p>
<p>I know there are better and more elegant ways of shading Penrose tilings but I feel happy that I've done what I set out to do, now the hard part is waiting for divine inspiration to kick in before I try and paint one for real.</p>
<p>Peace out.</p>
