Class: GeoPattern::TessellationPattern

Inherits:
BasePattern
  • Object
show all
Defined in:
lib/geo_pattern/pattern/tessellation_pattern.rb

Constant Summary

Constants inherited from BasePattern

BasePattern::FILL_COLOR_DARK, BasePattern::FILL_COLOR_LIGHT, BasePattern::OPACITY_MAX, BasePattern::OPACITY_MIN, BasePattern::STROKE_COLOR, BasePattern::STROKE_OPACITY

Instance Attribute Summary

Attributes inherited from BasePattern

#hash, #svg

Instance Method Summary collapse

Methods inherited from BasePattern

#fill_color, #hex_val, #map, #opacity

Instance Method Details

#build_rotated_triangle_shape(side_length, width) ⇒ Object 



88
89
90
91
 
# File 'lib/geo_pattern/pattern/tessellation_pattern.rb', line 88

def build_rotated_triangle_shape(side_length, width)
  half_height = side_length / 2
  "0, 0, #{width}, #{half_height}, 0, #{side_length}, 0, 0"
end

#render_to_svg ⇒ Object 



3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
# File 'lib/geo_pattern/pattern/tessellation_pattern.rb', line 3

def render_to_svg
  # 3.4.6.4 semi-regular tessellation
  side_length     = map(hex_val(0, 1), 0, 15, 5, 40)
  hex_height      = side_length * Math.sqrt(3)
  hex_width       = side_length * 2
  triangle_height = side_length/2 * Math.sqrt(3)
  triangle        = build_rotated_triangle_shape(side_length, triangle_height)
  tile_width      = side_length*3 + triangle_height*2
  tile_height     = (hex_height * 2) + (side_length * 2)

  svg.set_width(tile_width)
  svg.set_height(tile_height)

  for i in 0..19
    val     = hex_val(i, 1)
    opacity = opacity(val)
    fill    = fill_color(val)

    styles  = {
            "stroke"         => STROKE_COLOR,
            "stroke-opacity" => STROKE_OPACITY,
            "fill"           => fill,
            "fill-opacity"   => opacity,
            "stroke-width"   => 1
    }

    case i
    when 0 # all 4 corners
      svg.rect(-side_length/2, -side_length/2, side_length, side_length, styles)
      svg.rect(tile_width - side_length/2, -side_length/2, side_length, side_length, styles)
      svg.rect(-side_length/2, tile_height-side_length/2, side_length, side_length, styles)
      svg.rect(tile_width - side_length/2, tile_height-side_length/2, side_length, side_length, styles)
    when 1 # center / top square
      svg.rect(hex_width/2 + triangle_height, hex_height/2, side_length, side_length, styles)
    when 2 # side squares
      svg.rect(-side_length/2, tile_height/2-side_length/2, side_length, side_length, styles)
      svg.rect(tile_width-side_length/2, tile_height/2-side_length/2, side_length, side_length, styles)
    when 3 # center / bottom square
      svg.rect(hex_width/2 + triangle_height, hex_height * 1.5 + side_length, side_length, side_length, styles)
    when 4 # left top / bottom triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{side_length/2}, #{-side_length/2}) rotate(0, #{side_length/2}, #{triangle_height/2})"}))
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{side_length/2}, #{tile_height--side_length/2}) rotate(0, #{side_length/2}, #{triangle_height/2}) scale(1, -1)"}))
    when 5 # right top / bottom triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width-side_length/2}, #{-side_length/2}) rotate(0, #{side_length/2}, #{triangle_height/2}) scale(-1, 1)"}))
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width-side_length/2}, #{tile_height+side_length/2}) rotate(0, #{side_length/2}, #{triangle_height/2}) scale(-1, -1)"}))
    when 6 # center / top / right triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width/2+side_length/2}, #{hex_height/2})"}))
    when 7 # center / top / left triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width-tile_width/2-side_length/2}, #{hex_height/2}) scale(-1, 1)"}))
    when 8 # center / bottom / right triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width/2+side_length/2}, #{tile_height-hex_height/2}) scale(1, -1)"}))
    when 9 # center / bottom / left triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width-tile_width/2-side_length/2}, #{tile_height-hex_height/2}) scale(-1, -1)"}))
    when 10 # left / middle triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{side_length/2}, #{tile_height/2 - side_length/2})"}))
    when 11 # right / middle triangle
      svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width-side_length/2}, #{tile_height/2 - side_length/2}) scale(-1, 1)"}))
    when 12 # left / top square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "translate(#{side_length/2}, #{side_length/2}) rotate(-30, 0, 0)"}))
    when 13 # right / top square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "scale(-1, 1) translate(#{-tile_width+side_length/2}, #{side_length/2}) rotate(-30, 0, 0)" }))
    when 14 # left / center-top square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "translate(#{side_length/2}, #{tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
    when 15 # right / center-top square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "scale(-1, 1) translate(#{-tile_width+side_length/2}, #{tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
    when 16 # left / center-top square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "scale(1, -1) translate(#{side_length/2}, #{-tile_height+tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
    when 17 # right / center-bottom square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "scale(-1, -1) translate(#{-tile_width+side_length/2}, #{-tile_height+tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
    when 18 # left / bottom square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "scale(1, -1) translate(#{side_length/2}, #{-tile_height+side_length/2}) rotate(-30, 0, 0)"}))
    when 19 # right / bottom square
      svg.rect(0, 0, side_length, side_length,
                styles.merge({"transform" => "scale(-1, -1) translate(#{-tile_width+side_length/2}, #{-tile_height+side_length/2}) rotate(-30, 0, 0)"}))
    end
  end
end