2020.html (9721B)
1 <head> 2 <title>Michael's Blog</title> 3 <meta charset="utf-8"> 4 <meta name="author" content="mpizzzle"> 5 <link href="style.css" rel="stylesheet"> 6 <link rel="icon" type="image/png" href="rss.png"/ > 7 </head> 8 <body> 9 <nav> 10 <div class="nav-container"> 11 <div class="nav-element"> 12 <p><a href="https://git.michaelpercival.xyz"><img src="git.png" alt="" width="32" height="32" /></a> | <a href="https://github.com/mpizzzle"><img src="github.png" alt="" width="32" height="32" /></a> | <a href="rss.xml"><img src="rss.png" alt="" width="32" height="32" /></a></p> 13 </div> 14 <div class="nav-element"> 15 <p><a href="index.html">home</a> | 16 <a href="2020.html">thoughts</a> | 17 <a href="software.html">software</a> | 18 <a href="hardware.html">hardware</a> | 19 <a href="library.html">library</a> | 20 <a href="shaders.html">shaders</a></p> 21 </div> 22 <div class="nav-element"> 23 <p><a href="mailto:m@michaelpercival.xyz">m@michaelpercival.xyz</a> | <a href="gpg.html"><img src="gnupg.png" alt="" width="32" height="32" /></a></p> 24 </div> 25 </div> 26 </nav> 27 <div class="main"> 28 <p><a href="blog.html"><li>blog index</li></a></p> 29 30 <!-- LB --> 31 <div class='entry'> 32 <h2 id='penrose-tilings-part-1'>Penrose Tilings part 1</h2> 33 <small>[<a href='#penrose-tilings-part-1'>link</a>—<a href='blog/penrose-tilings-part-1.html'>standalone</a>]</small> 34 <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> 35 <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> 36 37 <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> 38 <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> 39 <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> 40 <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: 41 42 <p><a href="blog/assets/pizza.png"><img src="blog/assets/pizza.png" alt="" width="400" height="400" /></a> 43 <a href="blog/assets/more_complicated_pizza.png"><img src="blog/assets/more_complicated_pizza.png" alt="" width="400" height="400" /></a></p> 44 45 <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> 46 47 <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> 48 49 <p>For reference, the formula for calculating a point between two points is: 50 <ul> 51 <li>(xt, yt) = (((1 − t) * x0 + (t * x1)), ((1 − t) * y0 + (t * y1)))</li> 52 <li>where ratio t = dt / d</li> 53 <li>and distance d = √((x1 − x0)² + (y1 − y0)²)</li> 54 </ul></p> 55 56 <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: 57 <ul> 58 <li>dt = φ * d</li> 59 <li>∴ t = φ</li> 60 <li>∴ no need to calculate d at all (nice.).</li> 61 </ul></p> 62 63 <p>Once that was solved I ended up with this interesting pattern, from which the Penrose tiling can be carved out:</p> 64 <a href="blog/assets/skeleton.png"><img src="blog/assets/skeleton.png" alt="" width="400" height="400" /></a></p> 65 66 <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> 67 68 <p><a href="blog/assets/p2.png"><img src="blog/assets/p2.png" alt="" width="400" height="400" /></a> 69 <a href="blog/assets/p3.png"><img src="blog/assets/p3.png" alt="" width="400" height="400" /></a></p> 70 71 <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> 72 73 <p><a href="blog/assets/p2_two_colour.png"><img src="blog/assets/p2_two_colour.png" alt="" width="400" height="400" /></a> 74 <a href="blog/assets/p3_two_colour.png"><img src="blog/assets/p3_two_colour.png" alt="" width="400" height="400" /></a></p> 75 76 <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> 77 78 <p><a href="blog/assets/p3_four_colour_1.png"><img src="blog/assets/p3_four_colour_1.png" alt="" width="400" height="400" /></a> 79 <a href="blog/assets/p2_four_colour_1.png"><img src="blog/assets/p2_four_colour_1.png" alt="" width="400" height="400" /></a></p> 80 <p><a href="blog/assets/p2_four_colour_2.png"><img src="blog/assets/p2_four_colour_2.png" alt="" width="400" height="400" /></a> 81 <a href="blog/assets/p3_four_colour_2.png"><img src="blog/assets/p3_four_colour_2.png" alt="" width="400" height="400" /></a></p> 82 83 <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> 84 <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> 85 <p>Peace out.</p> 86 <small>Mon, 09 Nov 2020 22:35:02 +0000</small> 87 </div> 88 <div class='entry'> 89 <h2 id='on-shaders'>on shaders</h2> 90 <small>[<a href='#on-shaders'>link</a>—<a href='blog/on-shaders.html'>standalone</a>]</small> 91 <p>Writing shaders is an impressive art form.<p/> 92 93 <p>I think this is because shaders intersect with a few interesting disciplines: mathematics, art, minimalism, etc. and thus anyone can look at a shader and see the inherent beauty.<p/> 94 95 <p>The flip side is that writing shaders is hard, and my own 'shading ability' is total dog shit.<p/> 96 97 <p>I'm going to try and nail two birds with one stone; my inability to finish personal projects, and my terrible understanding of shaders. Writing a shader is such a small self-contained project that it surely must be hard not to finish one, even for someone as lazy as myself? I will soon find out.<p/> 98 99 <p>I want to see if I can crank out a shader every day for two weeks, creative integrity be damned. Of course this includes publishing shaders to this site, which means setting up whatever relevant frameworks (exactly the kind of BS that I end up tinkering with endlessly to avoid actually doing my projects).<p/> 100 101 <p>Vamos. (see current progress <a href="../shaders.html">here<a/>.)<p/> 102 <small>Fri, 21 Aug 2020 22:15:31 +0100</small> 103 </div> 104 </div> 105 </body>