commit 752a6c5863a60de59054f7ccc24c64f3a53cbe8a
parent e2c6291cfba7eb09bb256ebef8c239a63856727e
Author: mpizzzle <m@michaelpercival.xyz>
Date: Mon, 9 Nov 2020 22:47:59 +0000
minor blog tweaking
Diffstat:
5 files changed, 65 insertions(+), 57 deletions(-)
diff --git a/2020.html b/2020.html
@@ -35,11 +35,12 @@
<p>Having just moved into a new (tragically empty) flat, I've been inspired to try decorating it with some self created art, and Penrose tiling's beauty in conjunction with their relative ease of computability make them an ideal candidate. The idea I have is to write a program to generate some basic Penrose tilings, where I can then play around with the colour scheme, print out a frame, and paint them by hand in an Escher like style. How is that going to work? Let's find out.</p>
<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.</p>
-<p>The initial starting triangle shares it's geometry with a slice from 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.</p>
-<p>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>The initial starting triangle shares it's geometry with a slice from a decagon (I will refer to this triangle type as 't123'). The easiest way to construct one is to draw a line of length 1 and rotate the end point by π/5 radians with respect to the origin; optionally repeat the process nine more 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 of the screen is trivial.</p>
+<p>The simplest method of division is to take each t123 triangle and divide it into three sub triangles; you can calculate the sub-triangle geometry by finding two new vertices along the perimeter of the parent t123 triangle via the golden ratio (again, check out the link above for more detail).</p>
+<p>Doing this correctly you can fit two t123's and one t124 perfectly into a 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="blog/assets/pizza.png" alt="" width="400" height="400" />
-<img src="blog/assets/more_complicated_pizza.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/pizza.png"><img src="assets/pizza.png" alt="" width="400" height="400" /></a>
+<a href="assets/more_complicated_pizza.png"><img src="assets/more_complicated_pizza.png" alt="" width="400" height="400" /></a></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>
@@ -56,33 +57,33 @@
<ul>
<li>dt = φ * d</li>
<li>∴ t = φ</li>
- <li>∴ no need to calc d at all (nice.).</li>
+ <li>∴ no need to calculate d at all (nice.).</li>
</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="blog/assets/skeleton.png" alt="" width="400" height="400" /></p>
+<p>Once that was solved I ended up with this interesting pattern, from which the Penrose tiling can be carved out:</p>
+<a href="assets/skeleton.png"><img src="assets/skeleton.png" alt="" width="400" height="400" /></a></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>Despite the above picture being formed from only two different triangles, it 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="blog/assets/p2.png" alt="" width="400" height="400" />
-<img src="blog/assets/p3.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/p2.png"><img src="assets/p2.png" alt="" width="400" height="400" /></a>
+<a href="assets/p3.png"><img src="assets/p3.png" alt="" width="400" height="400" /></a></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="blog/assets/p2_two_colour.png" alt="" width="400" height="400" />
-<img src="blog/assets/p3_two_colour.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/p2_two_colour.png"><img src="assets/p2_two_colour.png" alt="" width="400" height="400" /></a>
+<a href="assets/p3_two_colour.png"><img src="assets/p3_two_colour.png" alt="" width="400" height="400" /></a></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="blog/assets/p3_four_colour_1.png" alt="" width="400" height="400" />
-<img src="blog/assets/p2_four_colour_1.png" alt="" width="400" height="400" /></p>
-<p><img src="blog/assets/p2_four_colour_2.png" alt="" width="400" height="400" />
-<img src="blog/assets/p3_four_colour_2.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/p3_four_colour_1.png"><img src="assets/p3_four_colour_1.png" alt="" width="400" height="400" /></a>
+<a href="assets/p2_four_colour_1.png"><img src="assets/p2_four_colour_1.png" alt="" width="400" height="400" /></a></p>
+<p><a href="assets/p2_four_colour_2.png"><img src="assets/p2_four_colour_2.png" alt="" width="400" height="400" /></a>
+<a href="assets/p3_four_colour_2.png"><img src="assets/p3_four_colour_2.png" alt="" width="400" height="400" /></a></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>You can find the code used to generate the images above in my github project <a href="https://github.com/mpizzzle/penrose">here</a>. If you want to compile the program yourself you'll have install the dependencies manually for now; I may take the time to package it with a more modern build tool in the future.</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, the hard part is waiting for divine inspiration to kick in before I try and paint one for real.</p>
+<p>You can find the code used to generate the images above on github <a href="https://github.com/mpizzzle/penrose">here</a>. If you want to compile the program yourself you'll have install the dependencies manually for now; I may take the time to package it with a more modern build tool in the future.</p>
<p>Peace out.</p>
-<small>Sat, 07 Nov 2020 15:12:13 +0000</small>
+<small>Mon, 09 Nov 2020 22:35:02 +0000</small>
</div>
<div class='entry'>
<h2 id='on-shaders'>on shaders</h2>
diff --git a/blog.html b/blog.html
@@ -27,7 +27,7 @@
<div class="main">
<!-- LB -->
-<li>2020 Nov 07 – <a href="blog/penrose-tilings-part-1.html">Penrose Tilings part 1</a></li>
+<li>2020 Nov 09 – <a href="blog/penrose-tilings-part-1.html">Penrose Tilings part 1</a></li>
<li>2020 Aug 21 – <a href="blog/on-shaders.html">on shaders</a></li>
</div>
</body>
diff --git a/blog/assets/more_complicated_pizza.png b/blog/assets/more_complicated_pizza.png
Binary files differ.
diff --git a/blog/penrose-tilings-part-1.html b/blog/penrose-tilings-part-1.html
@@ -11,11 +11,12 @@
<p>Having just moved into a new (tragically empty) flat, I've been inspired to try decorating it with some self created art, and Penrose tiling's beauty in conjunction with their relative ease of computability make them an ideal candidate. The idea I have is to write a program to generate some basic Penrose tilings, where I can then play around with the colour scheme, print out a frame, and paint them by hand in an Escher like style. How is that going to work? Let's find out.</p>
<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.</p>
-<p>The initial starting triangle shares it's geometry with a slice from 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.</p>
-<p>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>The initial starting triangle shares it's geometry with a slice from a decagon (I will refer to this triangle type as 't123'). The easiest way to construct one is to draw a line of length 1 and rotate the end point by π/5 radians with respect to the origin; optionally repeat the process nine more 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 of the screen is trivial.</p>
+<p>The simplest method of division is to take each t123 triangle and divide it into three sub triangles; you can calculate the sub-triangle geometry by finding two new vertices along the perimeter of the parent t123 triangle via the golden ratio (again, check out the link above for more detail).</p>
+<p>Doing this correctly you can fit two t123's and one t124 perfectly into a 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><a href="assets/pizza.png"><img src="assets/pizza.png" alt="" width="540" height="540" /></a>
+<a href="assets/more_complicated_pizza.png"><img src="assets/more_complicated_pizza.png" alt="" width="540" height="540" /></a></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>
@@ -32,33 +33,33 @@
<ul>
<li>dt = φ * d</li>
<li>∴ t = φ</li>
- <li>∴ no need to calc d at all (nice.).</li>
+ <li>∴ no need to calculate d at all (nice.).</li>
</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>
+<p>Once that was solved I ended up with this interesting pattern, from which the Penrose tiling can be carved out:</p>
+<a href="assets/skeleton.png"><img src="assets/skeleton.png" alt="" width="540" height="540" /></a></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>Despite the above picture being formed from only two different triangles, it 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><a href="assets/p2.png"><img src="assets/p2.png" alt="" width="540" height="540" /></a>
+<a href="assets/p3.png"><img src="assets/p3.png" alt="" width="540" height="540" /></a></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><a href="assets/p2_two_colour.png"><img src="assets/p2_two_colour.png" alt="" width="540" height="540" /></a>
+<a href="assets/p3_two_colour.png"><img src="assets/p3_two_colour.png" alt="" width="540" height="540" /></a></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><a href="assets/p3_four_colour_1.png"><img src="assets/p3_four_colour_1.png" alt="" width="540" height="540" /></a>
+<a href="assets/p2_four_colour_1.png"><img src="assets/p2_four_colour_1.png" alt="" width="540" height="540" /></a></p>
+<p><a href="assets/p2_four_colour_2.png"><img src="assets/p2_four_colour_2.png" alt="" width="540" height="540" /></a>
+<a href="assets/p3_four_colour_2.png"><img src="assets/p3_four_colour_2.png" alt="" width="540" height="540" /></a></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>You can find the code used to generate the images above in my github project <a href="https://github.com/mpizzzle/penrose">here</a>. If you want to compile the program yourself you'll have install the dependencies manually for now; I may take the time to package it with a more modern build tool in the future.</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, the hard part is waiting for divine inspiration to kick in before I try and paint one for real.</p>
+<p>You can find the code used to generate the images above on github <a href="https://github.com/mpizzzle/penrose">here</a>. If you want to compile the program yourself you'll have install the dependencies manually for now; I may take the time to package it with a more modern build tool in the future.</p>
<p>Peace out.</p>
<footer>by <strong><a href='https://michaelpercival.xyz/'>Michael Percival</a></strong></footer>
</body>
-</html>
+</html>+
No newline at end of file
diff --git a/rss.xml b/rss.xml
@@ -19,11 +19,12 @@ Updates from Michael Percival. Give this file to your RSS feeder to receive blog
<p>Having just moved into a new (tragically empty) flat, I've been inspired to try decorating it with some self created art, and Penrose tiling's beauty in conjunction with their relative ease of computability make them an ideal candidate. The idea I have is to write a program to generate some basic Penrose tilings, where I can then play around with the colour scheme, print out a frame, and paint them by hand in an Escher like style. How is that going to work? Let's find out.</p>
<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.</p>
-<p>The initial starting triangle shares it's geometry with a slice from 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.</p>
-<p>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>The initial starting triangle shares it's geometry with a slice from a decagon (I will refer to this triangle type as 't123'). The easiest way to construct one is to draw a line of length 1 and rotate the end point by π/5 radians with respect to the origin; optionally repeat the process nine more 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 of the screen is trivial.</p>
+<p>The simplest method of division is to take each t123 triangle and divide it into three sub triangles; you can calculate the sub-triangle geometry by finding two new vertices along the perimeter of the parent t123 triangle via the golden ratio (again, check out the link above for more detail).</p>
+<p>Doing this correctly you can fit two t123's and one t124 perfectly into a 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="blog/assets/pizza.png" alt="" width="400" height="400" />
-<img src="blog/assets/more_complicated_pizza.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/pizza.png"><img src="assets/pizza.png" alt="" width="400" height="400" /></a>
+<a href="assets/more_complicated_pizza.png"><img src="assets/more_complicated_pizza.png" alt="" width="400" height="400" /></a></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>
@@ -40,36 +41,40 @@ Updates from Michael Percival. Give this file to your RSS feeder to receive blog
<ul>
<li>dt = φ * d</li>
<li>∴ t = φ</li>
- <li>∴ no need to calc d at all (nice.).</li>
+ <li>∴ no need to calculate d at all (nice.).</li>
</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="blog/assets/skeleton.png" alt="" width="400" height="400" /></p>
+<p>Once that was solved I ended up with this interesting pattern, from which the Penrose tiling can be carved out:</p>
+<a href="assets/skeleton.png"><img src="assets/skeleton.png" alt="" width="400" height="400" /></a></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>Despite the above picture being formed from only two different triangles, it 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="blog/assets/p2.png" alt="" width="400" height="400" />
-<img src="blog/assets/p3.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/p2.png"><img src="assets/p2.png" alt="" width="400" height="400" /></a>
+<a href="assets/p3.png"><img src="assets/p3.png" alt="" width="400" height="400" /></a></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="blog/assets/p2_two_colour.png" alt="" width="400" height="400" />
-<img src="blog/assets/p3_two_colour.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/p2_two_colour.png"><img src="assets/p2_two_colour.png" alt="" width="400" height="400" /></a>
+<a href="assets/p3_two_colour.png"><img src="assets/p3_two_colour.png" alt="" width="400" height="400" /></a></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="blog/assets/p3_four_colour_1.png" alt="" width="400" height="400" />
-<img src="blog/assets/p2_four_colour_1.png" alt="" width="400" height="400" /></p>
-<p><img src="blog/assets/p2_four_colour_2.png" alt="" width="400" height="400" />
-<img src="blog/assets/p3_four_colour_2.png" alt="" width="400" height="400" /></p>
+<p><a href="assets/p3_four_colour_1.png"><img src="assets/p3_four_colour_1.png" alt="" width="400" height="400" /></a>
+<a href="assets/p2_four_colour_1.png"><img src="assets/p2_four_colour_1.png" alt="" width="400" height="400" /></a></p>
+<p><a href="assets/p2_four_colour_2.png"><img src="assets/p2_four_colour_2.png" alt="" width="400" height="400" /></a>
+<a href="assets/p3_four_colour_2.png"><img src="assets/p3_four_colour_2.png" alt="" width="400" height="400" /></a></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>You can find the code used to generate the images above in my github project <a href="https://github.com/mpizzzle/penrose">here</a>. If you want to compile the program yourself you'll have install the dependencies manually for now; I may take the time to package it with a more modern build tool in the future.</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, the hard part is waiting for divine inspiration to kick in before I try and paint one for real.</p>
+<p>You can find the code used to generate the images above on github <a href="https://github.com/mpizzzle/penrose">here</a>. If you want to compile the program yourself you'll have install the dependencies manually for now; I may take the time to package it with a more modern build tool in the future.</p>
<p>Peace out.</p>
]]></description>
</item>
+
+
+
+
<item>
<title>on shaders</title>
<guid>https://michaelpercival.xyz/2020.html#on-shaders</guid>
