commit ae576de0b775398eaed8d38b6dd5f02b1316b7f6
parent 81b1fedc2ef85e236822534fda9ed2c9e1bea6cc
Author: mpizzzle <m@michaelpercival.xyz>
Date: Sat, 7 Nov 2020 14:15:41 +0000
added penrose tilings part 1 blog post
Diffstat:
15 files changed, 173 insertions(+), 0 deletions(-)
diff --git a/2020.html b/2020.html
@@ -29,6 +29,59 @@
<!-- LB -->
<div class='entry'>
+<h2 id='penrose-tilings-part-1'>Penrose Tilings part 1</h2>
+<small>[<a href='#penrose-tilings-part-1'>link</a>—<a href='blog/penrose-tilings-part-1.html'>standalone</a>]</small>
+<p>I recently read an article that <a href="https://www.nobelprize.org/prizes/physics/2020/penrose/interview/">Roger Penrose</a> won a nobel prize for his theoretical work on Black Holes, which I'm sure is well deserved. Another creation of Roger Penrose, 'Penrose tilings' are also very interesting, being his solution for tiling an infinite plane aperiodically with only two tiles. Penrose tilings have an Escheresque quality to them (Escher and Penrose famously were both inspired by one-another during their respective careers) which I find fascinating.</p>
+<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 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. 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>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>
+
+<p>Once I had sufficiently bashed myself over the head trying to remember how the OpenGL rendering pipeline works, most of the implementation was a modest cycle of tinkering/ refactoring. The only tricky part was that I had to look up was <a href="https://math.stackexchange.com/questions/2045174/how-to-find-a-point-between-two-points-with-given-distance">how to find a point on a line</a> (thank you based math stack exchange), something I'm sure I learned in school and immediately forgot.</p>
+
+<p>For reference, the formula for calculating a point between two points is:
+<ul>
+ <li>(xt, yt) = (((1 − t) * x0 + (t * x1)), ((1 − t) * y0 + (t * y1)))</li>
+ <li>where ratio t = dt / d</li>
+ <li>and distance d = √((x1 − x0)² + (y1 − y0)²)</li>
+</ul></p>
+
+<p>That looks like a bit of a pain, but for our use case it simplifies nicely since sub-triangles are always a... ratio... of the golden ratio. That is to say:
+<ul>
+ <li>dt = φ * d</li>
+ <li>∴ t = φ</li>
+ <li>∴ no need to calc 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>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>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>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>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>
+<small>Sat, 07 Nov 2020 14:12:33 +0000</small>
+</div>
+<div class='entry'>
<h2 id='on-shaders'>on shaders</h2>
<small>[<a href='#on-shaders'>link</a>—<a href='blog/on-shaders.html'>standalone</a>]</small>
<p>Writing shaders is an impressive art form.<p/>
diff --git a/blog.html b/blog.html
@@ -27,6 +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 Aug 21 – <a href="blog/on-shaders.html">on shaders</a></li>
<li>2020 jun 30 – <a href="blog/a-fourth-test-post.html">a fourth test post</a></li>
<li>2020 Jun 30 – <a href="blog/a-third-test-post.html">A third test post.</a></li>
diff --git a/blog/assets/more_complicated_pizza.png b/blog/assets/more_complicated_pizza.png
Binary files differ.
diff --git a/blog/assets/p2.png b/blog/assets/p2.png
Binary files differ.
diff --git a/blog/assets/p2_four_colour_1.png b/blog/assets/p2_four_colour_1.png
Binary files differ.
diff --git a/blog/assets/p2_four_colour_2.png b/blog/assets/p2_four_colour_2.png
Binary files differ.
diff --git a/blog/assets/p2_two_colour.png b/blog/assets/p2_two_colour.png
Binary files differ.
diff --git a/blog/assets/p3.png b/blog/assets/p3.png
Binary files differ.
diff --git a/blog/assets/p3_four_colour_1.png b/blog/assets/p3_four_colour_1.png
Binary files differ.
diff --git a/blog/assets/p3_four_colour_2.png b/blog/assets/p3_four_colour_2.png
Binary files differ.
diff --git a/blog/assets/p3_two_colour.png b/blog/assets/p3_two_colour.png
Binary files differ.
diff --git a/blog/assets/pizza.png b/blog/assets/pizza.png
Binary files differ.
diff --git a/blog/assets/skeleton.png b/blog/assets/skeleton.png
Binary files differ.
diff --git a/blog/penrose-tilings-part-1.html b/blog/penrose-tilings-part-1.html
@@ -0,0 +1,61 @@
+<html>
+<head>
+<title>Penrose Tilings part 1</title>
+<link rel='stylesheet' type='text/css' href='../style.css'>
+<meta charset='utf-8'/>
+</head>
+<body>
+<h1>Penrose Tilings part 1</h1>
+<small>[<a href='../2020.html#penrose-tilings-part-1'>link</a>—<a href='penrose-tilings-part-1.html'>standalone</a>]</small>
+<p>I recently read an article that <a href="https://www.nobelprize.org/prizes/physics/2020/penrose/interview/">Roger Penrose</a> won a nobel prize for his theoretical work on Black Holes, which I'm sure is well deserved. Another creation of Roger Penrose, 'Penrose tilings' are also very interesting, being his solution for tiling an infinite plane aperiodically with only two tiles. Penrose tilings have an Escheresque quality to them (Escher and Penrose famously were both inspired by one-another during their respective careers) which I find fascinating.</p>
+<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 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. 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>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>
+
+<p>Once I had sufficiently bashed myself over the head trying to remember how the OpenGL rendering pipeline works, most of the implementation was a modest cycle of tinkering/ refactoring. The only tricky part was that I had to look up was <a href="https://math.stackexchange.com/questions/2045174/how-to-find-a-point-between-two-points-with-given-distance">how to find a point on a line</a> (thank you based math stack exchange), something I'm sure I learned in school and immediately forgot.</p>
+
+<p>For reference, the formula for calculating a point between two points is:
+<ul>
+ <li>(xt, yt) = (((1 − t) * x0 + (t * x1)), ((1 − t) * y0 + (t * y1)))</li>
+ <li>where ratio t = dt / d</li>
+ <li>and distance d = √((x1 − x0)² + (y1 − y0)²)</li>
+</ul></p>
+
+<p>That looks like a bit of a pain, but for our use case it simplifies nicely since sub-triangles are always a... ratio... of the golden ratio. That is to say:
+<ul>
+ <li>dt = φ * d</li>
+ <li>∴ t = φ</li>
+ <li>∴ no need to calc 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>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>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>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>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>
+<footer>by <strong><a href='https://michaelpercival.xyz/'>Michael Percival</a></strong></footer>
+</body>
+
+</html>+
No newline at end of file
diff --git a/rss.xml b/rss.xml
@@ -11,6 +11,63 @@ Updates from Michael Percival. Give this file to your RSS feeder to receive blog
<!-- LB -->
<item>
+<title>Penrose Tilings part 1</title>
+<guid>https://michaelpercival.xyz/2020.html#penrose-tilings-part-1</guid>
+<pubDate>Sat, 07 Nov 2020 14:12:33 +0000</pubDate>
+<description><![CDATA[
+<p>I recently read an article that <a href="https://www.nobelprize.org/prizes/physics/2020/penrose/interview/">Roger Penrose</a> won a nobel prize for his theoretical work on Black Holes, which I'm sure is well deserved. Another creation of Roger Penrose, 'Penrose tilings' are also very interesting, being his solution for tiling an infinite plane aperiodically with only two tiles. Penrose tilings have an Escheresque quality to them (Escher and Penrose famously were both inspired by one-another during their respective careers) which I find fascinating.</p>
+<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 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. 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>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>
+
+<p>Once I had sufficiently bashed myself over the head trying to remember how the OpenGL rendering pipeline works, most of the implementation was a modest cycle of tinkering/ refactoring. The only tricky part was that I had to look up was <a href="https://math.stackexchange.com/questions/2045174/how-to-find-a-point-between-two-points-with-given-distance">how to find a point on a line</a> (thank you based math stack exchange), something I'm sure I learned in school and immediately forgot.</p>
+
+<p>For reference, the formula for calculating a point between two points is:
+<ul>
+ <li>(xt, yt) = (((1 − t) * x0 + (t * x1)), ((1 − t) * y0 + (t * y1)))</li>
+ <li>where ratio t = dt / d</li>
+ <li>and distance d = √((x1 − x0)² + (y1 − y0)²)</li>
+</ul></p>
+
+<p>That looks like a bit of a pain, but for our use case it simplifies nicely since sub-triangles are always a... ratio... of the golden ratio. That is to say:
+<ul>
+ <li>dt = φ * d</li>
+ <li>∴ t = φ</li>
+ <li>∴ no need to calc 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>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>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>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>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>
+]]></description>
+</item>
+
+
+<item>
<title>on shaders</title>
<guid>https://michaelpercival.xyz/2020.html#on-shaders</guid>
<pubDate>Fri, 21 Aug 2020 22:03:36 +0100</pubDate>
