{"id":863,"date":"2020-12-04T15:11:11","date_gmt":"2020-12-04T15:11:11","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=863"},"modified":"2020-12-07T11:03:10","modified_gmt":"2020-12-07T11:03:10","slug":"transforms-and-symmetry-of-triangles","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/transforms-and-symmetry-of-triangles\/","title":{"rendered":"Create seamless patterns of triangles"},"content":{"rendered":"\n

In Fun with canvas transforms<\/a> a few basic examples of transforms with canvas<\/code> where presented. Let’s make it a bit more interesting and create a tile of triangles to use as a seamless pattern as used in the Kaleidoscope toy tool<\/a>.<\/p>\n\n\n\n

\"\"
Kaleidoscope toy tool in triangle mode<\/figcaption><\/figure>\n\n\n\n

The point of depart is a triangular base fragment. The triangle is equilateral: all sides have the same length and (therefor) all angles are 60 degrees.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Drawing copies of that image using transforms we will make the following tile:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If you add copies of the tile horizontally or vertically the pattern just goes on and on: it’s seamless<\/em>.<\/p>\n\n\n\n

I find it useful when figuring out what transforms you need to get a desired result, to pick a point in the source fragment that you can use as an anchor<\/em>. The anchor will be translated to it’s definite location and will not leave that place anymore whatever rotations or scalings follow. For the triangle you could use one of the vertices for an anchor, but I think it’s most clear to use the center of the triangle. <\/p>\n\n\n\n

But where is the center of the triangle? <\/p>\n\n\n\n

Centre of a triangle<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Let’s first establish the height of the triangle. Suppose the sides of the triangle have length d<\/em><\/code>, then the height h<\/em><\/code> follows from Pythagoras’s theorem.<\/p>\n\n\n\n

h = \\tfrac{1}{2} \\sqrt{3} d<\/pre><\/div>\n\n\n\n
A little more geometry shows that the distance of M<\/em> to the top of the triangle is twice the distance of M<\/em> to the base. So the coordinates of M<\/em><\/code> relative to the left-top of the bounding box are<\/p>\n\n\n\n
(\\tfrac{d}{2}, \\tfrac{2}{3}h)<\/pre><\/div>\n\n\n\n
Position centered triangle<\/h2>\n\n\n\n
If we draw the triangle image on position (0, 0)<\/p>\n\n\n
\n  
\n    
\n      JS    <\/div>\n    
\n          <\/div>\n  <\/header>\n