{"id":244,"date":"2025-09-25T19:32:33","date_gmt":"2025-09-25T18:32:33","guid":{"rendered":"https:\/\/zebra-north.com\/code\/?p=244"},"modified":"2026-08-10T18:35:38","modified_gmt":"2026-08-10T17:35:38","slug":"how-to-draw-concentric-triangles-in-a-shader","status":"publish","type":"post","link":"https:\/\/zebra-north.com\/code\/2025\/09\/25\/how-to-draw-concentric-triangles-in-a-shader\/","title":{"rendered":"How to Draw Concentric Triangles in a Shader"},"content":{"rendered":"\n

A simple way to draw a triangle, or concentric triangles, in a shader.<\/p>\n\n\n\n\n\n\n\n

Given any point (u, v)<\/code> in space, we wish to find the size of the triangle upon which that point lies. We can then use that size to draw the triangle.<\/p>\n\n\n\n

We will define the size of the triangle as the distance between centre and the midpoint of each edge. The triangle is symmetrical about the y axis, with the horizontal edge on the bottom. The centre is at the origin, (0, 0).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  1. Calculate a<\/code> as
    a = -v<\/code>.<\/li>\n\n\n\n
  2. Calculate b<\/code> by rotating the edge to be vertical, then taking the horizontal part of the coordinate:
    b = rotate2d((abs(u), v), 90 - \u03b1).x<\/code>
    where \u03b1<\/code> is the angle between the base of the triangle and one side of the triangle.<\/li>\n\n\n\n
  3. The size of the triangle is then the greater of a<\/code> and b<\/code>:
    size = max(a, b)<\/code><\/li>\n<\/ol>\n\n\n\n

    The size can then be used to daw the triangle:<\/p>\n\n\n\n

      \n
    • To draw a filled triangle, colour any points where the size is less than a threshold.<\/li>\n\n\n\n
    • To draw a triangular cutout, colour any points where the size is greater than a threshold.<\/li>\n\n\n\n
    • To draw concentric triangles, colour any points where sin(size * frequency) > 0.<\/li>\n<\/ul>\n\n\n\n

      To make a non-symmetrical triangle perform step 2 twice, once with the angle of the left side and once with the angle of the right side.<\/p>\n\n\n\n

      To rotate, scale or translate the triangle: rotate, scale or translate (u, v) by the inverse of the effect required before performing this procedure.<\/p>\n\n\n\n

      <\/p>\n","protected":false},"excerpt":{"rendered":"

      A simple way to draw a triangle, or concentric triangles, in a shader.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-244","post","type-post","status-publish","format-standard","hentry","category-shader"],"_links":{"self":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":3,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/244\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}